Cara Membuat Daftar Isi Perlabel atau Category

Cara Membuat Daftar Isi Perlabel atau Category - Banyak nya label yang ada didalam blog kita tentu saja akan membuat pengunjung sedikit bingung dan diantara label yang ada tentu saja ada label favorit yang ingin kita tampilkan di halaman depan blog kita.

Berikut ini akan kita bahas cara membuat daftar isi perlabel berikut langkah-langkahnya :

1. Login ke akun blog.

2. Ambil Menu Template => Edit HTML

3. Cari kode ]]></b:skin>  jika sulit gunakan Ctrl+F

4. Letakkan kode berikut tepat diatas nya.

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}

5. Cari Kode </head> dan letakkan kode berikut tepat diatasnya.

<script src='http://sibarasok-javascript.googlecode.com/files/label-thumb.js' type='text/javascript'/>

6. Simpan template dan Ambil Menu Tata Letak.
7. Ambil Add Widget atau gedget Pilih HTML/JavaScript pastekan kode berikut 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/-/Tutorial?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://www.kiat-cara.com/feeds/posts/summary/-/Tutorial?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
<a href="http://www.kiat-cara.com/search/label/Tutorial" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category &#187;</a>

Ganti tulisan berwarna biru sesuai label atau category yang akan ditampilkan

8. Simpan dan lihat hasilnya.

Jika ingin menampilkan daftar isi seluruhnya, silahkan pastekan kode berikut : 
<div style="overflow:auto;width:98%;height:300px;padding:10px;border:1px solid #eee"><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?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://www.kiat-cara.com/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=recentpostslist"></script>

Ganti tulisan berwarna biru sesuai alamat website atau blog kita masing-masing. kemudian simpan widget nya dan lihat hasilnya.

Semoga bermanfaat.