Cara Membuat Widget Label Tertentu Dengan Thumbnail

Cara Membuat Widget Label Tertentu Dengan Thumbnail - Hai sobat blogger, selamat datang di blog saya, kali ini saya akan mengshare Cara Membuat Widget Label Tertentu Dengan Thumbnail, recent post berdasarkan label bisa memudahkan pengunjung blog anda untuk post anda berasarkan labelnya. Jika anda ingin membuat widget tersebut perhatikan tutorial berikut ini:

Berikut Adalah Cara Membuat Recent Post Berdasarkan Label Dengan Mudah:

1. Buka Blogger > Template > Edit HTML
2. Lalu masukan code CSS di bawah ini di atas ]]></b:skin>

/*** Featured Categories ***/ 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 {}

3. Lalu masukan code berikut di atas </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/AVvXsEgOIjXRQkzaZqHfaPL0TBsH8jdGOw0z_slmpqSTA_7s_63N14hwT7YHfL8DSj5LXSjvN7poueKjM6D5LSnsH1ukh4mdWaiARktB8c44lHI4gx7lbKYJiw_nm68CXQSdSkdvlZ7tjgXt3LlW/';} 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('<b><a href="'+posturl+'" target ="_top">'+posttitle+'</a></b><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> 

4. Masuk ke  Blogger > Tata Letak > Tambah Gadget > HTML/JavaScript

5. Pastekan code di bawah ini ini kedalam HTML/JavaScript

<script type='text/javascript'>var numposts = 3;var showpostthumbnails =
true;var displaymore = false;var displayseparator = true;var
showcommentnum = true;var showpostdate = true;var showpostsummary =
false;var numchars = 100;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Gadget?
published&amp;alt=json-in-script&amp;callback=labelthumbs"></script>

Perhatikan yang berwarna Merah, itu adalah nama label yang akan dimunculkan, silakan sobat ganti
terlebih dahulu sesuai keinginan.
NOTE: jika nama label yang ingin sobat munculkan terdiri dari
dua kata maka spasi diganti dengan tanda %20 . Kira-kira nanti menjadi seperti ini:

<script type='text/javascript'>var numposts = 3;var showpostthumbnails =
true;var displaymore = false;var displayseparator = true;var
showcommentnum = true;var showpostdate = true;var showpostsummary =
false;var numchars = 100;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Gadget%20Terbaru?
published&amp;alt=json-in-script&amp;callback=labelthumbs"></script>

6. Simpan dan lihat hasilnya

Sekian dari saya temtang Cara Membuat Widget Label Tertentu Dengan Thumbnail, semoga bermanfaat bagi anda , terimakasih telah mengunjungi blog saya.

Jika ada saran atau kritik silahkan ber komentar saja