Membuat Label Blog dengan Thumnail.

Membuat label blog tertentu dengan thumnail.

Trik ini saya dapatkan dari Blogger miscah. Jadi konsepnya seperti recent post dengan thumnail (Baca: Membuat Recent Posts Cantik ). Namun, kali ini yang diberi thumnail adalah post tertentu dalam satu kategori

Langkahnya,

1. Masuk ke akun blogger
2. Buka design/rancangan
3. Pilih Edit HTML
4. Copy kode barikut, dan paste di atas kode
   
   /---Image-Label---/
   img.label_thumb {
   float:left;
   padding:3px;
   background:#CCC;
   border:1px solid #A4A4A4;
   width:100px;
   height:75px;
   margin-right:10px;
   margin-top:10px }
   img.label_thumb:hover {
   opacity:0.8;
   filter:alpha(opacity=80);
   -moz-opacity:0.80;
   -khtml-opacity:0.8 }
   
   Keterangan: silahkan modifikasi sendiri warna backgroundnya, lebar dan tingginya (ubah angka di width, dan height)
   
   
5. Copy juga kode berikut, dan paste setelah kode
   
   <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>
   
   
6. Simpan
7. Sekarang buka Page Elemen/Elemen Laman
8. Klik pada "Tambahkan Gadget / Add Gadget Element"
9. Pilih HTML/Javascript
10. Paste kode barikut
    
    <script type='text/javascript'>var numposts = 6;</script>
    <script type="text/javascript" src="/feeds/posts/default/-/SEO?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
    
    Keterangan: Silahkan sesuaikan sendiri jumlah posting (thumnail) yang ditampilkan, ubah angka "6". Dan yang warna merah "SEO" ganti dengan nama labelnya. Mudah
    
11. Simpan

Demo: - Penulis : Damar Saloka Anggoro - Judul : Membuat Label Blog dengan Thumnail.

• Berlangganan newsletter Ka Damar Blog Tips dan Anda akan dapat men-download "EBOOK TRIK TIPS BLOGGER" secara gratis
• Anda juga akan menerima Update Artikel terbaru secara otomatis ke Inbox Email Anda.

Nama Kamu*
Email*

Related Post:

Cara Membuat Related Post seperti ini