Cara Buat Email Subscription Box Untuk Blogger

Kalau warna blog kita dominan dengan warna yang gelap, tentu saja akan terlihat tidak bagus kalau kita memasang kotak berlangganan FeedBurner yang berwarna warni, alias terang. Oleh karena itu, saya pun sudah menyediakan sobat blogger sebuah Feedburner Subscription Box yang memiliki tampilan gelap tetapi tetap memiliki tampilan yang bagus.

Kotak Berlangganan FeedBurner ini terdiri atas jejaring sosial Facebook dan Twitter sehingga akan mempermudah pengunjung blog sobat untuk menemukan profil kita di kedua Social Network tersebut. Tidak hanya itu, kotak berlangganan FeedBurner ini sudah ditambahkan dengan fitur Twitter Counter dan FeedCounter sehingga memungkinkan kita untuk melihat secara langsung jumlah Reader kita di Google FeedBurner dan Twitter.

Yang pasti kotak berlangganan via Email ini jauh beda dengan Kotak Berlangganan Email Keren yang saya kasih sebelumnya.

---

Cara Memasang Kotak Berlangganan FeedBurner

---

• Sign In di blogger.com
• Pada menu drop Down, Pilih layout >> Add a Gadget >> HTML/JavaScript
• Copy Paste kode berikut pada kolom yang tersedia:

<div style="background-color : #ffffff;padding-top:10px; border: 1px solid #ccc;">
<a href="http://feeds.feedburner.com/tutorialblogspot/PbmK" target="_blank" title="Subscribe To The Latest Posts"><img style="float:left; width:30px; height:30px; margin-right:5px" src="http://img171.imageshack.us/img171/162/rssicons.jpg" /></a><a href="http://feeds.feedburner.com/tutorialblogspot/PbmK" target="_blank" title="Subscribe To The Latest Posts"><b><u>Subscribe to our RSS Feed</u></b></a>
and We will let you know when we have new posts!
<br />
<center>
<b>Or get the latest posts via Email</b>
<form style="padding-top:6px;" id="subscribe" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=tutorialblogspot/pbmk', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="text" value="Enter your email address..." id="subbox" onfocus="if (this.value == &#39;Enter your email address...&#39;) {this.value = &#39;&#39;;}" onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email address...&#39;;}" name="email" style="width:170px;" />
<input type="hidden" value="tutorialblogspot/PbmK" name="uri" />
<input type="hidden" name="loc" value="en_US" />
<input style="
        padding-left:3px;
        padding-right:3px;
        border: 1px solid #333333;
        cursor: pointer;
        background-color: #000000;
 nbsp;      color: #FFFFFF;"
type="submit" value="Submit" />
</form>
</center>
<center>
<table border="0">
<tr>
<td>
<a href="http://www.facebook.com/TutorialforBlogspot" target="_blank" title="Connect On Facebook">
<img style="width:54px; height:54px;" src="http://img29.imageshack.us/img29/3497/facebookiconf.jpg" /></a>
</td>
<td>
<a href="http://twitter.com/2torialBlogspot" target="_blank" title="Let's be friend. lols.">
<img style="width:54px; height:54px;" src="http://img291.imageshack.us/img291/3765/twittericon.jpg " /></a>
</td>
<td>
<td>
<a href="http://feeds.feedburner.com/tutorialblogspot/PbmK"><img src="http://feeds.feedburner.com/~fc/tutorialblogspot/PbmK?bg=CCCCCC&amp;fg=444444&amp;anim=0" height="26" width="88" style="border:0" alt="" /></a>
<script type="text/javascript" language="JavaScript" src="http://twittercounter.com/embed/2torialBlogspot/ffffff/111111"></script>
</td>
</td>
</tr>
</table>
</center>
</div>

• Simpan Widget Sobat

Tambahan :

1. Ganti 2torialBlogspot dengan nama akun Twitter Sobat dan tutorialblogspot/PbmK dengan Nama akun FeedBurner Sobat
2. Hapus http://www.facebook.com/TutorialforBlogspot dan ganti dengan URL Facebook sobat

#ffffff adalah warna background dan #ccc adalah warna border, silahkan sobat rubah dengan warna yang sobat blogger inginkan. Kode warna bisa sobat temukan disini : Hex Color Code Generator