Cara Memodifikasi Email Subscribe Feedburner

Email Subcriber dari Feedburner merupakan fitur yang sangat berguna untuk menghubungkan Anda dengan pembaca blog Anda. Tapi sayangnya design dari email subcribe feedburner ini terlalu simple dan sederhana. Sehingga banyak orang yang ingin merubah design-nya agar terlihat lebih menarik. Pada posting kali ini saya akan menyajikan 4 cara untuk mengubah design dari email subcribe default feedburner ke design sesuai yang Anda inginkan agar terlihat lebih menarik dengan merubah beberapa script di dalamnya.

Secara default kode email subscribe feedburner seperti ini:

<form style=”border:1px solid #ccc;padding:3px;text-align:center;” action=”http://feedburner.google.com/fb/a/mailverify” method=”post” target=”popupwindow” onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=ID Feedburner Anda’, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520′);return true”><p>Enter your email address:</p><p><input type=”text” style=”width:140px” name=”email”/></p><input type=”hidden” value=”ID Feedburner Anda” name=”uri”/><input type=”hidden” name=”loc” value=”en_US”/><input type=”submit” value=”Subscribe” /><p>Delivered by <a href=”http://feedburner.google.com” target=”_blank”>FeedBurner</a></p></form>

Jika Anda belum dan ingin memasang email subscribe feedburner silahkan klik --> Cara Memasang Email Subscribe di Blogger

Cara Memodifikasi:
1. Mengganti Warna Background

Untuk mengganti warna background dapat Anda tambahkan url gambar yang Anda upload dengan kode dibawah ini setelah  text-align:center; :

background: url(http://www.example.com/image.jpg)

Jadi akan terlihat seperti ini: <form style="border:1px solid #ccc;padding:3px;text-align:center;background: url(http://www.contoh.com/gambar.jpg);"


2. Mengubah Ukuran kotak email

Merubah ukuran lebar dapat Anda rubah di width:140px, sedangkan untuk merubah tinggi cukup Anda tambahkan height:20px setelah kode width:140px. Ukuran angka pixelnya dapat Anda sesuaikan dengan kebutuhan Anda.

Jadi kode akan terlihat seperti ini: <input type="text" style="width:140px;height:20px;" name="email"/>
  

3. Mengganti Background dengan Gambar

Sama seperti menambahkan warna background, Anda masukkan alamat gambar yang Anda upload dengan kode dibawah ini setelah text-align:center; :

background: url(http://www.contoh.com/gambar.jpg)

Jadi akan terlihat seperti ini: <form style="border:1px solid #ccc;padding:3px;text-align:center;background: url(http://www.contoh.com/gambar.jpg);"
 

4. Menambahkan Text di dalam kotak

Anda dapat menambahkan tulisan ke dalam kotak email subscribe dengan mengganti kode berikut:

<p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p>

dengan kode:

<p><input type="text" style="width:140px" name="email" onblur="if (this.value == '') {this.value = 'Enter your email address';}" onfocus="if (this.value == 'Enter your email address') {this.value = '';}" value="Enter your email address"/></p>

 
*Setelah mencoba ke-4 cara, berikut hasil email subscribe Dewa Inside Blog:

Selamat Mencoba. :)