Membuat Subscribe Via Email Box Valid HTML5 dan CSS3

Subscribe via email ini sangat berguna bagi sobat yang blognya sudah terjaring dengan feedburner. Karena, widget ini pun bisa dicoba dengan adanya feedburner. Mungkin, banyak design widget subscribe yang sudah teman-teman share. Tapi, design widget yang satu ini saya share juga ke sobat yang mungkin masih belum menemukan design yang menarik dan cocok untuk template blog sobat. Untuk SS-nya, silahkan lihat gambar di bawah ini, atau sobat juga bisa melihat demo-nya di samping artikel ini.

Bagiamana, cukup menarik bukan? Langsung saja, saya share tutorial-nya.

1. Pertama, silahkan cari kode ]]></b:skin>. Kemudian, letakkan CSS di bawah ini tepat di atas kode ]]></b:skin>.

 /* Subscribe By Email */
#subscribe-css{padding:3px 0}
.subscribe-wrapper{color:#fff; background:#539AD4; font-size:12px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:none;font-weight:500}
.subscribe-form{background:#539AD4; clear:both;display:block;margin:10px 0;overflow:hidden}
form.subscribe-form{clear:both;display:block;margin:10px 0 0;width:auto;overflow:hidden}
.subscribe-css-email-field{background:#eee url(http://1.bp.blogspot.com/-JMYdQsIa9WQ/UDZqxqqrTEI/AAAAAAAAFho/AocEv70U8K8/s1600/sprites.png) no-repeat 1px -27px;color:#444;margin:0 0 15px;padding:12px 40px;width:100%;border:none}
.subscribe-css-email-button{background:#99BEDC;color:#fff;cursor:pointer;font-weight:700;padding:10px;text-transform:none;width:100%;border:none;font-size:16px}
.subscribe-css-email-button:hover{transition:all .3s ease-in;background:#1A87E1;border:none}

2. Simpan Template

3. Lalu, Add Gadget HTML/JavaScript, dan masukkan kode di bawah ini.

 <div id="subscribe-css">
<div class="subscribe-wrapper">
<p>
Dengan memasukkan email pada kolom di bawah ini, anda akan mendapatkan update artikel dari <i>Abu Maryana</i> secara gratis.</p>
<div class="subscribe-form">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=Abumaryana" class="subscribe-form" method="post" onsubmit="window.open
('http://feedburner.google.com/fb/a/mailverify?uri=Abumaryana', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="Abumaryana" /><input name="loc" type="hidden" value="en_US" /><input class="subscribe-css-email-field" name="email" autocomplete="off" placeholder="Enter your email address "/><input class="subscribe-css-email-button" title="" type="submit" value="Subscribe Now !" /></form>
</div>
</div>
</div>

Warna merah adalah warna background widget
Warna biru adalah komposisi warna dari tombol subscribe now
Warna kuning adalah judul blog.
Warna hijau adalah ID Feedburner blog.

Sesuaikan sendiri warnanya sesuai keinginan. Sobat juga bisa menggunakan Tool Kode Warna.

4. Terakhir, SAVE.

Sumber:silumanpisces.blogspot.com

Cukup mudah bukan. Semoga dapat bermanfaat bagi blog sobat. Happy Blogging

Terima kasih kepada +Bung Frangki