Cara Memasang Artikel Terbaru Berdasarkan Label dengan Thumbnail

Cara Memasang Artikel Terbaru Berdasarkan Label dengan Thumbnail - Halo, kali ini saya memberikan tutorial yang hampir sama dengan postingan yang lalu, yaitu membuat artikel terbaru atau recent post, bedanya yang artikel sebelumnya artikel terbarunya tidak terdapat thumbnail alias gambar namun kali ini sudah terdapat gambarnya. Perbedaannya memang tidak terlalu mencolok namun recent post kali ini sudah pasti lebih dapat menarik pengunjung karena gambar merupakan faktor besar untuk dapat memikat pengunjung agar membaca artikel tersebut.

Widget seperti ini biasanya digunakan pada template magazine untuk menampilkan artikel-artikel terbarunya pada post homepage berdasarkan label yang digunakan, atau bisa juga digunakan pada sidebar untuk menampilkan recent post dengan label tertentu. Bahkan bisa juga untuk digunakan untuk menampilkan daftar posting terrakhir yang di publikasikan seperti recent post biasa. Semua tergantung pada pengaturannya dan kebutuhan pada blog itu sendiri. Mungkin sudah cukup untuk penjelasan tersebut, sekarang  langsung saja ke tutorialnya :

Cara Memasang Artikel Terbaru Berdasarkan Label dengan Thumbnail

1. Copy kode dibawah ini lalu pastekan diatas kode </head>

<script type='text/javascript'>//<![CDATA[function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}strx=s.join("")}chop=(chop<strx.length-1)?chop:strx.length-2;while(strx.charAt(chop-1)!=' '&&strx.indexOf(' ',chop)!=-1)chop++;strx=strx.substring(0,chop-1);return strx+'...'}function createSummaryAndThumb(pID){var div=document.getElementById(pID);var imgtag="";var img=div.getElementsByTagName("img");var summ=summary_noimg;if(img.length>=1){imgtag='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';summ=summary_img}var summary=imgtag+'<div>'+removeHtmlTag(div.innerHTML,summ)+'</div>';div.innerHTML=summary}function labelthumbs(json){document.write('<ul class="taglabel">');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/AVvXsEi9t5qP3RkDIwlfPLqbVSsXErUGrTCcIQjwXFWarPG8AmPGLqRa5xAp-oW5TXT_FwncWMhI5ygiu5gV7o2I8rQyYhq59lrVWBOgIYlS7k3m87lUVKa6Z-gJyAlGkSdh4iNjVDKeDA0rJM1s/'}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+'"><img alt="'+posttitle+'" title="'+posttitle+'" class="label_thumb" src="'+thumburl+'"/></a>');document.write('<a href="'+posturl+'" title="'+posttitle+'">'+posttitle+'</a><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+cdday+'-'+monthnames[parseInt(cdmonth,10)]+'-'+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=''+commenttext+'';towrite=towrite+commenttext;flag=1}if(displaymore==true){if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" title="'+posttitle+'">More »</a>';flag=1}document.write(towrite);document.write('</li>');if(displayseparator==true)if(i!=(numposts-1))document.write('')}document.write('</ul>')}//]]></script>

2. Lalu copy kode dibawah ini dan pastekan diatas kode ]]></b:skin>

img.label_thumb{float:left;border:1px solid #aaa;margin-right:5px;height:55px;width:55px;padding:5px}.taglabel{float:left;width:100%;padding:0;margin:0}ul.taglabel li{padding:5px 0;min-height:73px}

3. Masuk ke menu Tata Letak → Tambahkan Gadget
4. Pilih HTML/JavaScript
5. Copy kode dibawah ini dan pastekan di dalam widget tersebut.

<script type='text/javascript'>    var numposts = 5; // Jumlah Post yang di tampilkan    var showpostthumbnails = true; // Ganti "false" untuk tidak menampilkan [Thumbnail]    var displaymore = false; // Ganti "true" untuk menampilkan link [More]    var displayseparator = false;    var showcommentnum = false; // Ganti "true" untuk menampilkan [Komentar]    var showpostdate = false; // Ganti "true" untuk menampilkan [Tanggal]    var showpostsummary = true; // Ganti "false" untuk tidak menampilkan [Deskripsi Post]    var numchars = 60; // Character Deskripsi yang di tampilkan</script><script type="text/javascript" src="/feeds/posts/default/-/NAMA_LABEL?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs"></script>

Perhatikan kode dibawah ini :

<script type="text/javascript" src="/feeds/posts/default/-/NAMA_LABEL?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs"></script>

Silahkan ganti kode "NAMA_LABEL" sesuai dengan nama label kalian.

Jika ingin membuat recent post biasa (tanpa berdasarkan label), ganti baris kode diatas dengan kode dibawah ini :

<script type="text/javascript" src="/feeds/posts/default?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs"></script>

 6. Selesai

Mungkin itu saja untuk Cara Memasang Artikel Terbaru Berdasarkan Label dengan Thumbnail. Jika ada yang kurang jelas silahkan tanyakan melalui komentar. Semoga artikel ini bermanfaat dan terima kasih.