Cara Buat Email Subscription Box

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.

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 klom yang tersedia:

<div style="background-color : #ffffff;padding-top:10px; border: 1px solid #ccc;">
<a href="http://feeds.feedburner.com/indosoftgame" 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/indosoftgame" 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=indosoftgame', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="text" value="Enter your email address..." id="subbox" onfocus="if (this.value == 'Enter your email address...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Enter your email address...';}" name="email" style="width:170px;" />
<input type="hidden" value="indosoftgame" 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;
        color: #FFFFFF;"
type="submit" value="Submit" />
</form>
</center>
<center>
<table border="0">
<tr>
<td>
<a href="http://www.facebook.com/indosoftgame" 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/bangprohi" 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/indosoftgame"><img src="http://feeds.feedburner.com/~fc/tutorialblogspot/PbmK?bg=CCCCCC&fg=444444&anim=0" height="26" width="88" style="border:0" alt="" /></a>
<script type="text/javascript" language="JavaScript" src="http://twittercounter.com/embed/bangprohi/ffffff/111111"></script>
</td>
</td>
</tr>
</table>
</center>
</div>

Simpan Widget Sobat

Tambahan :

Ganti bangprohi dengan nama akun Twitter Sobat dan indosoftgame dengan Nama akun FeedBurner Sobat
Hapus http://www.facebook.com/indosoftgame 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