Sodara sodara masih bersama saya Noval Bintang di blog Hack4rt. Kali ini saya akan memberikan tutorial Cara Membuat Widget Label dengan Gambar Thumbnail. Apasih widget label itu? Widget label yang dimaksud di sini yaitu widget yang berisikan daftar artikel berdasarkan label tertentu dengan gambar thumbnail setiap artikelnya. Contoh widget nya yaitu seperti gambar di atas.
CSS
Letakkan sekumpulan kode berikut tepat di atas ]]></b:skin>
img.label_thumb{padding:2px;border:1px solid #e8e8e8;transition:all 0.15s ease-in-out 0s;position:absolute;top:0;left:0;float:left;height:46px;width:56px;opacity:10;}img.label_thumb:hover{background:#FFD62C;border:1px solid #FFD62C;}.label_with_thumbs{float:left;width:100%;min-height:60px;margin:0;padding:0;}ul.label_with_thumbs li{padding:0 0 3px 68px;position:relative;min-height:53px;margin:0 0 6px 0;border-bottom:1px dotted #e2e2e2;}ul.label_with_thumbs li:last-child{border-bottom:none;}.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;}
Javascript
Letakkan kode berikut tepat 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='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 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>
Widget
Buatlah sebuah widget baru dengan HTML, dan isikan kode berikut
<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>Gantikan kata yang berwarna merah dengan nama label kamu.
<script type="text/javascript" src="/feeds/posts/default/-/Bola?published&alt=json-in-script&callback=labelthumbs"></script>
Loh kok di DEMO nya ada recent post seperti itu? Caranya bagaimana? Isikan widgetnya dengan default, bukan label. Jadi seperti berikut isi widget
Widget
<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?published&alt=json-in-script&callback=labelthumbs"></script>
Tidak ada yang harus diganti.
Keterangan variable
numposts = jumlah post yang muncul
displaymore = readmore
showcommentnum = memunculkan jumlah komentar
showpostsdate = memunculkan tanggal artikel
Sebenarnya widget ini bisa dijadikan otomatis dengan ramuan javascript sehingga tidak akan ribet dalam pengisian widget. Jika otomatis, pengisian widget hanya dengan nama label tanpa javascript lagi. Mungkin akan saya share beberapa waktu lagi.