Cara Pasang Recent Posts by Label With Thumbnail di Blogger

Untuk memasang Recent Posts by Label With Thumbnail di Blogger ikuti langkah-langkah berikut:

1. Langkah pertama Anda harus login terlebih dahulu.
2. Kemudian masuk ke dalam dashboard dan pilih menu Layout.
3. Jika Anda sudah berada di halaman Layout, silakan pilih add widget HTML/JavaScript kemudian masukkan script berikut:
   

   <style>
   /*** Recent Labels Gadget Css ***/
   img.label_thumb{
   float:left;
   padding:5px;
   border:1px solid #8f8f8f;
   background:#D2D0D0;
   margin-right:10px;
   height:55px;
   width:55px;
   }
   img.label_thumb:hover{
   background:#f7f6f6;
   }
   .label_with_thumbs {
   float: left;
   width: 100%;
   min-height: 70px;
   margin: 0px 10px 2px 0px;
   adding: 0;
   }
   ul.label_with_thumbs li {
   padding:8px 0;
   min-height:65px;
   margin-bottom:10px;
   list-style:none;
   }
   .label_with_thumbs a {}
   .label_with_thumbs strong {}
   </style>
   <script type='text/javascript'>
   //<![CDATA[
   function labelthumbs(json){document.write('<ul class="label_with_thumbs">');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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwzqPSVAjnXrdl7PcvAOQS7OD7Y5oSZ09WQDrp2lEOURDgweVRDIysFrQPutyEAdZ4rv1BgRsL5Rkqk5dA9yJPr1LXKlR7rffG1UAwym5ESKMHhKpWTMFKxVmjv-O3sDkciDUtSWzx0Pi1/';}
   var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
   document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}
   else
   if("summary"in entry){var postcontent=entry.summary.$t;}
   else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
   else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
   var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
   if(showcommentnum==true)
   {if(flag==1){towrite=towrite+' | ';}
   if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
   if(displaymore==true)
   {if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
   document.write(towrite);document.write('</li>');if(displayseparator==true)
   if(i!=(numposts-1))
   document.write('');}document.write('</ul>');}
   //]]>
   </script>
   <script type='text/javascript'>var numposts = 5;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 80;</script>
   <script type="text/javascript" src="/feeds/posts/default/-/Nama Label?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

   Keterangan:
   
   •  var numposts = 5 (angka 5 berarti menampilkan 5 postingan terakhir, silakan Anda sesuaikan dengan keinginan Anda)
   • /feeds/posts/default/-/Nama Label (silakan ganti Nama Label dengan label yang ingin Anda tampilkan, jika nama label Anda mengandung spasi, ganti spasi dengan %20, contoh: Free Games diganti menjadi Free%20Games)
     Semoga bermanfaat.

Posted in: Tutorial Blogger