Cara Memasang Tombol Subcribe By Email

• facebook

Kemarin ada pengunjung yang menanyakan lewat facebook comment cara berlangganan artikel blog ini via email,tanpa pikir panjang langsung aja saya sediakan subcribe by email seperti yang sobat lihat di akhir arikel.Saya pikir ada baiknya saya share disini cara membuat tombol subcribe by email ya.. walaupun banyak sekali blog-blog yang mengulas tentang topik yang sama itung - itung kan,buat bahan update blog aje hehe...

Cara memasang Tombol berlangganan via Email
saya asumsikan sobat sudah punya akun di feedburner kalo belum punya klik di sini
Langkah selanjutnya pasang kode berikut pada sidebar maupun di akhir postingan.
saya memiliki 2 feedburner anda bisa sesuaikan mana yang sobat suka.

<style>
.blogonol-email{background:url(http://i53.tinypic.com/ztdik0.png) no-repeat 0px 12px; width:260px; padding:10px 0 0 55px; float:left; font-size:1.4em; font-weight:bold; margin:0 0 10px 0; color:#686B6C}
.blogonol-emailsubmit{background:#9B9895; cursor:pointer; color:#fff; border:none; padding:3px; text-shadow:0 -1px 1px rgba(0,0,0,0.25); -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; font:12px sans-serif}
.blogonol-emailsubmit:hover{background:#E98313}
.textarea{padding:2px; margin:6px 2px 6px 2px; background:#f9f9f9; border:1px solid #ccc; resize:none; box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); -moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); -webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px; width:140px; color:#666}
</style>
<div class="blogonol-email">
Subscribe via Email
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=NgeblogAja', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Langganan Melalui Email&quot;;}" onfocus="if (this.value == &quot;Langganan Melalui Email&quot;) {this.value = &quot;&quot;;}" value="Ketik Email Anda" type="text" />
<input type="hidden" value="NgeblogAja" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="blogonol-emailsubmit" value="Submit" type="submit" />
</form>
</div>

NB : Tulisan yang berwarna merah dapat disesuaikan dengan templatet sobat yang berwarna Biru ganti sesukamu.
Lihat hasilnya di bawah ini










Ini feed yang selanjutnya:

<div style="border: 1px solid #d8d8d8; background: #ffffff; margin: 0 0 5px; padding: 3px; width: 300px; -moz-border-radius: 6px;"> <div style="font-weight: bold; color: #ff0000; padding: 10px 10px;">GET UPDATES VIA EMAIL</div> <div style="padding-left: 10px;">Dapatkan artikel-artikel terbaru lainnya langsung melalui email Anda:</div> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=NgeblogAja', 'popupwindow', 'scrollbars=yes,width=300,height=300');return true" target="popupwindow"> <div style="padding-left: 10px; padding-bottom: 10px; padding-top: 10px;"><input style="width: 160px; height: 18px;" onfocus="if (this.value == &quot;Ketik email anda disini...&quot;) {this.value = &quot;&quot;}" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Ketik email anda disini...&quot;;}" type="text" name="email" value="Ketik email anda disini..." /> <input type="hidden" name="uri" value="NgeblogAja" /><input type="hidden" name="loc" value="en_US" /><input style="background: #9b9b9b; color: #fff; font-size: 11px; font-family: Arial,Tahoma,Verdana; margin-left: 5px; border: 1px solid #fff; padding: 3px 5px 3px 5px; font-weight: bold; -moz-border-radius: 5px;" type="submit" value="SUBCRIBE" /></div> </form> <div style="padding-left: 10px;"><a href="http://feeds.feedburner.com/NgeblogAja" rel="nofollow"><img style="border: 0;" src="http://feeds.feedburner.com/~fc/Efelinna?bg=ff9900&amp;fg=000033&amp;anim=0" alt="" width="88" height="26" /></a></div> </div>

NB : Tulisan yang berwarna merah adalah warna background dan lebar dapt disesuaikan dengan templatet sobat yang berwarna Biru gantilah dengan id feedburner sobat.
Lihat hasilnya di bawah ini

Tips dan Trik , trik belajar blog