Membuat Recent Post Berdasarkan Label

Jika sebelumnya kita kita membuat recent post dengan sistem acak,kali ini ada cara terbaru yakni  membuat recent post berdasarkan label. Bukan itu saja, penampilanya pun akan lebih menarik karena di sertai dengan satu tampilan post thumbnail.

Hal ini akan mempermudah pembaca/pengunjung blog mencari informasi yang di inginkan,tentunya akan menambah keuntungan tersendiri untuk pengunjung blog yang setia.

Nah penasaran bukan bagaimana cara menerapkan widget ini pada blog kita?
mari kita bahas bersama :

1. Login ke akun blogger dan masuk ke pengaturan Template
2. Backup template sobat untuk berjaga-jaga jika ada kesalahan
3. Klik Edit HTML
4. Centang tanda "Expand Widget Template"
5. Cari kode ]]></b:skin> kemudian copy dan pastekan kode di bawah ini tepat diatas 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}

     Catatan :

• Angka yang berwarna merah adalah ukuran lebar dan tinggi gambar thumbnail, sobat bisa mengaturnya sesuai kebutuhan

      6.  Langkah selanjutnya adalah  sobat cari kode </head>
      7.  Masukkan kode script di bawah ini tepat di atas kode </head> tadi :

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

      8.  Untuk sementara sobat bisa Save Template untuk melanjutkan langkah selanjutnya.
      9.  Langkah yang terakhir adalah sobat pergi ke pengaturan Tata Letak dan tentukan
           dimana widget ini akan di pasang?
     10.  Jika tempat widget sudah ditentukan,sobat bisa langsung klik Tambah Gadget
            dan pilih (dengan cara mengklik) HTML/JavaScript
     11.  Masukkan kode script di bawah ini dan Save

<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/-/widget?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://adjieumbara.blogspot.com/feeds/posts/summary/-/widget?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
<a href="http://adjieumbara.blogspot.com/search/label/widget" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category &#187;</a>

     Catatan :

• Tulisan yang berwarna merah adalah label/kategori yang akan ditampilkan, silahkan sobat ganti dengan label/kategori blog sobat
• Tulisan yang berwarna biru adalah alamat/URL blog saya, silahkan sobat ganti dengan alamat/URL blog sobat

Demikian penjelasan tentang cara membuat recent post berdasarkan label, sehingga penampilan blog sobat semakin menarik dan penuh fariasi..