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.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:
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>
<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 saya akan menambahkan border dan background pada tag langganan.
#langganan{width:350px;height:150px;border:3px dashed #fff;background:#eee;} 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;} 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;}Sekarang saya ingin menambahkan background pada tombol seperti 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;}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;}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>
catatan: Jika perletakan tombol kurang sempurnya, anda bisa menyempurnakannya dengan menggunakan top(posisi atas),bottom(posisi bawah),left(kiri), dan right(kanan).
No comments:
Post a Comment