Cara Membuat Recent Post/Artikel Terbaru Thumbnail Saja Di Blog

Sore sahabat gembel, Kali ini saya akan membahas tentang Cara Membuat Widget Recent Post atau Artikel Terbaru Dengan Thumbnail Atau Gambar Saja di Blog untuk mempercantik blog anda.

Recent post adalah daftar posting terbaru atau juga sering disebut dengan artikel terbaru, berita terbaru. Dalam hal ini kita akan membuat widget yang khusus untuk recent post  atau artikel terbaru hanya menampilkan thumbnail (gambar) saja dan tanpa judul artikel postingan.

Tujuan membuat widget recent post dengan thumbnail atau gambar saja di blog yaitu untuk mempercantik blog, namun fungsinya bukan itu saja dan masih bayak lagi. Salah satu contoh fungsi Recent Post Dengan Thumbnail Atau Gambar Saja yang di pasang dalam blog adalah tampilannya yang sangat cantik dan bisa untuk membuat pengunjung blog agar terpikat dan penasaran dengan berita yang ada di balik Thumbnail atau Gambar yang sobat pasang.

Cara membuat dan memasangnya di blog sangatlah mudah, sobat gembel tidak perlu susah-susah edit kode dalam template yang tentunya sangat rumit dilakukan oleh anda.

Agar sobat tidak penasaran tentang bagaimana tampilannya Widget Recent Post Dengan Thumbnail Atau Gambar Saja di Blog, Sobat bisa melihat gambar screenshot dibawah ini.

Bila sobat tertarik ingin membuat dan memasang Widget Recent Post Dengan Thumbnail Gambar Saja di blog, silahkan ikuti langkah-langkahnya berikut ini.

• Login ke Blogger.com dahulu.
• Pada Dashboard Blogger tampilan baru. Pilih dan klik Menu >> Tata Letak.
• Lalu sobat pilih >> Add Gadget atau Tambah Gadget.
• Pilih >> HTML/Java Script.
• Kemudian silahkan sobat masukkan semua kode dibawah ini ke dalam kotak HTML/Java Script.
• Ganti gembelmemble.blogspot.com dengan nama blog anda

<style>
/*** Labels Thumbs ***/
img.label_thumb{
float:left;
border:1px solid #ccc;
width:45px;
height:45px;
margin-right:10px;
margin-bottom:10px;
}

</style>
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<div>');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}
var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}
else thumburl='';}
document.write('<a href="'+posturl+'" title="'+posttitle+'"><img class="label_thumb" src="'+thumburl+'"/></a>');
if(i!=(numposts-1))
document.write('');}
document.write('</div>');}
//]]>
</script>
<script type='text/javascript'>var numposts = 12;</script>
<script type="text/javascript" src="http://gembelmemble.blogspot.com/feeds/posts/default/?orderby=updated&alt=json-in-script&callback=labelthumbs">
</script>

Keterangan:

var numposts = 12 >> Angka 12 adalah jumlah recent post yang akan di tampilkan di blog, Silahkan di ganti sesuai dengan keinginan sobat.

Bila sudah selesai editnya, jangan lupa di Simpan sobat... dan silahkan lihat hasil nya...

Demikian tutorial blog Cara Membuat Widget Recent Post Dengan Thumbnail Atau Gambar Saja di Blog, Semoga bisa sangat bermanfaat bagi sobat semua untuk mempercantik blog.