Label Dengan Thumbnail

Label pada blog dapat di katakan sebagai kategori. Dan fungsi label adalah mengelompokkan postingan berdasarkan kategori.



Beberapa hari yang lalu saya pernah posting cara membuat label dengan thumbnail bulat efek berputar.

Tutorial kali ini tentang label dengan thumbnail kotak simpel.



Caranya,simak yang berikut:

1. Login blog

2. Template > Edit html

3. Letakkan kode css berikut di atas  ]]></b:skin>

img.label_thumb {

float:center;

padding:3px;

background:#CCC;

border:1px solid #A4A4A4;

width:100px;

height:75px;

margin-right:10px;

margin-top:10px }



img.label_thumb:hover {

opacity:0.8;

filter:alpha(opacity=80);

-moz-opacity:0.80;

-khtml-opacity:0.8 }

4. Tambahkan kode script di bawah  ]]></b:skin>

<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>

5. Simpan template

6. Masuk ke layout > HTML/JAVASCRIPT

7. Copast kode berikut

<script type='text/javascript'>var numposts = 6;</script>

<script type="text/javascript" src="/feeds/posts/default/-/Blogging?orderby=updated&alt=json-in-script&callback=labelthumbs"></script> 

Note:

* var numposts = 6 adalah jumlah thumbnail yang akan di tampilkan

* ... /feeds/posts/default/-/Blogging?.... adalah nama label yang akan di tampilkan



8. simpan dan lihat hasilnya.