Widget Artikel Perlabel Dengan Thumbnail

Widget Artikel Perlabel Dengan Thumbnail | Lama banget, ngisi nih rumah, sampai - sampai banyak sarang laba - laba juga kecoak keliaran disini. Yah, gimana lagi rumah jauh dari kota, ga ada internet, mau jalan ke kota harus menempuh jalan 10km, aduh aduh,,ini di warnet malah basah kuyup, sorry tadi kehujanan. Sebelum main DOTA, ada request dari teman, masalah Widget Artikel Perlabel Dengan Thumbnail. Sebelum nyimak, siapin warkey dulu ah...

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 &#187;</a>

Okey, udah beginian aja ya....

Lihat demonya...

Mega AKB48         Mega JKT48