Cara Membuat Label Kategori Pada Blogger

Yang saya maksud dengan Label kategori disini adalah Widget pada blog yang menampilkan beberapa postingan kita berdasarkan Label yang kita gunakan pada posting blog kita dengan satu gambar tumbnail. Hal ini berfungsi untuk memudahkan Pengunjung blog kita agar lebih mudah pada saat mencari informasi pada blog kita. Langsung saja kita mulai cara pembuatanya.


Cara Membuat Label Kategori Pada Blog

• Langkah pertama silahkan Login ke akun blogger sobat masing-masing
• Pilih menu Template lalu Edit Html (centang Expand Template Widget)
• Selanjutnya silahkan sobat cari kode  ]]></b:skin> (agar lebih mudah, gunakan fitur pencarian dengan menekan CTRL + F pada keyboard sobat)
• setelah sobat menemukan kode tersebut, silahkan letakan kode berikut tepat diatas kode  ]]></b:skin> Tadi.

img.label_thumb{float:left;border:1px solid #8f8f8f;background:#D2D0D0;margin-right:10px;height:60px;width:60px;padding:2px}
img.label_thumb:hover{background:#f7f6f6}
.label_with_thumbs{float:left;width:100%;min-height:70px;margin:0 5px 2px 0}
ul.label_with_thumbs li{min-height:65px;margin:2px 0;padding:4px 0}

Keterangan : Kode yang berwarna merah adalah lebar dan tinggi Tumbnail

• Selanjutnya, Masih pada Edit Html silahkan cari kode  </head>
• Setelah ketemu, silahkan letakkan kode 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/AVvXsEitRtzkeua0dD7JNKWcZsM4KkSXLuDRUyJNo1yEix-SFGT460SDG7mhyMkZaeD-9rKnmRlvDKzTO7FJQaw-YTeD29dBT4aP385cXsz2AMWbhwbZS4u_L8va8q-1Al1By6s603lw3JVuR1Py/';}
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>

• Lalu simpan template sobat
• Langkah selanjutnya silahkan sobat pindah ke menu Tata Letak dan tambahkan gadgetHTML/JAVASCRIPT lalu masukkan kode berikut :

 <script type='text/javascript'>var numposts = 1;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 60;</script>
<script type="text/javascript" src="/feeds/posts/default/-/news?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
<script type="text/javascript">
function recentpostslist(json) {
 document.write('<ul>');
 for (var i = 1; i < json.feed.entry.length; i++)
 {
    for (var j = 1; j < json.feed.entry[i].link.length; j++) {
      if (json.feed.entry[i].link[j].rel == 'alternate') {
        break;
      }
    }
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>";
 document.write(item);
 }
 document.write('</ul>');
 }
</script>
<script src="http://lhk-blogs.blogspot.com/feeds/posts/summary/-/Download?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
<a href="http://lhk-blogs.blogspot.com/search/label/Download" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category &#187;</a>

Keterangan : Silahkan ganti tulisan yang saya tandai dengan warna Orange dengan Label yang sobat gunakan pada blog. dan yang saya beri tanda warna merah silahkan ganti dengan Url Blog sobat