Membuat label blog tertentu dengan thumnail.

Membuat Label Blog dengan Thumnail.

Trik ini saya dapatkan dari Blogger miscah. Jadi konsepnya seperti recent post dengan thumnail (Baca: Cara Membuat Read More Automatis + Thumbnail (Versi 3) ). 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

Tweet

Anda Sudah Membaca Membuat label blog tertentu dengan thumnail. Thanks for reading! Suka dengan artikel ini? Please link back artikel ini dengan share Facebook like diatas/sharing tool. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku. (MENCURI adalah pekerjaan PENGECUT ! © room-tutorial.blogspot.com)