Membuat Widget Kategori Label Tertentu Dengan Thumbnail

Kang Bedol – Membuat Widget Kategori Label Tertentu Dengan ThumbnailSobat blogger semua mungkin sudah bayak yang tau apa itu arti judul diatas. Membuat blog yang rapih dan enak untuk diliat adalah salah satu kepuasan tersendiri bagi para blogger. Dan kali ini saya Kang Bedol akan sedikit memberikan cara membuat widget kategori label tertentu dengan thumbnail.

Widget kategori label tertentu merupakan pengelompokan atau memisahkan artikel berdasarkan kategori atau label yang bisa kita tampilkan pada widget sehingga memudahkan para pengunjung blog agar mudah memilih dan membaca artikel yang kita buat. Untuk lebih jelasnya sobat bisa lihat gambar dibawah ini.

Dengan menggunakan widget tersebut maka blog kita akan terlihat rapih, Nah bagi sobat yang belum mengerti cara membuat widget kategori label tertentu dengan thumbnail dan ingin mencobanya berikut caranya.

Cara membuat Widget Kategori Label Tertentu Dengan Thumbnail

Baca Juga : Membuat Gambar Agar Tidak Melebihi Halaman Postingan Blog

1. Login ke Blogger template pilih ==> EDIT HTML

2. Cari kode ]]></b:skin> kemudian copy dan paste Kode dibawah ini tepat diatasnya.

img.label_thumb{position:absolute;top:6px;left:0;float:left;height:50px;width:58px;}
ul.label_with_thumbs{float:left;width:100%;margin: 0 0 0;padding:0;}ul.label_with_thumbs li{padding:6px 0px 6px 66px;position:relative;min-height:53px;margin:0 0 0 0;border-bottom:1px solid #eee;}ul.label_with_thumbs li:last-child{border-bottom:none !important;}.label_with_thumbs li{list-style:none;font-size:11px;color:#999;}.label_with_thumbs .title-label a{float:left;display:inline-block;font-weight:bold;font-size:13px;margin:0 0 3px;padding:0;color:#555;width:100%;}.label_with_thumbs a:hover{color:#0099cc;}.label_with_thumbs strong{padding-left:0px;}a.comment-label{font-size:11px;color:#999;}a.more-label{font-size:11px;color:#999;}

3. Setelah itu cari kode </head> dan copy paste kode dibawah ini tepat diatasnya.

<b:if cond=’data:blog.pageType != &quot;item&quot;’>
<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://3.bp.blogspot.com/-zP87C2q9yog/UVopoHY30SI/AAAAAAAAE5k/AIyPvrpGLn8/s1600/picture_not_available.png’;}
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]=”June”;monthnames[7]=”July”;monthnames[8]=”Aug”;monthnames[9]=”Sept”;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 width=”56″ height=”46″ class=”label_thumb” src=”‘+thumburl+’” alt=”‘+posttitle+’” title=”‘+posttitle+’”/></a>’);document.write(‘<div class=”title-label”><a href=”‘+posturl+’” target =”_top”>’+posttitle+'</a></div>’);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 class=”comment-label” href=”‘+commenturl+’” target =”_top”>’+commenttext+'</a>’;towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+’ | ‘;towrite=towrite+'<a class=”more-label” 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>
</b:if>

4. Simpan template, Kemudian beralih ke Dasbor blog pilih TATA LETAK dan buatlah Widget HTML/JavaScript Kemudian copy paste kode dibawah ini lalu klik Save.

<script type=’text/javascript’>var numposts = 4;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/-/NAMA LABEL?published&amp;alt=json-in-script&amp;callback=labelthumbs”></script>

• Jangan lupa untuk merubah Warna Biru dengan kategori atau label yang ingin kita tampilkan.

Artikel Terkait : Membuat Menu Navigasi Responsive di Blog

Demikianlah cara membuat widget kategori label tertentu dengan thumbnail, Bagaimana..? Jika sobat tertarik untuk mencobanya silahkan ikuti langkah-langkah diatas, Selamat mencoba.