kategori otomatis dengan thumbnail

Selamat malam Sahabat Pucanglaban. pada kali ini saya akan share tutorial tentang kategori otomatis dengan thumbnail. Sebenarnya, kategori otomatis dengan thumbnail ini merupakan pengembangan dari trik sebelumnya mengenai Menampilkan Kategori Berdasarkan Nama Label, fitur ini bisa menampillkan kategori berdasarkan nama kategori beserta gambar thumbnail dengan ringkasan artikel.

Ok, langsung saja ke TKP!

langkah pertama

1. login ke Blogger
2. klik rancangan
3.klik tab edit html
4.cari kode ]]></b:skin> lalu copy paste kode berikut ini diatas ]]></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 {}

5. carilah kode </head> lalu copy paste kode berikut ini diatas </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/AVvXsEicw6Ps2w4qLsmHlv-I8Kfj_x5HLMBrekZuJSWVOQvfTK1j7KzopjoLJXSyJY0-c7OJeJC7Dn0u1c9g2bNmvLqmIWNTLKiTe-CRBdaEfWtcVcIc5Ns45siJQBL9XHbC96SHe6bm5nxpBRA2//';}
 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>

6. klik simpan template.

langkah kedua

1.edit elemen halaman
2.klik tambah gadget
3.pilih html java script lalu copy paste kode berikut

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

perhatian: ganti news dengan link label sahabat.
mudahkan? selamat mencoba dan semoga berhasil.

 

pucanglaban.com informatif, kompetitif dan kreatif bersama berbagi ilmu dan pengetahuan.