Cara Membuat Widget Subscribe Email di Blog

Halo Semua Sobat Blogger,di post sebelumnya saya telah membahas Cara Memasang Flat Breaking News di Blog ,di post kali ini saya akan membahas tentang Bagaimana Cara Membuat Widget Subscribe Email di Blog,di style Widget ini saya menggunakan style dari arlinadzgn dan menurut saya design dan Widget Subscribe Email milik arlinadzgn mempunyai design yang sangat keren,dan flat.

Ya,gambar diatas adalah contoh Subscribe Email yang akan saya bahas di post ini

Baiklah,langsung saja ke tutorial

Cara Membuat Widget Subscribe Email di Blog

1.Buka Blogger
2.Pilih Blog yang ingin dipasang,masuk Template dan klik Edit HTML
3.Cari kode ]]></b:skin> lalu copy kode dibawah dan letakan diatasnya

/* Subscribe Box */
#subscribe-box p{font-family:Helvetica,sans-serif;font-size:14px;color:#fff;margin:0 0 24px;padding:0}
#subscribe-box .emailfield{margin:auto}
#subscribe-box .emailfield input{padding:12px;color:#bcc4ca;border:none;font-size:14px;margin-bottom:16px}
#subscribe-box .emailfield input:focus{color:#454545;outline:none}
#subscribe-box .emailfield .submitbutton{background-color:#f97e76;color:#fff;margin:0;width:100%;font-family:"Open Sans Condensed",Arial,sans-serif;font-size:16px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
#subscribe-box .emailfield .submitbutton:active,#subscribe-box .emailfield .submitbutton:hover{background-color:#e26d65;color:#fff;}
#HTML98{background-color:#55616d}
#HTML98 h2,#HTML98 h3{color:#fff}

4.Jika sudah di-letakan,silahkan klik Save Template

Peletakan Widget Subscribe Email

1.Untuk masalah peletakan saran saya adalah meletakannya di posisi sidebar-blog.
2.Masuk ke Tata Letak,klik Tambahkan Widget dan pilih HTML/Javascript
3.Copy kode dibawah ini dan letakan di box nya

<div class="widget HTML" id="HTML98">
<h3 class="title">Berlangganan Via Email</h3>
<div class="widget-content">
<div id="subscribe-box">
<p>Jika Anda menyukai Artikel di blog ini, Silakan berlangganan gratis via email.</p>
<div class="emailfield">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=DEEONS', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Alamat Email&quot;;}" onfocus="if (this.value == &quot;Alamat Email&quot;) {this.value = &quot;&quot;;}" value="Alamat Email" type="text">
<input name="uri" value="DEEONS" type="hidden">
<input name="loc" value="en_US" type="hidden">
<input class="submitbutton" value="Lanjutkan" type="submit">
</form>
</div>
</div>
</div>
</div>

4.Eitts,jangan di Save dulu,ganti DEEONS dengan Username Feedburner anda

Setelah itu,silahkan kalian Save dan cek Blog kalian masing masing

SourceCode : http://www.arlinatheme.blogspot.co.id

Cukup sekian dari post ini,semoga dapat menambah informasi bagi anda