Memasang Widget Recent Post di Blog

Recent post adalah widget yang menampilkan daftar postingan terakhir atau terbaru dari sebuah blog. Widget ini dibuat oleh mas andes, widget ini ditujukan agar pengunjung bisa mengetahui postingan yang baru dari blog tersebut.
Seperti biasa untuk demonya bisa dilihat di sidebar blog ini.

Apa keistimewaan dari gadget/widget ini?

Keistimewaan widget ini diantaranya dapat disesuaikan dengan keinginan kita dan template blog kita, misalnya gak pengen pake thumbnail, atau deskripsinya pengen super puanjang juga bisa

Bagaimana Cara Memasangnya?

Untuk memasangnya di blog silahkan login ke blog kamu > Template >edit HTML lalu ikuti langkah berikut ini:

1. Salin dan letakan kode berikut diatas

</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/AVvXsEiz41poE_jdM65OE_n68Z8T7pjuSo6N8qCjsQ4_qk4AW8vvKi9oIVHVS8QhyphenhyphenaqJaISxIEl5grOdQ4pRkjZaUnnDNZG1fDOIM9M63HIHYRyD1imXFgbeT3nfAI3UsV-z6KFvjPGXVr_XuSQJ/'}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. Letakan kode berikut 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. Selanjutnya masuk ke Tataletak > Tambah Html/Javascript dan masukan script berikut

<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?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs"></script>

4. klik simpan dan lihat hasilnya, jika widget tidak muncul silahkan cek kembali scriptnya dan sesuaikan langkah langkahnya dengan tutorial disini

Untuk menampilkan Recent Post dari label tertentu silahkan lihat kode /feeds/posts/default?orderby pada langkah nomer 3. Lalu tambahkan kode /-/NAMA_LABEL setelah posts/default , sehingga hasilnya akan seperti ini:
<script type="text/javascript" src="/feeds/posts/default/-/NAMA_LABEL?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs"></script>
 NAMA_LABEL ganti dengan label yang kamu inginkan

Dan untuk customize setingannya bisa dipahami di langkah 3, tinggal sesuaikan dengan kebutuhan kamu.

AKhirnya kelar juga postingan hari ini :D, masih bingung? silahkan sampaikan di kotak komentar saja. Mampir juga di Cara Memasang Random Post Blogspot dengan dan tanpa Label. Selamat mencoba.