Membuat Widget Label Tertentu Dengan Tampilan Thumbnail

Advertisement

Membuat Widget Label Tertentu Dengan Tampilan Thumbnail | kali ini saya akan mengshare bagaimana Membuat Widget Label Tertentu Dengan Tampilan 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:

Nah, cara membuat widget Label seperti diatas ikuti langkah-langkah seperti dibawah ini :

1. Buka Blogger → Template → Edit HTML
2. Lalu masukkan 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='http://2.bp.blogspot.com/_IKigl6y9hFA/TMdcT1jzo5I/AAAAAAAAAHA/hAKuT9rJpFU/noimage.jpg';}
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/-/Tutorial%20Ads?
published&amp;alt=json-in-script&amp;callback=labelthumbs"></script>

<script src="/feeds/posts/summary/-/Tutorial%20Ads?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
<a href="/search/label/Tutorial%20Ads" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category &#187;</a>

6. Silahkan ganti label yang saya beri warna dengan label blog sobat sendiri.
7. Simpan dan lihat hasilnya.

Semoga Bermamfaat, 

Found an article helpful? Donate via Paypal