B.S.R

Membuat Widget Kategori dengan 1 Thumbnail, setelah artikel terdahulu saya share Membuat widget Kategori Ala website portal nah tutorial ini pada intinya sama seperti tutorial tersebut namun yang membedakan yaitu pada pemasangannya, pada tutorial ini pemasangannya sangat mudah karena kita bisa menempatkan widget kategorinya pada Gadget bawaan secara langsung, jadi kita bisa memasang dimana saja sesuai selera kita baik itu disidebar maupun dibawah postingan. kalau pada tutorial terdahulu kita memasang widget khusus dibawah postingan saja, namun pada widget sekarang apabila mau menambahkan dibawah postingan template sobat harus sudah ada gadget dibawah postingan terlebih dahulu, mungkin kalau yang templatenya masih bawaan blogger sobat tinggal menambahkan pada atur tata letak sehingga bisa menambahkan 2 atau 3 gadget dibawah postingan. Namun apabila template sobat sudah dirubah dan pengaturan tata letak sudah tidak berfungsi maka harus menambahkan gadget terlebih dahulu. nah buat sobat yang mau menambahkan gadget dibawah postingan atau diatas postingan baca di Membuat 2 kolom dibawah Postingan II

Langkah-lankahnya:

• Seperti biasa saja login ke blogger
• klik rancangan/template jangan lupa setiap mau ngedit HTML download lengkap dulu ya sobat, buat jaga-jaga aja. kalau ada salah tinggal ngembaliin, alasannya.
• Klik edit HTML klik lanjutkan  kemudian cari kode ]]></b:skin> setelah ketemu letakan kode dibawah ini tepat diatas kode tersebut.

img.label_thumb{float:left;border:1px solid #8f8f8f;background:#C0C0C0;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}

• Klik edit HTML klik lanjutkan  kemudian cari kode </head> setelah ketemu letakan kode brikut ini tepat diatas kode tersebut.

 <script src='http://my-project-favicon.googlecode.com/files/Kategorywiththumb.js' type='text/javascript'/>

• Simpan template sobat

• Masih pada halaman blogger
• Pilih Rancangan > Elemen laman > Tambah Gadget> HTML/Javascript
• Copy kode dibawah ini pada kota HTML/Javascript

<script type='text/javascript'>var numposts = 1;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="http://hnvernalin.blogspot.com/feeds/posts/summary/-/news?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
<script type="text/javascript">
function recentpostslist(json) {
 document.write('<ul>');
 for (var i = 1; i < json.feed.entry.length; i++)
 {
    for (var j = 1; j < json.feed.entry[i].link.length; j++) {
      if (json.feed.entry[i].link[j].rel == 'alternate') {
        break;
      }
    }
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>";
 document.write(item);
 }
 document.write('</ul>');
 }
</script>
<script src="http://hnvernalin.blogspot.com/feeds/posts/summary/-/news?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
<a href="http://hnvernalin.blogspot.com/search/label/news" style="float:right;font:normal 11px Arial;padding:5px 0;">Artikel lain Kategori ini &#187;</a>