Pasang Box Berlangganan email di blog

Hallo.. sobat .. !! Selamat datang di Fajar345 Blog, Hari ini saya akan share mengenai Box berlangganan email Feed di blogger. Sebelumnya saya pun pernah menulis tentang Cara membuat widget berlangganan feed Tulisan hari ini sebenarnya sama saja dengan tulisan saya yang sebelumnya, perbedaannya hanya pada tampilan box berlangganan emailnya saja. Jika tulisan saya yang di beri judul Cara membuat widget berlangganan feed tampilan box berlangganan email nya seperti yang saya gunakan, kali ini dengan tampilan yang berbeda dan menurut saya box berlangganan email yang saya tulis kali ini tampilannya bisa dibilang lebih elegan dan lebih menarik.
Jika sobat tertarik untuk memasangnya berikut adalah box berlangganan email

<style>
.mbtbar{width: 100%; float: left;}
.mbtbar .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;}
.mbtbar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 39px; vertical-align: top; padding-right:3px;}
.mbtbar .subicons{border-bottom: 1px solid #e6e6e6; margin: 0px 0 0px 0; float: left; width: 300px; font-family: Helvetica, Arial; font-size: 14px;}
.mbtbar .subicons a{text-decoration: none; color:#333333;}
.mbtbar .subicons a:hover{text-decoration: underline; color:#333333;}
.mbtbar .subicons .rssicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbtnxIzUjLQvpTGWdm8rZ8rP-PGTY0WNsBtY2fMMNtgT3ArBRtyvdLp4tKLRtV-kUBLnTjSjTVZXt1_-OysTyvmdGyE0yhw15T3WajtQLaJawFQQOzkzyWiHqwMghOIAUcacR6isli31I/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;}
.mbtbar .subicons .fbicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTzgSYPqvL2TCwAjBx8ChZOg6WcM_WV3PS9uKvazsxxXfY4MX1NhpkFj1Cz2NbBnsifLJS2DByY7rVGcY1IpYlqsp6kdgeZckc1GJ6CnJt9vo-dGMYATOEB9r73N0Lw2AY-iNaJxbfNis/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;}
.mbtbar .subicons .twittericon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhifZzOMQKH-hmkBafrgJw5exEk0qR9_6N7td1qxE1z3pguFksd9ETjmqK2jL3QB0C9Ih72e1730pKn9HMeNZoGdYOdtdTucEDB7k1b2u0DAeJNDcttB-_sbLiVtNAk2ymt_ckFMAW_PuQ/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;}
.mbtbar .emailsub{border-bottom: 1px solid #e6e6e6; padding: 15px 0 20px 0; float: left; width: 100%; font-family: Helvetica, Arial;}
.mbtbar .emailsub .emailicon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvWthSnd3z7idlZvm2DZQb2c6OM6wSVaIBJXA0FIz3fVjnilbxIpYiedolGyi_s811K4dLPhIQgLFZqeUUkLQV7F81jFYVL_rHUZ3rOI5Oo5KTVcsM09yhxyn7spT3J3bG1f2_0jOFhXE/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; }
.mbtbar .emailsub .emailupdatesform{margin: 15px 0 5px 5px; width: 300px; float: left;}
.mbtbar .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;}
.mbtbar .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="mbtbar"><div class="count">Join <span class="bigcount">1675+</span> People Following MBT</div><div class="subicons"><div class="rssicon"><a href="http://feeds.feedburner.com/fajar345" target="_blank">RSS</a></div><div class="fbicon"><a href="http://www.facebook.com/fajar345" target="_blank" rel="nofollow">Facebook</a></div><div class="twittericon"><a href="http://twitter.com/effezz" target="_blank" rel="nofollow">Twitter</a></div></div>
<div class="emailsub">
<div class="emailicon">Stay Updated via Email Newsletter</div>
<div class="emailupdatesform">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=tntbystc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Enter your email..." onblur="if (this.value == '') {this.value = 'Enter your email...';}" onfocus="if (this.value == 'Enter your email...') {this.value = '';}" type="text" /><input value="tntbystc" name="uri" type="hidden" /><input value="Join" class="joinemailupdates" type="submit" /></form></div></div></div>

Jika sobat tertarik untuk memasang box email berlangganan feed tampilannya seperti berikut..
Jangan lupa sesuaikan alamat feed, facebook dan twitter sobat juga bisa menyesuaikan warna dengan warna yang sesuai dengan template yang sobat miliki.
Jangan lupa follow by email juga yah ... :)
Sumber kode : my blogger trick

Join 1675+ People Following MBT

RSS

Facebook

Twitter

Stay Updated via Email Newsletter

Sobat suka tulisan ini..?