Terwujud
KomTer,Komik Online
Smartphone Mainbitcoin

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:

Thumbnail-Terwujud.com
1. Login ke www.blogger.com
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>


6. Paste kode script di atas dan letakkan pada kolom widget
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!!.

Mau Artikel Gratis! Silahkan Tulis Email Anda.
Print PDF
Next
« Prev Post
Previous
Next Post »

5 komentar

siip gan.. ntar ane coba cara membuat kategori nya.. :)

Balas

Silahkan dilaksanakan mas irpan. terima kasih

Balas

Keren juga hasilnya, sayangnya blog saya udah ada dari bawaannya.

Balas

Bisa kok pak ustadz di modifikasi, :D

Balas

saya pasang di blog saya kok gak bisa gaaan ... gmna nih

Balas

Saya akan sangat senang jika ada komentar yang membangun, tetapi:

*Jangan komentar SPAM
*Jangan menanam link
*Jangan ada unsur sara, Fornografi dan memojokkan

Komentar yang melanggar akan dimasukkan kedalam daftar SPAM dan tidak akan diijinkan lagi.

Icon:
:) ^_^ :D =D (smile dan tertawa)
:( =( (marah dan Bingung)
:-bd :-d (oke)
|o| (tepuk tangan)

By: Terwujud.com
Terima Kasih!!

Copyright © 2014. Terwujud.com | Sumber Informasi Terpercaya - All Rights Reserved | Template Created by Kompi Ajaib | Modified by Ibrahim Lubis