06.54
Unknown
Pada kesempatan kali ini saya akan membuat tutorial tentang bagaimana membuat label dengan gambar Hover. Dengan widget ini label kita bisa lebih rapi dan enak di pandang dan kelihatanya elgant.
Caranya sebagai berikut:
1. Pertama masuk dulu ke akun Blogger
2. Lalu klik RANCANGAN klik Edit HTML
3. Jangan lupa centang Expand Widget Template atau backup template.
4. Lalu cari kode ]]></b:skin> agar lebih mudah mencari kode tekan ctrl+F
5. Setelah ketemu letakan kode dibawah ini dan letakan sebelum kode
]]></b:skin>
img.label_thumb {
float:left;
background:#CCC;
border:1px solid #A4A4A4;
width:100px;
height:75px;
margin-right:10px;
margin-top:10px;
padding:3px
}float:left; => Posisi widget (left, center, right)
background:#CCC; => Warna latar belakang
border:1px solid #A4A4A4; => Ukuran bingkai dan warna
width:100px; => Lebar widget
height:75px; =? Tinggi widget
6. Letakkan kode dibawah ini setelah <head>
<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>
7. Simpan Template.
8. Langkah selanjutnya agar Label Gambar tampil pada sidebar blog Anda,
- masuk ke Tata Letak => Tambah Widget => HTML/Javascript.
- Selanjutnya letakan kode script pemanggilnya di bawah ini
<script type='text/javascript'>var numposts = 6;</script>
<script type="text/javascript" src="/feeds/posts/default/-/template?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
Demikian cara membuat label dengan thumbnail (gambar)
Semoga bermanfaat.
Sumber: yyulio.blogspot.com
Posted in:
Blogger Tutorial
0 komentar :
Posting Komentar