Kali ini aku tulis akan coba menulis tentang cara membuat widget blog berupa tampilan related post per label, tetapi related post per label kali ini lain, lainnya adalah seperti biasa related post yang tampil hanya judul saja namun kali ini kita akan coba membuatnya dengan tampilan gambar saja dan ini sangat cocok untuk blog film.
OK, langsung saja kita coba dan teman-teman ikuti saja ya....
Tahap pertama seperti biasa, pasti sudah pada tahu cara memasang widget baru pada blog? caranya masuk ke dashboard blog lalu pilih menu tata letak.
Kemudian tambah gadget lalu pilih menu HTML/JavaScript seperti gambar dibawah ini
Setelah itu pastekan code berikut kedalamnya
<style>
/*** Labels Thumbs ***/
img.label_thumb{
float:left;
border:1px solid #ccc;
width:85px;
height:70px;
margin-right:10px;
margin-bottom:10px;
}
</style>
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<div>');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='';}
document.write('<a href="'+posturl+'" title="'+posttitle+'"><img class="label_thumb" src="'+thumburl+'"/></a>');
if(i!=(numposts-1))
document.write('');}
document.write('</div>');}
//]]>
</script>
<script type='text/javascript'>var numposts = 6;</script>
<script type="text/javascript" src="/feeds/posts/default/-/NamaLabel?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
Selanjutnya, ganti tulisan cetak tebal sesuai keinginan anda
angka 6 adalah jumlah artikel dalam widget
NamaLabel adalah label yang akan dipasang pada widget
selanjutnya kita akan coba membuat label menjadi 2 baris, lihat caranya disini
Rating: 5
Title: 