Tips Membuat Form Newsletter Blog makin Ciamik...

Dear all,

Sepertinya lama gak posting dengan tags Tips dan Trik. Soalnya untuk tags ini memang saya usahakan sumbernya adalah dari pengalaman sendiri. Jadi ya mesti dicoba dulu, baru di-share. Memang ada beberapa trial yang kemarin sempat saya lakukan, misalnya memperpendek link profil di LinkedIn dan Google+, dan alhamdulillah sukses.

Tapi untuk sementara yang ingin saya bagikan kali ini adalah bagaimana mempercantik form untuk berlangganan artikel di blog. Yang dimaksud di sini memang kita akan menggunakan salah satu produknya Google yakni feedburner.com.

Biar gampang, coba simak gambar di bawah ini ya..


Ini adalah salah satu newsletter yang saya kelola.
Kalau Anda perhatikan, dan Anda jeli, maka form ini sebenarnya sudah dipermak. Ya, kalau kita menggunakan standard kode HTML dari feedburner maka gambar Blackberry dan email tidak akan muncul. Jadi hanya tulisan di bawah gambar Blackberry dan email saja yang kelihatan.

Gimana, cukup menarik nggak?
Oke kalau Anda tertarik, gampang kok caranya.

Pertama ambil dulu kode HTML original dari feedburner.
Biasanya akan seperti di bawah ini.

<form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/lGWkw', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow"><span style="font-weight: bold; color: rgb(255, 0, 0);"><p>Enter your email address:</p></span><p><input style="width:140px" name="email" type="text"></p><input value="blogspot/lGWkw" name="uri" type="hidden"><input name="loc" value="en_US" type="hidden"><input value="Subscribe" type="submit"><p>Delivered by <a href="http://feedburner.google.com/" target="_blank">FeedBurner</a></p></form>

Selanjutnya siapkan kode untuk melakukan modifikasi gambar Blackberry dan email.
Kodenya bisa Anda copy paste seperti di bawah ini.

<img src="http://lh5.ggpht.com/_euxcdTel1UQ/TRMjCVeA9JI/AAAAAAAAABQ/OshvUj5wo4c/s800/blackberry.png" border="0" /><img src="http://lh4.ggpht.com/_euxcdTel1UQ/TRMjY9w1i0I/AAAAAAAAABY/HTJWGWwILBM/s800/email.png" border="0" />

Pertanyaan selanjutnya di mana Anda letakkan kode tersebut?
Jawabannya, coba perhatikan kode original di atas.
Sengaja, saya tebelin dan kasih warna merah.
Yups, sebelum kode

Enter your email address:

inilah Anda harus meletakkan kode HTML tambahan tadi.

Anda takut mencoba?

Kalau Anda takut mencoba, simpan kode HTML originalnya di notepad terlebih dahulu.
Tujuannya, kalau permak Anda gagal, kode asli ini pasag lagi, dan default dari feedburner akan kembali seperti semula.

Semoga bermanfaat.