Cara Membuat Recent Post Berdasarkan Label Dan Thumbnail (Tutorial Blog)

Cara Membuat Recent Post Berdasarkan Label Dan Thumbnail (Tutorial Blog) - Pada turorial kali ini saya akan membahas cara membuat "recent post berdasarkan label dan thumblnail" dengan cara ini shobat bisa memasang wiget perlabel shobat, dengan catatan shobat bebas memasukan judul label shobat. Demo seperti gambar di bawah.

Nah gimana shob tertarikah??? bila shobat tertarik langsung saja deh shob ikuti tutor di bawah :

Cara Memasang :

=====================

• Login blogger shobat 
• pilih Rancangan/Template ==>> Edit HTML
• Cari kode ]]></b:skin>.
• Untuk mempercepat pencarian shobat bisa klik F3 atau bisa juga CTRL+F
• Copy kode berikut tepat sebelum kode ]]></b:skin> atau di atasnya.

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}
.label_with_thumbs a{}
.label_with_thumbs strong{}

• Kemudian lanjutkan cari kode </head> dan copy juga kode Script berikut tepat diatas kode  </head>.

<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/AVvXsEj8c9j-TuaZhsEKFt5WmU4-1VBN2CK6vMYroz7yKujD5viyJE6Bw6bFg_ZewEosxG1qqBgZ-58HNcB0Hxd_8TH0VJkp6pSy5WgBP6odIAa9zQTLIlPSUZ5z1WhsTqoQTAnzEn0daZdmihVq/';}
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>

• Save template shobat, eits belumslsei shob.
• Langkah selanjutnya Pilih Layout ==>> AddGadget ==>> HTML/JavaScript
• Copy kode dibawah

<script type='text/javascript'>var numposts = 3;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 SHOBAT?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

• Save gadget dan lihat hasilnya.

Keterangan :

Untuk Script yang saya blur merah, ubah jumlah posting yang ingin shobat tampilkan

Untuk Script yang saya blur Orange ubah dengan jdul label shobat.

Demikian saya share Cara Membuat Recent Post Berdasarkan Label Dan Thumbnail (Tutorial Blog), mudah mudahan bermanfaat.