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..


17 komentar:

  1. pertamaxxx..
    keren mas!!

    gw mang lagi nyari yg beginian..

    BalasHapus
  2. Mas Miswar kasih dunk contoh lebih detail, maksudnya tata letaknya spt apa, trus apakah ada tanda kutip ato lain diantara kode2 yang ditambah mas.. ty ya mas... (maaf)

    BalasHapus
  3. @resep masakan : ga kok...ikutin aja sesuai kode diatas. Kecuali kamu ngerti html...kamu bisa rubah sendiri kodenya

    BalasHapus
  4. ok Mas, akan saya coba lagi ya mas, ty mas tipnya.. Happy new year 2009

    BalasHapus
  5. siiiiiiipp deh ta' cb.. thanks ya mas. Selamat Tahun Baru.

    BalasHapus
  6. oya mas, saya pake javascript untuk membuat kolom berlangganan. apa ada perbedaan ndak mas ya, soalnya saya coba2 ndak bisa mas, tata letak kode saya punya dengan dipostingan mas agak berbeda mas, mohon solusinya ya mas..

    BalasHapus
  7. hallo dicoba kang....thank tipsnya...

    BalasHapus
  8. sep sep.makasih infonya om

    BalasHapus
  9. Artikelnya bagus kata-katanya juga menarik mudah di cerna Trims ya infonya saya tunggu artikel selanjutnya, O..iya Boleh saya minta komentar dari teman untuk artikel di blog saya? Kalau Boleh Kunjungi blog saya, hari ini saya sudah posting artikel tolong komentarnya ya dan kalau bisa komentarnya harus berkaitan dengan artikel saya ini alamatnya http://regedit.blog.telkomspeedy.com/2009/01/19/sejarah-telekomunikasi-indonesia-telkom-bag-2/ terima kasih banyak.

    BalasHapus
  10. ga bisa masukin gambarnya >_< gagal terus.. padahl dah tak ikutin satu2 tutorialnya..

    BalasHapus
  11. makasih banyak mas...

    kunjungi blog saya ya..

    http://blogyusron.blogspot.com/

    BalasHapus
  12. mas,,,

    q berkali-kali nyoba kok gambarnya gak pernah berhasil keluar ya...

    BalasHapus
    Balasan
    1. Kalau langsung copy codenya, tentu saja gambarnya ga' keluar bro.... edit dulu kode yang berwarna merah. betul ga' mas bro ADMIN :D ????

      Hapus
  13. Terima kasih....

    Langsung Saya coba..

    BalasHapus
  14. Sepakat YUSRON BLOG... bukan gk berhasil SOb..emang tutorial di atas menyesatkan...alias ngarang

    BalasHapus

blogger