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 1Login 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 5Simpan 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">Langkah 8
<a href="http://feeds.feedburner.com/BloggerTune-up"><img src="http://feeds.feedburner.com/~fc/BloggerTune-up?bg=99CCFF&fg=444444&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>
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&fg=444444&anim=0" height="26" width="88" style="border:0" alt="" /></a><br/>Ubahlah sesuai dengan link yang telah diberikan FeedBurner.
<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"/>
Selamat mencoba dan semoga berhasil. Happy blogging... :)
