Widget Artikel Perlabel Dengan Thumbnail - biasanya di pakai untuk membuat atau membagi artikel yang akan display di homepage sesuai kategori. Banyak blogger yang kurang tertarik pakai beginian, mungkin mereka lebih suka dan simple pakai label bawaan blogger atau arsip, tapi jika dilihat dari segi penampilan blog, cara ini sangat menarik kenapa, blog akan berpenampilan Megazine (Majalah) yang namanya tampilan majalah yang saya tahu pasti keren.
Letakkan di atas ]]></b:skin>
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}Letakan di atas </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/AVvXsEicIOZtsMrb-McNiRbKmWxQueZ5-jUWEBZJdUmtJMZ2zarHy3YTg4eCoCwh7B9VnuJg0M4QhSbFHZS4emHNDDmiC-nv5JLAYFMVrVSrHj80M6GKsiZenwdtP3pFd0SJnKrarSSbkjhC3xSy/';}
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>
Kalau pengen pakai yang udah di kompresi...letakkan di atas kode </head>.
<script src='http://yourjavascript.com/425111422721/label.js' type='text/javascript'/>
Simpan Template. Lalu kita masuk ke Layout Pilih Gadget kemudian pilih HTML/Javascript.
Sekarang kamu masukkan kode di bawah ini di dalam gadget anda..
<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 = 60;</script>
<script type="text/javascript" src="http://URL BLOG/feeds/posts/default/-/LABEL BLOG ANDA?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>
<a href="URL LABEL ANDA" style="float:right;font:normal 11px Coda;padding:5px 0;">More on this category »</a>
Okey, udah beginian aja ya....
Lihat demonya...
![[MV/PV] HKT48 - Melon Juice](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFLyOvHhKv9ll-7Q1PgGLzngAGad0tc1TRv5gmdjsbRQPRyNP-8z-3wIZK8kNZ8P-RVLMYChTVi_m72yGQTHO2cOp9xvjX6RdJmBM7ftZkLgl2llXQl7YTH213tXR7YOT4pFLJr_NPJNQ-/s1600/MelonJuice_MV04.jpg "[MV/PV] HKT48 - Melon Juice")
![[MV/PV] BABYMETAL - Ijime, Dame, Zettai](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsjGcPudmiHKltzg0pU5zXFqMg0WtKqTnrM7pvMYJQCXLs2bZ2SdtoOVx0XMlm_hPVe24jymtzHSQxbBGvjbeClsA24mkpndSAUVXdXbXQ5rhKdgL2wYn-fC0jwraNmwFL6lXMPOrNQaid/s1600/Ijime%252C+Dame%252C+Zettai.mkv_thumbs_%255B2013.11.06_01.22.54%255D.jpg "[MV/PV] BABYMETAL - Ijime, Dame, Zettai")