7 Langkah Membuat Kategori Label Thumbnail

Membuat kategori dengan Thumbnail adalah modifikasi yang saya buat tanpa harus melakukan edit HTML template blog, hal ini bertujuan agar memudahkan anda untuk menghapus atau mengedit kode-kode yang terdapat di dalamnya. Untuk memunculkan atau menyembunyikan tampilan widget ini dapat anda lakukan sesuai dengan keinginan, silahkan baca di blog saya terwujud.com yaitu (Cara Menampilkan Widget Sesuai Keinginan).

7 Langkah Membuat Kategori Label Thumbnail merupakan modifikasi yang dapat anda terapkan dengan mudah dan sederhana, soalnya tugas anda cukup copy dan paste kode yang akan saya paparkan di bawah kemudian anda letakkan pada kolom Widget yang anda inginkan. Berikut penjelasannya:

1. Login ke www.blogger.com
2. Masuk dan pilih menu Tata Letak
3. Klik tambahkan Gadget
4. Pilih HTML/Javascript
5. Copy kode Script di bawah ini

<style> img.label_thumb {  float:center;  padding:3px;  background:#A7F7A4;  border:1px solid #A4A4A4; width:100px; height:100px;  margin-right:5px;  margin-left:5px;  margin-top:5px }  img.label_thumb:hover {  opacity:0.8;  filter:alpha(opacity=80);  -moz-opacity:0.80;  -khtml-opacity:0.8 } </style> <script type='text/javascript'>  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 = 6;</script>  <script type="text/javascript" src="/feeds/posts/default/-/Kesehatan?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

6. Paste kode script di atas dan letakkan pada kolom widget
7. Lihat hasilnya

Keterangan

• feeds/posts/default/-/Kesehatan? (silahkan isi dengan label anda)
• var numposts = 6 (Ganti angka untuk jumlah yang tampil)
• Modifikasi sendiri tampilan kategorinya pada kode CSS

Demikian artikel tentang 7 Langkah Membuat Kategori Label Thumbnail, semoga bermanfaat bagi saya dan kita semua. Terima Kasih!!.

*) P.S: Jika anda benar-benar mengalami kendala untuk mendapatkan wanita pujaan anda,
saya sarankan anda bergabung di www.pencinta-wanita.com , silahkan mendaftar menjadi anggota dan pelajari materi-materi yang dikirimkan Ronald Frank lewat email atau baca langsung di member area, untuk sementara pendaftaran anggota gratis. Daftar sekarang juga dan dapatkan bonus senilai Rp10.000.000,- (dibaca sepuluh juta).