Cara Membuat Widget Recent Post By Label Dengan Thumbnail Atau Gambar Saja di Blog

 Cara Membuat Widget Recent Post By Label Dengan Thumbnail Atau Gambar Saja di Blog - Kali ini saya akan hare tips dan trik lagi, Yaitu tutorial blogger pemula tentang Cara Membuat Widget Recent Post By Label Dengan Thumbnail Atau Gambar Saja di Blog. Tentunya bagi sobat webmaster, Tutorial ini sangat jadul sekali. Tapi bagi blogger newbie seperti saya ini, Trik yang seperti ini perlu di coba dan di terapkan dalam blog.

 Tujuan membuat widget recent post by label dengan thumbnail gambar saja di blog yaitu untuk mempercantik blog sobat, Namun fungsinya bukan itu saja dan masih bayak lagi, Salah satu contoh fungsi Recent Post By Label 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. Alhasil, Para pengunjug di blog sobat tidak akan merasa bosan berlama-lama membaca artikel-artikel posting dalam blog sobat.

 Cara membuat dan memasangnya di blog sangatlah mudah, Sebab sobat tidak perlu susah-susah edit kode dalam template yang tentunya sangat rumit dilakukan oleh para blogger pemula seperti saya ini.

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

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

1. Login atau Masuk ke Blogger.com menggunakan akun sobat.

2. Pada Dashboard Blogger tampilan baru. Pilih dan klik Menu >> Tata Letak.

3. Lalu sobat pilih >> Add Gadget atau Tambah Gadget.

4. Pilih >> HTML/Java Script.

5. Kemudian silahkan sobat masukkan semua kode dibawah ini ke dalam kotak HTML/Java Script.

<style>
/*** Labels Thumbs ***/
img.label_thumb{
float:left;
border:1px solid #ccc;
width:85px;
height:70px;
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 = 9;</script>
<script type="text/javascript" src="/feeds/posts/default/-/NamaLabel?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

Keterangan:
1. var numposts = 9 >> Angka 9 adalah jumlah recent post by label yang akan di tampilkan di blog sobat, Silahkan di ganti sesuai dengan keinginan sobat.

2. Nama Label = Isi dengan Nama Label yang daftar thumbnail atau gambarnya ingin di tampilkan di blog sobat.
Contoh label >> "tutorial blog". Label yang menggunakan space (spasi), Silahkan sobat pisahkan dengan %20. Sehingga menjadi tutorial%20blog.

• Ingat, Nama label harus cocok atau sesuai dengan label blog sobat yang ingin di tampilkan daftar thumbnail atau gambarnya dalam widget blog sobat.

• Bila sudah selesai meng-edit, Jangan lupa di Simpan ya sobat... dan silahkan lihat hasil nya...

 Demikian Tips dan Trik Cara Membuat Widget Recent Post By Label Dengan Thumbnail Atau Gambar Saja di Blog, Semoga sangat bermanfaat bagi sobat semua untuk mempercantik blog.

---

| Supported by http://kuc0pas.blogspot.com |

---