Recent Post Berdasarkan Label Thumbnail

Dimana dengan adanya widget ini bisa memudahkan para pembaca untuk mengeksplorasi tiap kategori yang ada dan bisa juga untuk meringkas ruang pada sebuah template.
Nah, sekarang bagaimana. Apakah Anda berminat untuk membuat nya untuk mempercantik tampilan Blog Anda. jika berminat, silahkan lakukan dan ikuti langkah-langkah di bawah ini.


Langkah-Langkah:
1. Masuk akun blogger lalu pilih menu Rancangan > Edit Html
2. Jangan Lupa backup dulu template Blog,
3. Jangann lupa klik ‘Expand Widget Templates’
4. Copy-paste kode berikut ini dan letakkan di atas Kode ]]></b:skin>.

img.label_thumb{float:left;border:1px solid #8f8f8f;background:#D2D0D0;margin-right:10px;height:60px;width:60px;padding:2px}
img.label_thumb:hover{background:#f7f6f6}
.label_with_thumbs{float:left;width:100%;min-height:70px;margin:0 5px 2px 0}
ul.label_with_thumbs li{min-height:65px;margin:2px 0;padding:4px 0}

Perhatikan tulisan warna merah diatas, itu adalah lebar dan tinggi thumbnail image.
5. Selanjutnya masih pada posisi Edit HTML, masukkan kode script yang sudah Saya simpan di Google Code berikut ini diatas kode </head>

<script src='http://mybloglog.googlecode.com/files/labels.js' type='text/javascript'/>

6. Setelah itu save templates, kemudian menuju ke layout pilih kotak yang akan ditambahkan widget ini. Klik add gadget >> HTML/Javascript masukkan kode berikut ini kedalamnya :

<script type='text/javascript'>var numposts = 1;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 150;</script>

<script type="text/javascript" src="/feeds/posts/default/-/news?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

<script type="text/javascript">
function recentpostslist(json) {
document.write('<ul>');
for (var i = 1; i < json.feed.entry.length; i++)
{
for (var j = 1; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="http://www.ramabanten.us/feeds/posts/summary/-/news?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
<a href="http://www.ramabanten.us/search/label/news" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category &#187;</a>

Keterangan :
Warna Orange : adalah label atau kategori yang ditampikan, Anda bisa menggantinya dengan label yang Anda punya.
Warna merah : Ganti URL dengan URL blog anda.

Selanjutnya save dan lihat hasilnya.
Tampilan dari widget ini mengikuti kode CSS sidebar (jika Anda meletakkan di sidebar) pada template yang Anda pakai. Kode CSS yang digunakan pada pembuatan widget ini hanya digunakan untuk mengatur tampilan thumbnail.

Demikian tadi tutorial bagaimana Recent Post Berdasarkan Label  Thumbnail, jika masih ada yang kurang jelas silahkan tinggalkan pesan di kotak komentar, selamat mencoba dan semoga bermanfaat.

Salam Terima kasih,

Jangan Lupa Untuk Membagikan Artikel Ini Ok