Tips Modifikasi Form Berlangganan Email

Banyak diantara temen - temen blogger yang nanya tentang bagaimana cara modifikasi form berlangganan email feeburner. Memang, tampilan form berlangganan email yang cantik merupakan salah satu faktor untuk mengajak para pengunjung blog untuk ikut berlangganan artikel terbaru via email.

Ok..ini dia tips dan cara memodifikasi form berlangganan email feedburner

Tampilan form berlangganan email feedburner memang terlihat kurang menarik. Untuk itu ada beberapa hal yang perlu kita modifikasi supaya form tersebut bisa keliatan menarik di mata pengunjung.

Membuat tombol subscribe sejajar dengan kolom text input

Tampilan default form berlangganan email feedburner biasa-nya seperti ini

Untuk mensejajarkan-nya, pada kode asli form berlangganan email cari kode seperti berikut :

<p><input type="text" style="width:140px" name="email"/></p> <input type="hidden" value="kursus-blog" name="uri"/> <input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" />

Kode yang saya tulis diatas tentunya tidak harus sama. Cuma fokuskan aja pada kode yang berwarna merah. Setelah itu, ubah kodenya menjadi seperti ini:

<p><input type="text" style="width:140px" name="email"/> <input type="hidden" value="kursus-blog" name="uri"/> <input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /></p>

Sehingga hasilnya menjadi seperti ini:

Mengganti tulisan subscribe

Cari kode berikut kemudian ganti tulisan yang berwarna merah sesuai keinginan anda

<input type="submit" value="Subscribe" />

Menambahkan background icon rss feed

Untuk menambahkan background di form berlangganan email anda, silahkan liat kode berikut dan perhatikan text yang berwarna merah

<form style="background:kode warna url(url gambar)no-repeat posisihorizontal posisivertical; 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=kursus-blog', '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="kursus-blog" 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>

Kode yang berwarna hitam adalah kode default form berlangganan. Sedangkan kode yang berwarna merah adalah kode untuk menampilkan background gambar di form berlangganan. Untuk penjelasannya sebagai berikut :

Pada kode warna ganti dengan kode heksa warna background. Kalo bingung, ganti saja dengan transparent. Pada url gambar, masukan alamat url gambar yang akan dijadikan background. Pada posisi horizontal dan posisi vertical, maksudnya untuk menentukan posisi background di dalam form tersebut. Misal background akan di letakkan di pojok kanan bawah maka ganti posisi horizontal dengan right dan posisi vertical dengan bottom. Untuk posisi lainnya, ganti saja posisi horizontal dengan kata left center atau right dan posisi vertical dengan top center atau bottom.

Ok..selamat mempercantik form berlangganan email anda..Jika masih belum ngerti, silahkan bertanya di kolom komentar ya..