Widget Email Subscribe Box Blogger With CSS Hover

Widget Email Subscribe Box Blogger With CSS and Hover Effect - Ketika anda berkunjung ke sebuah blog, dan anda melihat dibawah postingannya terdapat widget email subscribtion box maka apa yang anda lakukan? Atau mungkin anda belum tau apa itu widget email subscribtion box ?

Baiklah akan saya jelaskan secara singkat.
Widget ini berguna agar seseorang bisa " berlangganan artikel dan mengetahui serta mendapat konten yang masih anget" langsung dari blog tersebut melalui email.

Kali ini kita akan buat yang beda dari widget email subscribe melayang dengan penambahan CSS berefek hover . Belum paham? Cek bawah postingan blog ini :))

Jika tertarik memasangnya, ikuti langkah langkah berikut.

Anggap saja anda sudah login ke blogger dan berada di dashboard blog.

1.Pilih template
2. Edit HTML
3.Tembahkan kode dibawah ini diatas ]]></b:skin> atau </style>


 /* Subscribe By Email From newbanie.blogspot.com */
#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFSJmXqhe81VA677SyoyxWZYGzqHHc6r8nEYx6DSWPD1E8eP9j89ZnxlS-B_w2-tq5PLBh7ybzAUlVVJgxP_v8ZIM_lwkYaRhd5WZiiPMNTUZ8Il7YlezoIRA7XGypkB-6NuhGSy4DIQL7/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}

4. Cari kode <data:post.body/> kode berikut dibawahnya taruh dibawahnya


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