Membuat Widget Subscribe

Subscribe adalah fasilitas yang dipergunakan untuk menyebarkan artikel dari blog kita kepada mereka yang berlangganan artikel via email secara otomatis. Memang banyak website yang menyediakan fasilitas ini, tetapi FeedBurner tetap menjadi favorit selain konfigurasi yang mudah juga karena telah di ambil alih oleh Google sehingga layanan ini ada jaminan terus diberikan secara gratis dalam jangka waktu yang panjang. Salah satu dari sekian fasilitas yang diberikan FeedBurner yang terkenal adalah fasilitas subscribe, tetapi beberapa blogger kurang begitu suka dengan antar muka subscribe standar dari FeedBurner.

Pada artikel kali ini Blogger Tune-Up akan memberikan tips trik membuat antar muka FeedBurner yang lebih menarik. Hasil akhir antar muka subscribe bisa kita lihat pada screenshot dibawah ini.

Langkah pembuatan widget subscribe

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke bagian "Tata Letak - Edit HTML"
Langkah 3
Cari kode dibawah ini:

]]></b:skin>

Langkah 4
Masukan kode CSS dibawah ini diatas kode pada langkah 3:

div#subscribe {
float : left;
width : 350px;
height : 94px;
background : url('http://lh6.ggpht.com/_xcD4JK_dIjU/SsRNy8VKhOI/AAAAAAAADd0/ZIspMIgXEvU/d/subscribebg.png') no-repeat;
background-color : #ffffff;
overflow:hidden;
}
#subscribe a {
font-weight : normal;
color : #64666b;
border:none;
}
#subscribe a :hover {
font-weight : normal;
color : #64666b;
border:none;
}
div#subscribe img {
float : right;
margin-top : 6px;
}
#subscribeform {
float : left;
margin : 0;
padding : 0;
padding-left : 72px;
}
#subscribeform .subscribeinput {
float : left;
border : 0;
width : 188px;
height : 19px;
background : url('http://lh4.ggpht.com/_xcD4JK_dIjU/SsRNy8mkHII/AAAAAAAADdw/X_THccX8W2Q/d/input.jpg') no-repeat;
font : 11px Verdana;
color : #c6c6c6;
margin-top:10px;
padding-top : 5px;
padding-left : 5px;
margin-left : 9px;
}
#subscribeform .subscribesubmit {
float : left;
border : 0;
margin-left : 5px;
margin-top:10px;
}

Langkah 5
Simpan Template
Langkah 6
Masuk ke bagian "Tata Letak - Elemen Halaman"
Langkah 6
Tambah sebuah gadget baru dengan type "HTML/JavaScript"
Langkah 7
Masukan kode dibawah ini didalam konten dengan judul konten bebas (misal:Subscribe):

<div id="subscribe">
<a href="http://feeds.feedburner.com/BloggerTune-up"><img src="http://feeds.feedburner.com/~fc/BloggerTune-up?bg=99CCFF&amp;fg=444444&amp;anim=0" height="26" width="88" style="border:0" alt="" /></a><br/>
<form action="http://www.feedburner.com/fb/a/emailverify" style="border:1px solid #ccc;padding:3px;text-align:center;" target="popupwindow" method="post" onsubmit="window.open('http://www.feedburner.com/fb/a/emailverifySubmit?feedId=2264909', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<div>
<input value="" class="subscribeinput" name="email" type="text"/>
<input value="http://feeds.feedburner.com/~e?ffid=2264909" name="url" type="hidden"/>
<input value="Blogger Tune-Up" name="title" type="hidden"/>
<input value="en_US" name="loc" type="hidden"/>
<input src="http://lh5.ggpht.com/_xcD4JK_dIjU/SsRNzECIbOI/AAAAAAAADd4/IbXDZGxyRRo/d/subscribesubmit.png" class="subscribesubmit" type="image"/>
</div>
</form>
</div>

Langkah 8
Klik tombol "Simpan"
Langkah 9
Preview blog anda

Langkah modifikasi kode

Perhatikan langkah 7, perhatikan kode dibawah ini:

<a href="http://feeds.feedburner.com/BloggerTune-up"><img src="http://feeds.feedburner.com/~fc/BloggerTune-up?bg=99CCFF&amp;fg=444444&amp;anim=0" height="26" width="88" style="border:0" alt="" /></a><br/>
<form action="http://www.feedburner.com/fb/a/emailverify" style="border:1px solid #ccc;padding:3px;text-align:center;" target="popupwindow" method="post" onsubmit="window.open('http://www.feedburner.com/fb/a/emailverifySubmit?feedId=2264909', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input value="" class="subscribeinput" name="email" type="text"/>
<input value="http://feeds.feedburner.com/~e?ffid=2264909" name="url" type="hidden"/>
<input value="Blogger Tune-Up" name="title" type="hidden"/>
<input value="en_US" name="loc" type="hidden"/>

Ubahlah sesuai dengan link yang telah diberikan FeedBurner.

Membuat Widget Subscribe

Selamat mencoba dan semoga berhasil. Happy blogging... :)

Tips Trik Widget