Membuat Label Dengan Thumbnail di Blogger 9

Pada postingan terdahulu saya pernah membahas tentang label atau katagori widget di bloger baca Cara Membuat Katagori Widget Pada Blogger .Ada beberapa pareasi yang bisa kita lakukan dalam pembuatan lebel ini, seperti membuat label ini menjadi menu dropdown (Baca Cara Membuat Menu Dropdown Katagori Blogger),membagi label menjadi beberapa kolom ( Baca Membagi Kolom Katagori/Label Widget) dan yang akan kita bahas saat ini adalah Membuat Label Dengan Thumbnail di Blogger . Dengan trik yang akan kita buat saat ini diharapkan dapat menambah keindahan dan daya tarik untuk blog kita dengan menampilkan postingan blog pada halaman utama dan penggunjung akan melihat postingan yang tertata pada halaman utama tersebut Menurut Label.Widget ini mirip sekali dengan Widget Postingan Terbaru dengan Thumbnail (Recent Post With Thumbnail) namun yang membedakanya adalah Pada widget label dengan thumbnail ini kita dapat menampilkan postingan terbaru tersebut per label.

Dan adapun langkah-langkah Membuat Label Dengan Thumbnail di Blogger ini adalah:

1. Buka Blogger Dasbor >>Pilih Opsi lainya >> Pilih/klik templete .

2. Back Up dulu Templete anda.

3. Selanjutnya Klik Edit HTMl >> centang kotak kecil Expand Template Widget.

4. Cari Kode ]]></b:skin> gunakan Ctrl + F untuk memudahkan Pencarian.

5. Copy Kode di bawah ini dan pastekan diatas Kode ]]></b:skin> tadi.

/* Idblogmaker2 Content */.Idblogmaker2 h2 {font:bold 13px Arial;text-transform:none;margin:0 auto;color:#000;line-height: 1.2em;letter-spacing:.01em;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1swE8XWssPXxvLQoyKlG7iayyVtKcnMjybZ8hMougq1rd2n-bn2_Pffoco-oM_qbQzw7KCMTcy8iQd_0WjJ97LW31GePvQ6n0wFPtymA1vCIGewOsmcpZVkRXMxts5FW6HswE_7RWuUBg/s1600/Idblogmaker.com+ku.png) repeat-x bottom left;border:1px solid #ccc;border-width:0 0 1px 0;padding:5px 10px;} .Idblogmaker2 {font:normal 12px Arial; color:#555;line-height: 1.4em;} .Idblogmaker2 ul {list-style:none;margin:0 0 0;padding:0 0 0;} .Idblogmaker2 li {margin:0;padding:0 auto;text-indent:0px;line-height:1.4em;} .Idblogmaker2 .widget {background:url() repeat-x bottom left;margin:0 0 8px 0;padding:0 auto;border:1px solid #ccc;} .Idblogmaker2 a:link, .Idblogmaker2 a:visited {font:bold 13px Arial;color:#16387c;text-decoration:none;} .Idblogmaker2 a:hover {color:#000;text-decoration:underline;} .Idblogmaker2 .widget-content {margin:0 auto;padding:6px 10px;} /* IDB Featured Categories */ img.label_thumb{float:left;padding:0 auto;border:none;background:none;margin:0 10px 5px 0;height:72px;width:72px;} img.label_thumb:hover{background:none;}.label_with_thumbs {float:left;margin:0;padding:0} ul.label_with_thumbs li {margin:0 0 5px;clear:both;}.label_with_thumbs a {} .label_with_thumbs strong {} /* Idblogmaker3 Content */ .Idblogmaker3 h2 {font:bold 13px Arial;text-transform:none;margin:0 auto;color:#000;line-height: 1.2em;letter-spacing:.01em;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1swE8XWssPXxvLQoyKlG7iayyVtKcnMjybZ8hMougq1rd2n-bn2_Pffoco-oM_qbQzw7KCMTcy8iQd_0WjJ97LW31GePvQ6n0wFPtymA1vCIGewOsmcpZVkRXMxts5FW6HswE_7RWuUBg/s1600/Idblogmaker.com+ku.png) repeat-x bottom left;border:1px solid #ccc;border-width:0 0 1px 0;padding:5px 10px;} .Idblogmaker3 {font:normal 12px Arial; color:#555;line-height: 1.3em;} .Idblogmaker3 ul {list-style:none;margin:0 0 0;padding:0 0 0;} .Idblogmaker3 li {margin:0;padding:2px 0;text-indent:0px;line-height:1.4em;} .Idblogmaker3 .widget {margin:0 0 8px 0;padding:0 auto;border:1px solid #ccc;} .Idblogmaker3 .widget-content {margin:0 auto;padding:6px 10px;}.Idblogmaker3 a:link, .Idblogmaker3 a:visited {font:bold 13px Arial;color:#16387c;text-decoration:none;} .Idblogmaker3 a:hover {color:#000;text-decoration:underline;}

6. Selanjutnya Copy kode di bawah ini dan pastekan diatas kode </head> .

<!-- Label Dengan Thumbnail -->
<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/AVvXsEg0bjVznUfg1nwCKsIfNG5w98uWHjiFnYU91RKKpoVLWYqpIibBkTfl0c19jzQkaCBitQ1d21uHLqqVUL-ty8Mkymbo2S_VPbkMtOqBCZYnRoU1F1VuiI2JeYeYpxnHmqWDgaH9oe4TiSJe/';}
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>

7. Simpan templete anda.

8. Selanjutnya Copy Kode di bawah ini dan pastekan pada HTML/Javascript.

<script type='text/javascript'>var numposts = 4;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 70;</script> <script type="text/javascript" src="/feeds/posts/default/-/Cilumus?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

Keterangan:

* Angka 4 berwarna orange di atas adalah jumlah dari sub label katagori yang di munculkan di label thumbnail ini.

* Tulisan Cilimus berwarna hijau adalah nama label yang  ingin di munculkan di label thumb. Jika label tersebut memiliki lebih dari satu kata, tambahkan %20 contohnya Hacking%20Blogspot.

* Tulisan 70 berwarna biru adalah jumlah karakter snippet postingan yang akan tampil pada widget ini.

Selesai dan semoga bermanfaat.....