Cara Membuat Subscribe Valid HTML5

How to Make Valid HTML5 Subscribe : atau yang lebih dikenal dengan berlangganan via email adalah salah satu widget yang berfungsi untuk mengirimkan update artikel ke email melalui pelanggan yang telah terdaftar sebelumnya secara otomatis. Sedangkan untuk blogger sendiri, widget ini dimaksudkan untuk menambah jumlah pengunjung ke blognya. Tetapi sebelum memasang Subscribe ini sebelumnya terlebih dahulu sudah mendaftarkan blognya di feedburner. Widget ini juga mampu meningkatkan trafik suatu blog. 

Dengan memasang widget subscribe ini setidaknya bagi mereka yang telah mendaftarkan emailnya terlebih dahulu akan mendapatkan pemberitahuan lewat email.

Cara Pemasangan Subscribe Valid HTML5:

1. Masukan CSS berikut ini diatas kode ]]></b:skin> atau </stytle>


#subscribe-css{padding:3px 0;background:#f26f65}
.subscribe-wrapper{color:#fff;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:none;font-weight:500}
.subscribe-form{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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgygMHJlwtmzYFebAk6OpzJ3fDgBzKFzxA1ArSkiw6URQRctZQjiPSiPfv8D4t3M1DEAo3Gut0YUvuCcmsrqlVKrzU4I1q1_kdaBlCb-BJSBFL6VXO4UvV6-BwSNKIE71fafXYERnUDEcEM/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:#febdaf;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:#d12300;border:none}

2. Tambahkan Gadget HTML/JavaScript dan pastekan kode di bawah ini di dalamnya

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

Keterangan : Ganti TUTORIALNES dengan ID Feedburner anda

3. Save

Sumber : http://www.bungfrangki.com/2014/01/membuat-widget-berlangganan-email-valid-css3.html