Modifikasi Widget Subscribe FEEDBURNER

Salam Blogger, terima kasih berkenan hadir di BLOGGINGPASURUAN kali ini saya akan berbagi tentang cara memodifikasi Widget Feedburner atau tepatnya SUBSCRIBE BY FEEDBURNER, Widget default atau bawa’an Feedburner memang memiliki tampilan yang kurang keren. Modifikasi tampilan widget FeedBurner hanya untuk memper-indah tampilannya saja tanpa mengurangi funsinya.

Untuk medifikasi berikut sebelumnya Anda harus memiliki Akun Gmail dan harus sudah terdaftar di Feedburner, Baca juga artikel Cara Daftar Google Feedburner

Langsung saja Anda ikuti langkahnya di bawah ini :

۞ Modifikasi Pertama

HTML

<form style="background:url(

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpY90340M-BEDRFEU0NBZXTohNageuO9yQwinpqFkcaAWbzP2SU_KkdAueNRXMM8nCBr7KCIeWpLntAE3xieHS0Hq3MOBG7NGaPm8vj3n1y2lAdgcAxVy-BGXa6lIN2UuceA3lHLtQW0w/s1600/GB1.jpg

) no-repeat right bottom; border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=nama_feedburner', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Untuk berlangganan update artikel GRATIS, Silahkan masukkan email anda untuk mendapatkan artikel terbaru lewat inbox email anda:</p><p><input type="text" style="width:168px; background:#ffd373" name="email" /></p><input type="hidden" value="artichonline" name="uri" /><input type="hidden" name="loc" value="en_US" /><input style="margin: 0px; padding: 0px; width: 72px;background:#73ccff;" type="submit" value="Subscribe" /><p>Delivered by <a href="<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri= nama_feedburner ', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="blogspot/XjXyEe" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p></form>

</p><p><a href="http://namablogAnda.blogspot.com/ ">widget oleh isi nama Anda</a></p></form>

Keterangan :

1. kode warna hijau adal URL gambar, Anda bisa menggantinya sesuai selera. Atau Anda bisa mencari image feed burner di google dengan kata kunci feed

2. Pada kode http://feedburner.google.com/fb/a/mailverify?uri= nama_feedburner, Anda bisa ganti dengan ID / nama pada feedburner Anda.

3. Bagaimana cara pemasangan pada widget ???

- Silahkan Masuk ke Akun Blogger Anda.

- Pilih TATA LETAK >> Klik ADD GADGET ( di posisi yang Anda kehendaki ) >> Setelah muncul halaman ADD GADGET >> Pilih HTML ( jangan compose ).

- Lalu letakkan kode di atas atau pastekan dikotak tersebut.

- Tekan Save ( selesai )

۞ Modifikasi Kedua

HTML

<style>

.form {

border:1px solid #ccc; /* warna garis pinggir form */

background: #ffffff /* warna background form */

padding:3px; /* spasi form */

width:160px; /* panjang form */

height:225px /* tinggi form */

}

.rss {

background: url("

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTKKNymLeSPu31iFDQTPdc8P3_eXgqKPm5P6V6F3oI28bfYzbeSz2dMlc9Yc0vbUn6sA8ib7UvoLECd1Q31KnIRYh7hdvN4BsV1Gjglse_Hl79-0x7PxrJJfmvBWs4QvMG7NMtfTvui1Y/s1600/gb2.jpg

") no-repeat bottom right;}

.button {

background: #006699; /* warna tombol subscribe */

color: #FFFFFF; /* warna font subscribe */

font-size: 11px; /* ukuran font subscribe */

font-family: Arial, Tahoma, Verdana; /* font subscribe */

margin-left: 5px; /* margin kiri tombol subscribe */

border: 1px solid #234B69; /* warna garis pinggir tombol subscribe */

padding:3px 5px 3px 5px; /* jarak antara font dengan garis pinggir tombol subscribe */

font-weight: bold;}

</style>

<div style="font-weight:bold; color:#333333; font-size:15px; padding:10px 5px 5px 10px;"><a href="http://feeds.feedburner.com/nama_feedburneranda"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtjPY2HuzNOlmGVqVSgMAqHY1UKcPH77f_ZSSYswh7w831NVzHPAxy8-gsx1x-gWpSNIiAR88cuoSM3Ntwpi590WLKE5Nu1IlIBrgn78aWPHY58yNlrAYjsglLA5U_-6kgIu8v_Je-saA/s1600/feed-c.png" /></a> <a href="http://feeds.feedburner.com/ nama_feedburneranda "> Berlangganan Artikel Gratis</a></div>

<div style="padding-left:10px"> Kirim Update Artikel terbaru Langsung ke Email Anda!</div>

/* dibawah ini adalah script default feedburner */

/* dibawah ini adalah script feed count */

</div></div>

Keterangan :

1. Warna Hijau : adalah keterangan saja ( anda bisa mengganti nilai, kode warnanya )

2. Warna biru : adalah keterangan script default ( script bawaa’an asli feedburner )

3. Warna merah : Bisa diganti nama feedburner Anda

“ http://feeds.feedburner.com/contohnamadisini “

4. Bagaimana cara pemasangan pada widget ???

- Silahkan Masuk ke Akun Blogger Anda.

- Pilih TATA LETAK >> Klik ADD GADGET ( di posisi yang Anda kehendaki ) >> Setelah muncul halaman ADD GADGET >> Pilih HTML ( jangan compose ).

- Lalu letakkan kode di atas atau pastekan dikotak tersebut.

- Tekan Save ( selesai )

Demikian artikel cara modifikasi widget subscribe feedburner, Jika ada hal yang kurang dimengerti anda bisa bertanya lewat kotak komentar atau lewat kontak saya. Semoga bermanfaat…

Tutorial		HTML
Widget		CSS
JQuery		IT