Cara Membuat Recent Post Berdasarkan Label dan Thumbnail

Bagaimana Cara Membuat Recent Post Berdasarkan Label dan Thumbnail - Pada tutorial kali ini, " Siphe " akan berbagi cara

membuat recent post berdasarkan label dan thumbnail. Widget ini akan otomatis menampilkan update posting anda hanya pada label/kategori yang tentunya bisa anda pilih sendiri sesuai selera. Sebagai contoh sederhana bisa andat lihat pada gambar di samping ini.


Jika anda Tertarik untuk memasang widget ini Silahkan anda.  ikuti tutorial berikut ini…

• Seperti biasa, login ke akun blogger anda
• Silahkan anda masuk ke menu rancangan >> edit html 
• Centang EXPAND TEMPLATE WIDGET terlebih dahulu
• Jangan lupa Download Template, untuk menghindari kerusakan saat pengeditan 
• Cari kode </head>
• (*Gunakan F3 di keyboard untuk mempermudah pencarian)

Copy paste kode di bawah ini diatas kode  </head> 

<script type='text/javascript'>

//<![CDATA[
function labelthumbs(w){document.write('<ul class="label_with_thumbs">');for(var v=0;v<numposts;v++){var f=w.feed.entry[v];var g=f.title.$t;var z;if(v==w.feed.entry.length){break}for(var r=0;r<f.link.length;r++){if(f.link[r].rel=="replies"&&f.link[r].type=="text/html"){var n=f.link[r].title;var o=f.link[r].href}if(f.link[r].rel=="alternate"){z=f.link[r].href;break}}var j;try{j=f.media$thumbnail.url}catch(q){s=f.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!="")){j=d}else{j="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu-ZkGU5wV5WMjz_jkharuYVQKt6QjcHit2HfQgbPLbFk8QMry2pUhhfXupF8WxcuTsPpp74AiQg0wvaRzFgMf9MPZ7egOhi0CSMW__dGn_UiULhFWr-lkX3iMoPUxn8d1VpToHmfxxAc/s1600/no_image.jpg"}}var x=f.published.$t;var m=x.substring(0,4);var l=x.substring(5,7);var t=x.substring(8,10);var h=new Array();h[1]="Jan";h[2]="Feb";h[3]="Mar";h[4]="Apr";h[5]="May";h[6]="Jun";h[7]="Jul";h[8]="Aug";h[9]="Sep";h[10]="Oct";h[11]="Nov";h[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true){document.write('<a href="'+z+'" target ="_top"><img class="label_thumb" src="'+j+'"/></a>')}document.write('<strong><a href="'+z+'" target ="_top">'+g+"</a></strong><br>");if("content" in f){var y=f.content.$t}else{if("summary" in f){var y=f.summary.$t}else{var y=""}}var p=/<\S[^>]*>/g;y=y.replace(p,"");if(showpostsummary==true){if(y.length<numchars){document.write("");document.write(y);document.write("")}else{document.write("");y=y.substring(0,numchars);var e=y.lastIndexOf(" ");y=y.substring(0,e);document.write(y+"...");document.write("")}}var A="";var u=0;document.write("<br>");if(showpostdate==true){A=A+h[parseInt(l,10)]+"-"+t+" - "+m;u=1}if(showcommentnum==true){if(u==1){A=A+" | "}if(n=="1 Comments"){n="1 Comment"}if(n=="0 Comments"){n="No Comments"}n='<a href="'+o+'" target ="_top">'+n+"</a>";A=A+n;u=1}if(displaymore==true){if(u==1){A=A+" | "}A=A+'<a href="'+z+'" class="url" target ="_top">More »</a>';u=1}document.write(A);document.write("</li>");if(displayseparator==true){if(v!=(numposts-1)){document.write("")}}}document.write("</ul>")};
//]]></script>

•  Jangan lupa SAVE template terlebih dahulu
•  Masih di menu DESIGN >> PAGE ELEMENTS >> ADD GADGET >> HMTL/javaScript   
•  Masukkan kode di bawah ini kedalam contents

  <script type='text/javascript'>var numposts = 4;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 60;</script>

<script type="text/javascript" src="/feeds/posts/default/-/Ganti Nama Label Disini?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

• Untuk  var numposts bisa dirubah rubah nilainya sesuai dengan selera anda. 
• Jika sudah selesai silahkan masukkan kodenya, jangan lupa anda tambahkan judul / title widgetnya.
  (Ganti Nama Label Disini) dengan judul artikel anda.

• Lalu Save / Simpan. dan lihat perubannya.

 THANK YOU VERY MUCH