Keinginan para blogger pasti salah satunya adalah blognya tampil menarik dimata para pengunjungnya karena jika tampilanya menarik akan membuat betah pengunjung berlama-lama melihat blog anda dan membuatnya sering kembali mengunjungi blog anda ,nah berikut saya akan share sebuah artikel untuk mempercantik blog kamu semoga bermanfaat ya buat kamu . Berawal dari keinginan saya supaya blog saya kelihatan menarik seperti situs-situs berita besar yang tampilannya memiliki gambar kecil disertai potongan artikel yang dikelompokkan berdasar label tertentu ,akhirnya saya temukan cara  di situs kucoba.com yaitu cara membuat label dengan thumbnail otomatis yang dilengkapi dengan    potongan artikelnya .

Berikut adalah cara dan langkah-langkah untuk membuatnya :

• Login Blogger > Rancangan / Layout > Edit HTML > Centang "Expend Widget"

• Silakan copy kode dibawah ini dan letakkan tepat di atas </head>

<!-- Label With Thumbnail -->
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(w){document.write('<ul class="label_with_thumbs">');for(var v=0;v<numposts;v++){var f=w.feed.entry[v];var g=f.title.$t;var z;if(v==w.feed.entry.length){break}for(var r=0;r<f.link.length;r++){if(f.link[r].rel=="replies"&&f.link[r].type=="text/html"){var n=f.link[r].title;var o=f.link[r].href}if(f.link[r].rel=="alternate"){z=f.link[r].href;break}}var j;try{j=f.media$thumbnail.url}catch(q){s=f.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!="")){j=d}else{j="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjcTaGpWaSnXjpeMHuYrsKPkrFsaapLwfSky8nK-Q4rPQJotKLfo6VnV29I3CxCaqBtOkIQxaFW3p95Q95CqLvPvvZsWfNvfqSO5SCKB3t3NBs2ZzHRzc8-raU0BGk0UElnCZPvbDSxdE/s1600/no_image.jpg"}}var x=f.published.$t;var m=x.substring(0,4);var l=x.substring(5,7);var t=x.substring(8,10);var h=new Array();h[1]="Jan";h[2]="Feb";h[3]="Mar";h[4]="Apr";h[5]="May";h[6]="Jun";h[7]="Jul";h[8]="Aug";h[9]="Sep";h[10]="Oct";h[11]="Nov";h[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true){document.write('<a href="'+z+'" target ="_top"><img class="label_thumb" src="'+j+'"/></a>')}document.write('<strong><a href="'+z+'" target ="_top">'+g+"</a></strong><br>");if("content" in f){var y=f.content.$t}else{if("summary" in f){var y=f.summary.$t}else{var y=""}}var p=/<\S[^>]*>/g;y=y.replace(p,"");if(showpostsummary==true){if(y.length<numchars){document.write("");document.write(y);document.write("")}else{document.write("");y=y.substring(0,numchars);var e=y.lastIndexOf(" ");y=y.substring(0,e);document.write(y+"...");document.write("")}}var A="";var u=0;document.write("<br>");if(showpostdate==true){A=A+h[parseInt(l,10)]+"-"+t+" - "+m;u=1}if(showcommentnum==true){if(u==1){A=A+" | "}if(n=="1 Comments"){n="1 Comment"}if(n=="0 Comments"){n="No Comments"}n='<a href="'+o+'" target ="_top">'+n+"</a>";A=A+n;u=1}if(displaymore==true){if(u==1){A=A+" | "}A=A+'<a href="'+z+'" class="url" target ="_top">More »</a>';u=1}document.write(A);document.write("</li>");if(displayseparator==true){if(v!=(numposts-1)){document.write("")}}}document.write("</ul>")};
//]]>
</script>

• Setelah selesai, kemudian cari kode kata sidebar content setelah ketemu letakan kode berikut tepat di bawahnya:

/* 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/AVvXsEhB-4tfs7wGRlODp2mDq0yKoBgSAsHxgRPp2AdsJp2r97W3Y_h-7KH8vZT99kLQGRM1PUv_PZSZAaonayjAB4v9G13bdgzVOw8pyYy32CQumzao45ZCxuRiD8CvXYabJbsaSic-AXWhflFy/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/AVvXsEhB-4tfs7wGRlODp2mDq0yKoBgSAsHxgRPp2AdsJp2r97W3Y_h-7KH8vZT99kLQGRM1PUv_PZSZAaonayjAB4v9G13bdgzVOw8pyYy32CQumzao45ZCxuRiD8CvXYabJbsaSic-AXWhflFy/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;}

• Simpan template
• Selanjutnya kamu silakan buka Rancangan > Add Widget > Pilih HTML/Javascript 
• Copy paste kode di bawah ini lau simpan di HTML/Javascript tadi:

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

Artikel Terkait :