Blog Geisha

Cara Membuat Label Dengan Thumbnail - berbeda dengan label yang umumnya berbentu text, kali ini Kang Koisine akan membagi tutorial tentang membuat label dengan fitur gambar dengan tampilannya yang simple dan menarik saya rasa bagus untuk dipasang pada blog, selain itu menarik perhatian pengunjung yang melihatnya, pemasnganya juga sangat mudah asalkan kalian dengan teliti mengikuti langkah-langkah yang telah diberikan berikut ini.

• Pertama login terlebih dashulu ke Blogger kalian,
• Pilih Rancangan,
• Pilih Edit Html,
• Note : ceklist Expand Template Widget,
• Letakan kode di bawah ini sebelum kode ]]></b:skin>

img.label_thumb {
float:left;
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 } 

• Kemudian letakan kembali kode di bawah ini sesudah kode ]]></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>