Cara Membuat Daftar Isi Berdasarkan Label

Cara membuat daftar isi berdasarkan label - Untuk membuat daftar isi per label dengan scroll box di sidebar blog, kita dapat menggunakan dua cara. Cara yang pertama adalah dengan membuatnya secara manual. Sedangkan cara yang kedua kita bisa menggunakan sebuah script. Setiap cara memiliki kelebihan dan kekurangannya masing-masing.

Bila kita membuat daftar isi secara manual, maka kita harus memasukkan link dari judul-judul posting satu per satu. Hal ini akan membutuhkan banyak waktu untuk mengerjakannya jika link judul posting yang harus dimasukkan sudah cukup banyak. Namun, dengan cara manual ini tidak begitu memperlambat loading blog.

Sedangkan jika kita menggunakan sebuah script, maka waktu yang diperlukan akan lebih singkat. Namun, pemasangan script ini berpotensi memperlambat loading blog. Script ini saya dapat dari Blog Viky dengan perubahan di bagian scroll box-nya. Dengan script ini kita dapat membuat daftar isi berdasarkan satu label saja atau beberapa label sekaligus. Script ini akan menempatkan posting terbaru pada urutan teratas.

Untuk membuat daftar isi berdasarkan satu label tertentu saja, silakan perhatikan langkah-langkahnya di bawah ini.

Cara Membuat Daftar Isi Berdasarkan Label (1 Kategori) 

1. Setelah Sobat masuk di Blogger, klik Rancangan > Elemen Laman > Tambah Gadget. Kemudian pilih HTML/JavaScript.

2. Berikan judul, lalu copy kode di bawah ini dan paste di Konten.

<div style="overflow:auto; width:auto; height:100px; padding:5px; border:1px solid#e6e4e3;"><ol><script style="text/javascript">var numposts = 100;var standardstyling = true;</script><script type='text/javascript' src='http://mr-form.googlecode.com/files/label-post.js'></script>
<ol><script src="http://davizs.blogspot.com/feeds/posts/default/-/Tutorial%20Blogspot?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script></ol></ol></div>

• width:auto; menunjukkan lebar scroll box akan mengikuti lebar sidebar.
• height:100px; menunjukkan tinggi scroll box setinggi 100 piksel. Silakan diganti angkanya untuk mengubah tingginya.
• border:1px solid #e6e4e3; menunjukkan garis keliling (border) scroll box bergayasolid setebal 1 piksel berwarna #e6e4e3. Silakan disesuaikan dengan keadaan template Sobat.
• <ol> menunjukkan numbered list, kalau ingin menjadi bullet list silakan diganti dengan <ul>.
• Ganti davizs.blogspot.com dengan alamat blog Sobat.
• Ganti Tutorial%20Blogspot dengan label yang Sobat inginkan. Penulisan label harus sesuai dengan yang tertera di blog. Perhatikan huruf besar-kecilnya dan spasi diganti dengan %20.

3. Klik tombol SIMPAN.

4. Pindahkan elemen tadi ke tempat yang Sobat inginkan.

5. Klik tombol SIMPAN.

Script di atas hasilnya akan menjadi seperti di sini (Klik untuk Demo)

Cara Membuat Daftar Isi Berdasarkan Label (Multi Kategori)

Jika ingin menampilkan lebih dari satu label, silakan ditambahkan script untuk labelnya. Misalnya saya akan menampilkan label SEO dan Tutorial Blogspot maka script-nya akan menjadi seperti di bawah ini.

<div style="overflow:auto; width:auto; height:100px; padding:5px; border:1px solid#e6e4e3;">
<ol>
<script style="text/javascript">
var numposts = 100;
var standardstyling = true;
</script>
<script type='text/javascript' src='http://mr-form.googlecode.com/files/label-post.js'></script>
<h3>SEO</h3>
<ol>
<script src="http://davizs.blogspot.com/feeds/posts/default/-/SEO?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script></ol><br/>
<h3>Tutorial Blogspot</h3><ol>
<script src="http://davizs.blogspot.com/feeds/posts/default/-/Tutorial%20Blogspot?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script></ol>
</ol></div>

Script di atas hasilnya akan menjadi seperti di sini (Klik untuk Demo)