AABI‍TALITA BLOG
12.30.2012

Membuat Widget Label Dengan Satu Thumbnail

Kali ini saya mencoba berbagi satu lagi tutorial blogger tentang membuat widget berdasarkan label dengan hanya satu thumbnail yang berada di bagian atas sedangkan  pada bagian bawah  hanya menampilkan judulnya saja,untuk lebih jelas sobat bisa lihat screenshot gambar dibawah ini.


Biasanya widget seperti ini banyak digunakan oleh blog yang memiliki konten berita, salah satu fungsi widget ini untuk memudahkan para pembaca untuk mengeksplorasi tiap kategori yang ada dan bisa juga untuk meringkas ruang pada sebuah template. Cara membuat widget per label yang di gunakan disini sebenarnya mudah dan hanya menggabungkan antara tutorial membuat label atau kategori dengan thumbnail dan membuat widget label yang hanya menampilkan judul saja.

nah sekarang bagaimana cara membaut widget seperti screenshot diatas,berikut langkah langkahnya :

1. Masuk dulu ke Dashboard atau ke akun blogger sobat.
2. Terus pilih Layout  dan  Edit HTML
3. Sebelumnya ada baiknya sobat  Download Full Template dulu sebagai backup jika ada masalah.
4. Kalau sudah, sobat cari kode ]]></b:skin>
5. Kemudian letakan kode berikut diatas ]]></b:skin>

Kode 1:
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}

Warna biru diatas adalah lebar dan tinggi thumbnail image.
6. Selanjutnya masih pada posisi Edit HTML, cari kode </head> dan jika sudah ketemu copas kode berikut diatasnya:

Kode 2:
<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://2.bp.blogspot.com/_IKigl6y9hFA/TMdcT1jzo5I/AAAAAAAAAHA/hAKuT9rJpFU/noimage.jpg';} 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. Setelah itu save templates sobat, kemudian masuk ke layout pilih kotak yang akan ditambahkan widget ini. Klik add gadget >> HTML/Javascript dan copas kode berikut kedalamnya :

Kode 3:
<script type="text/javascript">var numposts = 1;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 60;</script> <script src="/feeds/posts/default/-/kesehatan?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs" type="text/javascript"></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> <script src="http://abitalita.blogspot.com/feeds/posts/summary/-/kesehatan?max-results=6&amp;alt=json-in-script&amp;callback=recentpostslist"></script> <a href="http://abitalita.blogspot.com/search/label/kesehatan" style="float: right; font: normal 11px Arial; padding: 5px 0;">More on this category »</a>


  • Silahkansobat ganti teks wara merah dengan URL blog sobat dan teks warna biru dengan nama label  sobat.
  • Tampilan dari widget ini mengikuti kode CSS sidebar (jika sobat meletakkan di sidebar) pada template yang sobat pakai. Kode CSS yang digunakan pada pembuatan widget ini hanya digunakan untuk mengatur tampilan thumbnail.

8. Selanjutnya Save Tempalte dan lihat hasilnya.
Lihat sumbernya disini

2 komentar

kok cuma 1 post yang nongor tidak kanyak di demo

numposts =1 ganti angkanya kang

Terima kasih atas kunjungannya, silahkan berkomentar sesuai topik. Menuliskan link aktif tidak akan ditampilkan dalam komentar.Terima Kasih.