Cara Membuat Widget Subcribe Menarik

Sobat kali ini saya mau share bagaimana cara membuat widget berlangganan/ Subcribe yang lebih variatif.
ini contohnya :

Menarik bukan sobat. Ini kode HTML nya...

<style>
.kodbar{width: 100%; float: left;}
.kodbar .count{color:#333; font-size: 14px; font-weight: bold; font-family: Helvetica, Arial; background: #fff; height: 45px; line-height: 45px; vertical-align: middle; width: 100%; padding: 0 10px 0 4px;}
.kodbar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 39px; vertical-align: top; padding-right:3px;}
.kodbar .subicons{border-bottom: 1px solid #e6e6e6; margin: 0px 0 0px 0; float: left; width: 300px; font-family: Helvetica, Arial; font-size: 14px;}
.kodbar .subicons a{text-decoration: none; color:#333333;}
.kodbar .subicons a:hover{text-decoration: underline; color:#333333;}
.kodbar .subicons .rssicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinS6GTxTJmI1b4VlZ3wGcbbNYTRpI0bhc_KH4idvj0s2useYhOmVac-nKdXl8Mdqsm9-f63yzzSdWMwRhqgEL1Q-aNg63Id9TaZIugV3TtxwDecWFBII23c-AEvqlA3165Mc2dAnCCXvM/s400/rss.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}
.kodbar .subicons .fbicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdxzufQAgBduZidueVh7UpI6sIjexDVj-bh8s1zSIbwMuwkAz5mDWI3RPufwjxAasZhYgIHSfRDEpkcZPbXirqbmc5zQyp55k786x6jG8_yVVya9_V9X6u9YpYjGDw0SGw8YUZQ3yNrEg/s400/facebook.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}
.kodbar .subicons .twittericon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTONuCEaETqNnZ2KTDNiKlSQfg5TJOMWc8pXYrPhBdCrOoUtbIp0K20WutuJFrwMziqLaQMYb6ZKE-3KxPmZaOFCrAW-aVuUnnd-PNjOU7ld8p8ThVOOdq7804_SW662je3KsKd04QYoQ/s400/twitter.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}
.kodbar .emailsub{border-bottom: 1px solid #e6e6e6; padding: 15px 0 20px 0; float: left; width: 100%; font-family: Helvetica, Arial;}
.kodbar .emailsub .emailicon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiCytmyluvkTkrfzJUQLDrjGT2djGw04RQ4PZOUM37JcW40CtGLs-CV5wmYLzsYUr7NmAAH2fz9_oZEWGFbBGO_AWISGhrjOFCwxP7LEHFxOywwtEKwnsf5Fx7yPZcpyG2OrTEKaFClv0/s400/email.png) no-repeat left center; float: left; padding: 5px 15px 0px 35px; margin: 0 0 0 5px; width: 300px; height: 28px; line-height: 28px; vertical-align: middle; font-size: 14px; color: #333; }
.kodbar .emailsub .emailupdatesform{margin: 15px 0 5px 5px; width: 300px; float: left;}
.kodbar .emailsub .emailupdatesform input.emailupdatesinput{background: #fff !important; float: left; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 200px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
.kodbar .emailsub .emailupdatesform input.joinemailupdates{background:-moz-linear-gradient(top,#57ABFE 0%,#0080ff 100%); background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#0080ff)); border: 1px solid #0080ff; text-transform: uppercase; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
</style>
<div class="kodbar">
<div class="count">
Gabung <span class="bigcount">Disini</span> Untuk Berlangganan</div>
<div class="subicons">
<div class="rssicon">
<a href="http://feeds.feedburner.com/MahasiswaLugu" target="_blank">RSS</a></div>
<div class="fbicon">
<a href="http://www.facebook.com/pages/Lugu-Group-Independence/149462678461044?sk=app_167969729896883" rel="nofollow" target="_blank">Facebook</a></div>
<div class="twittericon">
<a href="https://twitter.com/ifandankaliand" rel="nofollow" target="_blank">Twitter</a></div>
</div>
<div class="emailsub">
<div class="emailicon">
Berlanggan Artikel terbaru</div>
<div class="emailupdatesform">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=MahasiswaLugu', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="emailupdatesinput" gtbfieldid="10" name="email" onblur="if (this.value == '') {this.value = 'Masukkan Email Anda.....';}" onfocus="if (this.value == 'Masukkan Email Anda.....') {this.value = '';}" type="text" value="ifan.prabowo91@gmail.com" /><input name="uri" type="hidden" value="MahasiswaLugu" /><input class="joinemailupdates" type="submit" value="Join" /><center><p><a href="http://feeds.feedburner.com/MahasiswaLugu"><img src="http://feeds.feedburner.com/~fc/MahasiswaLugu?bg=0000CC&amp;fg=FFFFFF&amp;anim=1" height="26" width="88" style="border:0" alt="" /></a></p></center></form>
</div>
</div>
</div>

Silahkan sobat rubah yang bertanda merah dan biru sesuai data blog sobat. Silahkan tanya jika ada yang kurang jelas ya sobat. Semoga bermanfaat.