Senin, 05 Desember 2011

Modifikasi BuzzBoost pada Feedburner

Modifikasi BuzzBoost  pada Feedburner
Pada Kesempatan yang setengah siang ini, Kang Onk Design akan memerikan tutorial blogger untuk yang sekian kali. Walau pernah dibahas tentang bervariasi pada Recnet Post yang lalu  Kali ini saya akan membagikan Cara Modifikasi BuzzBoost pada Feedburner baik itu berupa postingan terbaru (Recent Posts) ataupun Komentar terbaru (Recent Comments) yang diambil dari javascript pada Feedburner kita masing-masing. Pernah juga saya memodifikasi Cara Mengubah Feedburner Chicklets Pada Blog  pada waktu yang lalu



Demo bisa dilihat disini


Anda haruslah login dulu ke feedburner milik anda, dan selanjutnya buatla recent posts atau recent comment melalui BuzzBoost pada feedburner, seperti yang ditujukkan pada gambar dibawah ini :

Modifikasi BuzzBoost  pada Feedburner

Jika sudah, jangan lupa setting seperti gambar berikut :

Modifikasi BuzzBoost  pada Feedburner

Lah, sekarang saatnya kita mengambil javascript yang ada di feedburner untuk dimasukan pada widget kita.

Untuk Recent Post biasanya seperti kode berikut :

<script src="http://feeds.feedburner.com/KangOnkDesign?format=sigpro" type="text/javascript" >

Untik Recent Comment, kalau gak slah seperti ini :

<script src="http://feeds2.feedburner.com/KODcomments?format=sigpro" type="text/javascript"></script>

Memdifikasi warna-warnanya

Jika suda di copy paste javascript tersebut ke dalam widget blog kita, jangan disimpan dulu. Selanjutnya copy paste kode CSS berikut diatas kode yang baru diambil dari feedburner.
<style>
div.feedburnerFeedBlock ul li {background: #E2F0FD;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 10px !important;
border: 1px solid #0080ff;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
}
div.feedburnerFeedBlock ul li:hover {
 background:#ffffff;
}
div.feedburnerFeedBlock ul li a{
color:#0080ff;

text-decoration:none;
}
div.feedburnerFeedBlock ul li a:hover {
text-decoration:none;
}

div  #creditfooter{
display:none;
}
</style>
Silakan ganti huruf-huruf yang bercetak tebal diatas sesuai dengan kemauan anda, jika selesai langsung disimpan dan dilihat hasilnya. Jika kebingungan untuk mencari warna-warna yang cocok dengan blog anda silakan dilihat disini

2 komentar: