Cara Membuat Kategori Label dengan Thumbnail Saja
Membuat kategori dengan Thumbnail merupakan modifikasi yang saya buat
tanpa harus melakukan edit HTML template blog, hal ini bertujuan agar
memudahkan anda untuk menghapus atau mengedit kode-kode yang terdapat di
dalamnya. Untuk memunculkan atau menyembunyikan tampilan widget ini
dapat anda lakukan sesuai dengan keinginan, silahkan baca (Cara Menampilkan Widget Sesuai Keinginan).
Cara Membuat Kategori Label dengan Thumbnail Saja merupakan
modifikasi yang dapat anda terapkan dengan mudah dan sederhana, soalnya
tugas anda cukup copy dan paste kode yang akan saya paparkan di bawah
kemudian anda letakkan pada kolom Widget yang anda inginkan. Berikut
penjelasannya:
2. Masuk dan pilih menu Tata Letak
3. Klik tambahkan Gadget
4. Pilih HTML/Javascript
5. Copy kode Script di bawah ini
<style>
img.label_thumb {
float:center;
padding:3px;
background:#A7F7A4;
border:1px solid #A4A4A4;
width:100px;
height:100px;
margin-right:5px;
margin-left:5px;
margin-top:5px }
img.label_thumb:hover {
opacity:0.8;
filter:alpha(opacity=80);
-moz-opacity:0.80;
-khtml-opacity:0.8 }
</style>
<script type='text/javascript'>
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/-/Desain?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
|
7. Lihat hasilnya
Keterangan
- feeds/posts/default/-/Desain? (silahkan isi dengan label anda)
- var numposts = 6 (Ganti angka untuk jumlah yang tampil)
- Modifikasi sendiri tampilan kategorinya pada kode CSS
Demikian artikel tentang Cara Membuat Kategori Label dengan Thumbnail Saja, semoga bermanfaat bagi saya dan kita semua. Terima Kasih!!.
