Cara Mudah Membuat Daftar Isi Dari Label Dengan Satu Thumbnail/Gambar Postingan

Widget Recent Post Per Label dengan Satu Thumbnail - Cara Mudah Membuat Daftar Isi Dari Label Dengan Satu Thumbnail/Gambar Postingan. Jika Anda lihat pada template blog ini, di bagian footer pada template ini terdapat widget yang menampilkan label dengan susunan satu judul dengan thumbnail dan summary, dan dibawahnya list dari label yang sama tetapi hanya menampilkan judulnya saja. Langsung saja untuk Cara membuatnya adalah sebagai berikut :

Pertama yang mesti Anda lakukan adalah login ke blogger dengan akun Anda
Setelah itu pilih blog yang ingin anda tambahkan widget ini.
Masuk ke template >>
Edit HTML, kemudian centang expand widget templates
Untuk berjaga-jaga agar tidak terjadi kesalahan dalam pengeditan nantinya, backup dulu template anda.
Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></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}

NB:Apabila anda mengunakan Template Ya sudah di modifikasi ....
Hapus Secript di Atas....
Contohnya Seperti Template Yang Saya Gunakan Ini....

Perhatikan tulisan warna biru diatas, itu adalah lebar dan tinggi thumbnail image.
Selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :

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

Setelah itu save templates,
Kemudian menuju ke layout pilih kotak yang akan ditambahkan widget ini.
Klik add gadget >> HTML/Javascript masukkan kode berikut ini kedalamnya :

<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="/feeds/posts/default/-/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://acer-c4yber-copas.blogspot.com/feeds/posts/summary/-/news?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
<a href="http://acer-c4yber-copas.blogspot.com/search/label/news" style="float:right;font:normal 11px Arial;padding:5px 0;">Selanjutnya &#187;</a>

Keterangan :
Warna biru : adalah label atau kategori yang ditampikan, Anda bisa menggantinya dengan label anda sesuaikan dengan kebutuhan.
Warna Kuning : Ganti URL dengan URL blog anda.

Selanjutnya save dan lihat hasilnya.

NB :>> Shabatku Dalam hidup terkadang kita mendapatkan banyak apa yang tidak kita inginkan,,Tapi setelah kita mendapatkan apa yang kita inginkan,Terkadang tidak bisa membuat hidup kita lebih bahagia....
Dan mencari teman buatku sangat mudah...Tapi teman yang paling istimewa dan yang paling aku sukai adalah...?Teman Yang Mau menunjuukkan kesalahanku.......?
Untuk itu Berilah komentar,Karena kritik dan saran Sahabat Sangat saya Butuhkan.....

Terima kasihh........................................