Beautiful Subscribes Box

Korek sana-sini, gabungkan menjadi satu, terciptalah subscribes box alias kotak berlangganan. Default blogger sudah menyediakan fitur berikut, Design ► Page Elements ► Add a Gadget ► Choose Follow by Email (New!)
Begitulah salah satu cara mendapatkan pelanggan agar berlangganan artikel kita via email ;)) Bila sobat sudah familiar dengan kode CSS bisa langsung dikreasikan juga Follow by Email bawaan blogger tersebut. Tapi tidak semua sobat mahir dengan kode-kode kan :P Sebenarnya hanya dengan menggunakan syntax link saja sudah bisa kok ;)) :">
No Gaya No Style, No Style No Good :P

Demo Box Subscribes

Kode CSS

#subscribe {
width: 393px;
height: 150px;
position: relative;
padding: 15px;
background-color: #717FBC;
border: 3px solid #5599FF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#subscribe p {
line-height: 21px;
padding-right: 50px;
color: #eee;
font-size: 18px;
}
#subscribe a.page-sub {
display: block;
width: 85px;
height: 83px;
position: absolute;
background: url(http://GAMBAR-KERTAS.PNG);
right: -25px;
top: 0;
z-index: 1;
text-indent: -9999em;
}
#subscribe:hover a.page-sub {
background-position: 0 -84px;
}
#subs {
background:url(HTTP://GAMBAR-SUBSCRIBE.PNG);
height: 24px;
width: 216px;
margin-top: 5px;
}
#btn {
margin: -40px 255px;
}
#btn input {
background: url(HTTP://GAMBAR-TOMBOL.PNG);
height: 43px;
width: 142px;
border: 0px;
cursor: pointer;
}
.box {
height: 37px;
width: 250px;
font-size: 18px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

Kode HTML

<div id="subscribe">
<div id="subs"></div>
<a class="page-sub" title="Subscribe to Myblog" href="#">Subscribe to Myblog</a>
<p>Join yuk dengan kita, berlangganan artikelku supaya update terus!!!</p>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="_blank">
<input name="email" type="text" class="box"/>
<div id="btn">
<input value="" type="submit" />
</div>
<input type="hidden" value="beben-koben" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
</form>
</div>

Yang perlu sobat lakukan dalam mengubah coded² diatas yaitu:

1. Download image dan pasangkan ke dalam code CSS (tulisan warna merah tua) DL Gambar.
2.Gantikan beben-koben dengan ID feedburner kalian.
3. Warna, padding, margin, width, height or tetek bengek lainnya silahkan atur² sampai bagus :)
4. Save.
Semoga bermanfaat \m/