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:
Untuk membuat kotak langganan seperti diatas, langkah pertama yang harus anda lakukan adalah
1. Login ke
Blogger.com2. 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:
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:
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:
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:
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:
Sekarang saya ingin menambahkan background pada tombol seperti ini:
Maka saya akan menyetting tombol seperti dibawah ini:
#tombol{float:left;position:relative;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzYUgCUhWDtQDcW2W3ejW8rN0RNb1b6QbU8LNitqqurXH-i_x-BWwvpPrEZO74HZ6vkE1Wl7BifbZJygnDoQN5xbZC7qHb1A0K7O0tXgLCRIRb-JD2OvAB6I1OroVoga0vpG1VZfzuqGU/s1600/Mail-48%25282%2529.png')no-repeat;height:50px;width:52px;border:none;margin-left:10px;bottom:20px;}
Tampilannya akan seperti dibawah ini:
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:
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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzYUgCUhWDtQDcW2W3ejW8rN0RNb1b6QbU8LNitqqurXH-i_x-BWwvpPrEZO74HZ6vkE1Wl7BifbZJygnDoQN5xbZC7qHb1A0K7O0tXgLCRIRb-JD2OvAB6I1OroVoga0vpG1VZfzuqGU/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).
