Cara Menghias Form RSS Feedburner Anda.

<div style='background-color: none transparent;'></div>
Halo sobat,

Sorry banget nih kemaren gak posting, karena saya harus mendatangi wisuda pacar saya. Pada posting kali ini saya akan sharing tentang "Cara Menghias Form RSS Feedburner Anda". Banyak nih temen-temen blogger saya yang ingin tau bagaimana cara menghias formulir langganan rss supaya menarik para pembaca untuk mendaftar di feed mereka.

Saya akan membuat formulir feedburner seperti dibawah ini tapi dengan versi yang berbeda. Lihat contohnya dibawah ini:

Menghias kotak langganan feedburner

Untuk membuat kotak langganan seperti diatas, langkah pertama yang harus anda lakukan adalah

1. Login ke Blogger.com
2. Pilih Rancangan>>Elemen Halaman.
3. Pilih Tambah Gadget pada sidebar.
4. Copy paste code dibawah ini:

<div id="langganan">
<form  action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=intutsblogspot', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Dapatkan Update Artikel Terbaru Saya Gratis Ke Email Anda!</p>
<p>Masukan Email Anda:</p>
<p><input id="alamat" type="text"  name="email"/></p><input type="hidden" value="intutsblogspot" name="uri"/><input type="hidden" name="loc" value="en_US"/><input id="tombol" type="submit" value=" " /></form></div>

Ganti kata yang dihuruf tebal merah dengan id feedburner anda. Setelah anda insert dan anda save maka hasilnya akan seperti ini:






Dapatkan Update Artikel Terbaru Saya Gratis Ke Email Anda!
Masukan Email Anda:



Saya sudah membuat 3 Id tags CSS pada html disana yaitu: langganan, alamat dan tombol. Sekarang saya ingin anda menghiasnya dengan CSS dengan memasukan kode dibawah ini tepat diatas kode yang saya berikan tadi:
<style type="text/css">
#langganan{}
#alamat{}
#tombol{}
</style>
Fungsi dari ketiga kode diatas adalah untuk memanggil id yang telah saya tuliskan pada kode HTML. Sekarang saya akan menjelaskannya satu persatu. Jika anda lihat dengan detail, kode
<div id="langganan"></div>
berada diluar form yang menandakan bahwa besar area untuk form anda bisa ditentukan dengan memberikan kode tambahan pada id="langganan". 


Saya akan menambahkan kode width untuk menyetting lebar. Dan kode height untuk menyetting tinggi. Lihat kodenya seperti dibawah ini:


#langganan{width:350px;height:150px;}
Sekarang tampilannya akan menjadi seperti dibawah ini:






Dapatkan Update Artikel Terbaru Saya Gratis Ke Email Anda!
Masukan Email Anda:



Sekarang saya akan menambahkan border dan background pada tag langganan.
#langganan{width:350px;height:150px;border:3px dashed #fff;background:#eee;}
Maka hasil tampilannya akan seperti dibawah ini:







Dapatkan Update Artikel Terbaru Saya Gratis Ke Email Anda!
Masukan Email Anda:



Sekarang saya mau tambahkan padding dan font-size supaya rapih:
#langganan{width:350px;height:150px;border:3px dashed #fff;background:#eee;padding:5px;font-size:12px;}
Hasilnya sekarang akan seperti ini:







Dapatkan Update Artikel Terbaru Saya Gratis Ke Email Anda!

Masukan Email Anda:


Nah udah jadi nih sebagian, Langkah selanjutnya adalah mengedit kotak email dan juga tombolnya. Tambahkan float dan juga position.
#alamat{float:left;position:relative;}
#tombol{float:left;position:relative;}
Perubahannya akan seperti ini:





Dapatkan Update Artikel Terbaru Saya Gratis Ke Email Anda!

Masukan Email Anda:


Sekarang saya ingin menambahkan background pada tombol seperti ini:
Maka saya akan menyetting tombol seperti dibawah ini:
#tombol{float:left;position:relative;background:url('http://4.bp.blogspot.com/-rihFWTT_sWw/TfoYnlrRulI/AAAAAAAAAE0/HZpxmH6jwZA/s1600/Mail-48%25282%2529.png')no-repeat;height:50px;width:52px;border:none;margin-left:10px;bottom:20px;}
Tampilannya akan seperti dibawah ini:





Dapatkan Update Artikel Terbaru Saya Gratis Ke Email Anda!

Masukan Email Anda:



Tombol sekarang sudah kelar, Tinggal rubah textnya seperti dibawah ini untuk menyesuaikan dengan tombol:
#alamat{float:left;position:relative;width:250px;margin-top:10px;height:35px;border-radius:3px;border:2px dashed #fff;}
Hasil akhirnya akan seperti dibawah ini:





Dapatkan Update Artikel Terbaru Saya Gratis Ke Email Anda!

Masukan Email Anda:


Kode hasil akhirnya adalah seperti dibawah ini:
<style type="text/css">
#langganan{width:350px;height:150px;border:3px dashed #fff;background:#eee;text-align:left;padding:10px;font-size:12px;}
#alamat{float:left;position:relative;width:250px;margin-top:10px;height:35px;border-radius:3px;border:2px dashed #fff;}
#tombol{float:left;position:relative;background:url('http://4.bp.blogspot.com/-rihFWTT_sWw/TfoYnlrRulI/AAAAAAAAAE0/HZpxmH6jwZA/s1600/Mail-48%25282%2529.png')no-repeat;height:50px;width:52px;border:none;margin-left:10px;bottom:20px;}
</style>

<div id="langganan">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=intutsblogspot', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
Dapatkan Update Artikel Terbaru Saya Gratis Ke Email Anda!

Masukan Email Anda:
<input id="alamat" name="email" type="text" />
<input name="uri" type="hidden" value="intutsblogspot" /><input name="loc" type="hidden" value="en_US" /><input id="tombol" type="submit" value=" " /></form>
</div>
Sekarang udah kelar deh. Untuk yang lainnya silahkan berkreasi sendiri ya. Karena kalau saya posting semua akan sangat panjang. Jangan lupa tinggalkan komentarnya.

catatan: Jika perletakan tombol kurang sempurnya, anda bisa menyempurnakannya dengan menggunakan top(posisi atas),bottom(posisi bawah),left(kiri), dan right(kanan).

4 komentar:

Tutorial Blog and Game » NSX™ Blog (Habil DS) mengatakan...

Cihuy!! mantappss..!!

10 Link Menjahili teman anda mengatakan...

Kodenya banyak gan.. pasti bikin berat nih

intuts mengatakan...

Tenang aja bro, ini bukan kode javascript, jadi gak bakalan berat.

Muhamad Eko Saputra mengatakan...

numpang baca :D

Posting Komentar

Kirimkan komentar yang berbobot untuk membangun kredibilitas anda, Komentar dengan link sampah/spam akan saya hapus.