Membuat Widget Kategori Tertentu Dengan Thumbnail

Widget Kategori Tertentu Dengan Thumbnail Pada Blog, masi seputar pembahasan tentang widget jika sebelumnya saya telah membahsa tentang Widget Live Scor Pada Blog disini saya akan coba membahas tentang widget perlabel.

Sedikit saja saya akan jelaskan arti dari kata kategori ya, karena saya rasa sebagian besar dari kita hanya mengenal tentang kategori sedangkan arti dari kata kategori tersebut sebagian besar belum tahu termasuk saya.

Menurut terminologi bahasa Kategori/Label adalah bagian dari sistem klasifikasi (Golongan, Jenis perangkat, Negara, dsb). Kategori/Label yang berasal dari bahasa Inggris mempunyai makna deskripsi singkat yang diberikan untuk tujuan identifikasi. Kategori/Label merupakan penanda mengidentifikasi atau deskriptif yang melekat pada suatu objek. Itulah sedikit tentang Arti kata Kategori/Label, kembali pada inti pembahasan artikel.

Widget Kategori Tertentu Dengan Thumbnail

Pasti Anda sering menjumpai widget perlabel seperti inikan baik itu pada blog Personal maupun blog magazine, contohnya seperti pada halaman depan blog ini. Seperti yang pernah dibahas oleh sang master template yang bernama Mas Kolis pada blog yang satunya (maskolis.com) widget ini berfungsi untuk mengelompokkan label tertentu agar lebih membantu pengunjung blog untuk mencari kategori-kategori yang ada pada web maupun blog Anda dengan mudahnya.

Baiklah, kita langsung saja pada langkah-langkah pembuatannya :

Pertama letakkan code berikut ini tepat di atas ]]></b:skin>

img.label_thumb{float:left;border:1px solid #8f8f8f;background:#D2D0D0;margin-right:10px;height:60px;width:60px;padding:2px}
img.label_thumb:hover{background:#f7f6f6}
.label_with_thumbs{float:left;width:100%;min-height:70px;margin:0 5px 2px 0}
ul.label_with_thumbs li{min-height:65px;margin:2px 0;padding:4px 0}

Kedua, Letakkan Code JavaScript dibawah ini tepat diatas </head>

<script src='http://fianetmucode.googlecode.com/files/labels.js' type='text/javascript'></script>

Save template, selanjutnya menuju pada tata letak. Tambahkan Gadget Html/Javascript dan masukkan code pemanggil didalamnya di bawah ini

<script type='text/javascript'>var numposts =6;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 60;</script> 

<script type="text/javascript" src="/feeds/posts/default/-/Tutorial?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs"></script>

Keterangan :
Numposts =6 adalah jumlah postingan yang akan ditampilkan sedangkan Tutorial ganti dengan nama label pada blog Anda.

Jika ingin menambahkan Selengkapnya tambahkan script di bawah ini tepat di bawah code pemanggilnya di atas

<a href="URL LABEL" style="float:right;font:normal 11px Coda;padding:5px 0;" title="Selengkapnya">Selengkapnya &#187;</a>

Keterangan : Ganti URL LABEL dengan Url Pada Label Anda.

 

sumber : fianetmu.com