Membuat Widget Subscribe Email ala Blog HKBT

Membuat Widget Subscribe Email ala Blog HKBT - Sesuai yang telah saya janjikan kepada rekan saya sebelumnya yang request cara membuat widget subscribe email ala Blog HKBT di ChatBox.

Apa kelebihan dari tampilan Subscribe Email box ala Blog HKBT ini? kelebihannya mungkin terlihat lebih simpel dan lebih efektif dalam jangkauan visitor yang akan berlangganan di Blog tersebut, dengan tampilan padat, ringan dan dilengkapi dengan tombol css.

CSS

/* Tema : Subscribe By Email oleh Blog HKBT
URL: http://hilbramkurnia3.blogspot.com/2014/01/membuat-widget-subscribe-email-ala-blog-hkbt.html */ 
#subscribe-css{padding:3px 0}
.subscribe-wrapper{color:#fff; background:#F06666; font-size:12px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:none;font-weight:500}
.subscribe-form{background:#F06666; 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/AVvXsEiKbYY1AoPH9yaHfIpEmmYfjY4hhbYHuC9F2xg5c-9nHO2e5NvwFIhAqflG9DUpxRDE5GbqWRsYLLhzuNZgav5IYQzcjnUAkSxpqH4tRDSBQpNVjeWH5Ue5RNx4RVMYInGVK1xt7lrYCfZj/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}

HTML

<div id="subscribe-css">
<div class="subscribe-wrapper">
<p>
Dengan memasukkan email pada kolom di bawah ini, Anda akan mendapatkan update artikel dari <b style='color:#F9D233'>Blog HKBT</b> secara gratis.</p>
<div class="subscribe-form">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=HilbramKurniaBlogsTutorial" class="subscribe-form" method="post" onsubmit="window.open
('http://feedburner.google.com/fb/a/mailverify?uri=HilbramKurniaBlogsTutorial', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="HilbramKurniaBlogsTutorial" /><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>
<center>Powered by : <a href="http://hilbramkurnia3.blogspot.com/"><b style='color:#FFE100'>HKBT</b></a></center></div>
</div>

Kode yang telah saya bidangi sengaja untuk memudahkan Anda mengedit/merubah tampilan sesuai dengan keinginan.

Semoga bermanfaat..