Pada Postingan Kali ini Saya Kembali Posting Artikel Tutorial Blogger Yakni Tutorial Membuat Label Thumbnail Dan Mungkin Sobat Blogger Selama ini Sudah Menjumpai Beberapa Model Label Pada Suatu Blog Seperti Label Text, Label Cloud Dan Label Cloud Berputar. Nah Sekarang Saya Akan Jelaskan Cara Membuat Gatget Label Menggunakan Thumnail (gambar) Dan Untuk Contoh Bisa Dilihat Dibawah.
Gimana Tertarik? Oke Mari Kita Simak Lansung Tutorial Pembuatannya Berikut.
Gimana Tertarik? Oke Mari Kita Simak Lansung Tutorial Pembuatannya Berikut.
- Silahkan Login Ke Akun Blogger Sobat.
- Masuk Rancangan Dan Pilih Edit HTML Lalu Centang Expand Template Widget.
- Cari Kode ]]></b:skin> Dan Taruh Kode Berikut Diatasnya.
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 }
Kode Yang Berwarna Biru Adalah Lebar Dan Tinggi Gambar Thumbnail, Silahkan Sobat Edit Sesuai Selera Sobat.
- Kemudian Taruh Kode Berikut Dibawah Kode ]]></b:skin> Tadi.
<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>
- Setelah Itu Simpan Template.
- Kemudian Masuk Ke Elemen Laman Dan Tambah Gatget Lalu Pilih HTML/JavaScript
- Masukan Kode Berikut Pada Kolom Kosong HTML/JavaScript.
<script type='text/javascript'>var numposts = 8;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Software?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
Kode Yang Berwarna Merah Adalah Jumlah Item Yang Akan Ditampilkan Dan Kode Yang Berwarna Merah Adalah Nama Lebel, Silahkan Sobat Ganti Dengan Nama Label Yang Ingin Sobat Tampilkan Dan Nama Harus Sesuai Atau Sama Dengan Label Sobat.
- Simpan Dan Mari kita Lihat Hasilnya.
Sekian Tutorial Kali ini Dan Silahkan Tinggalkan Komentar Untuk Pertanyaan Dan Keluhan. Terima Kasih....
No comments:
Post a Comment