Cara Mempercantik Tampilan Feedburner

Pada postingan kali ini saya akan membuat tutorial tentang mempercantik tampilan form berlangganan Email. Sebelumnya feedbuner sendiri menyediakan form berlangganan dengan tampilan yang simple, nah kali ini saya akan memberikan script dengan tampilan form berlangganan yang lebih keren dan menarik. Untuk melihat Demo nya silahkan lihat Disini. Bermacam cara para blogger untuk mempercantik tampilan blog. salah satunya dengan trik ini. pastinya bertujuan untuk menarik perhatian pengunjung. tapi sayangnya kebanyakan berpendapat dengan menambah gambar di background blog akan membuat berat loading blog. padahal tanpa mereka sadari menambah gambar di suatu blog itu sangatlah menarik. kenapa saya bilang begitu.contohnya di dunia nyata. seandainya saja di dunia nyata itu nggak ada pantai yang dibarengi dengan suara ombak, dan indah nya malam diterangi sang rambulan dan banyak lagi contoh yang lain. di sini kita bisa mengerti begitu penting nya suatu keindahan bagi kehidupan manusia. ops..... terlalu banyak ngomong ni.... hehehe.

Sekarang bagaimana cara memasangnya ?

• Pertama, Log-in ke blogger Anda
• Kedua, pilih Rancangan,
• Ketiga, pilih Tata Letak,
• Keempat, pilih Tambah Gadget,
• Kelima, pilih Javascript/Html,
• Selanjutnya, sobat copy script di bawah ini ke dalamnya,

<style>
.form {
border:1px solid #ccc; 
background: #ffffff 
padding:3px;
width:300px;
height:150px 
}

.rss {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAZFWqPNdMGppvJJYFb9dA20Au8OC3-9pk0FJoAENlZC7VPeqc5SaYEGCtyLC5zWoi-hnxteYMdGEOxB3TIKciK5sEvfc_mzjBrcOaTLW6vr0XT7fdYdjFtKhAXFvpBDb5XbRi0ThhqnwN/s400/feedreader_2.jpg")repeat-y right;
}

.button {
background: #006699;
color: #FFFFFF;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
margin-left: 5px;
border: 1px solid #234B69;
padding:3px 5px 3px 5px;
font-weight: bold;
}
</style>

<div class="form">
<div class="rss">
<div style="font-weight:bold; color:#333333; font-size:12px; padding:0x 5px 5px 10px;"><div style="padding-left:10px"><p><a href="http://feeds.feedburner.com/alamatadrres" rel="alternate" type="application/rss+xml"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ3_Kc8K2Rix8uidGu4bwknLWCeHr_J_BA4a4vPfSn5xLpUxRqPoFQ9gM9_eYcPNru3ku0hWn4Hpfdl_SMrbZZ_dWQULGYo_0bY9VZU0O4T8mDvCDy7M_E_3yFsHIcXPMzOwwk51z2R_0h/s200/feed-c.png" alt="" style="vertical-align:middle;border:0"/></a><a href="http://feeds.feedburner.com/alamatadrres" rel="alternate" type="application/rss+xml"> Gratis berlangganan artikel via RSS</a></p></div></div>

<div style="padding-left:10px"> Anda bisa berlangganan FEED via email</div>

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=alamatadrres', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><div style="padding-left:10px; padding-bottom:10px; padding-top:10px"><input type="text" style="width:170px; height:16px" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Tulis email anda disini&quot;;}" onfocus="if (this.value == &quot;Tulis email anda disini&quot;) {this.value = &quot;&quot;}" type="text" value="Tulis email anda disini" /> <input type="hidden" value="alamatadrres" name="uri" /><input type="hidden" name="loc" value="en_US" /><input class="button" type="submit" value="Subscribe" /></div></form>

<div style="padding-left:10px"><a target="_blank" href="http://feeds.feedburner.com/alamatadrres"><img
border="0" alt="ads" src="http://feeds.feedburner.com/~fc/alamatadrres?bg=8a8a8a&fg=444444&anim=1"/></a></div>
</div></div>

• Note : Ganti alamatadrres dengan nama Feedburner Anda.
• Terakhir, Simpan.

Ganti sekarang juga dengan tampilan feedburner yang lebih keran !. Happy Blogging