Cara Memodifikasi Form (Kotak) Email Subscriber

Anda berbagai modifikasi form email subscriber yang anda bisa lihat contohnya pada berbagai blog atau situs. Form email subcriber ini fungsinya untuk memberikan ruang kepada pengunjung untuk mengsubscribe artikel. Biasanya bentuk atau ukuran form email subscriber disesuaikan dengan ukuran tempat penempatannya di blog anda.


Jika anda ingin membuat form email subscriber coba daftarkan diri anda dulu di www.feedburner.com terlebih dahulu. Karena untuk memodifikasi tampilan form email subscriber seperti pada Blog Trik dan Tips anda harus memiliki url email subscribe (id feedburner) dari feedburner. Jika anda sudah membuat url feedburner maka kita langsung saja memodifikasi tampilan subscribe formnya.

1. Login ke blogger
2. Masuk ke Rancangan --> Edit HML
3. Tambahkan Gadjet
4. Pilih HTML/Javascript
5. Masukan script di bawah ini pada gadjet anda

<!-- Subscribe Form by www.blogtrikdantips.blogspot.com -->
<style>
.form{border:0px solid #d8d8d8;background:#fff padding:3px;width:300px;height:180px;-moz-border-radius:6px;-webkit-border-radius: 6px;}.rss{background:url("http://2.bp.blogspot.com/-tpQOSrmZgSE/T3JkLuykXGI/AAAAAAAACtA/d5hp4h_T_M4/s320/Rss-Feed-Buttons-47-20-.png") no-repeat center right;padding:1px;}.button{background:#9b9b9b;color:#FFF;font-size:13,5px;font-family:Arial,Tahoma,Verdana;margin-left:5px;border:1px solid #fff;padding:3px 5px 3px 5px;font-weight:bold;-moz-border-radius:5px;-webkit-border-radius: 5px;}
</style>
<div class="form">
<div class="rss">
<div style="font-weight:bold; color:#333333; font-size:15px; padding:10px 5px 5px 10px;"><a href="http://feedburner.google.com/fb/a/mailverify?uri=lagudjawaasli"><img src="http://feedburner.google.com/fb/lib/images/icons/feed-icon-16x16-gray.gif" /></a> <a href="http://feedburner.google.com/fb/a/mailverify?uri=lagudjawaasli">Dapatkan Update Artikel Terbaru Blog Trik dan Tips</a></div>

<div style="padding-left:10px">Jika anda suka dengan artikel yang ada di blog ini, silahkan untuk berlangganan artikel blog ini via email <b>gratis</b>. </div>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=lagudjawaasli', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><div style="padding-left:10px; padding-bottom:10px; padding-top:10px"><input type="text" style="width:160px; height:18px" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Ketikkan email anda disini&quot;;}" onfocus="if (this.value == &quot;Ketikkan email anda disini&quot;) {this.value = &quot;&quot;}" type="text" value="Ketikkan email anda disini" /> <input type="hidden" value="lagudjawaasli" name="uri" /><input type="hidden" name="loc" value="en_US" /><input class="button" type="submit" value="Daftar" /></div></form>
</div></div>
<!-- Subscribe Form by www.blogtrikdantips.blogspot.com -->

Keterangan: kode warna biru adalah ukuran form atau kotak email subscriber, sedangkan kode berwarna hijau adalah url gambar.

6. Ganti kode berwarna merah dengan id feedburner anda.
7. Simpan gadjet anda lalu lihat hasilnya.

Twitter Delicious Digg Facebook Stumbleupon RSS