Cara Membuat Daftar Isi Blog Tanpa JavaScript

Cara Membuat Daftar Isi Blog-Membuat Daftar Isi Blog-Daftar Isi bagi sebuah blog, menurut saya merupakan elemen yang penting. Karena ini bisa menjadi 'shortcut', bila pengunjung ingin mengetahui seluruh konten blog, atau mencari artikel yang sesuai dengan kebutuhan mereka.

Ada banyak cara untuk membuat daftar Isi. Seringkali, banyak yang menggunakan JavaScript. Memang menggunakan JavaScript akan menghasilkan Daftar Isi yang baik dan bisa dibuat per kategori.  Namun, bila blog kita sudah banyak dipenuhi JavaScript, maka tentu penambahan 1 JavaScript lagi, akan memperlambat loading blog.

Nah, pada posting ini saya mencoba share, cara untuk membuat Daftar Isi tanpa JavaScript. Untuk melihat DEMO silahkan KLIK DI SINI.

Cara membuatnya :

Terlebih dahulu, backup template Anda dengan men-Download-nya. Untuk berjaga-jaga bila terjadi eror.

• Login ke Dashboard --> Layout --> Edit HTML
• Centang "Expand Widget Templates"
• Cari kode berikut :

 <b:include data='post' name='post'/>

• Ganti kode di atas dengan kode di bawah :

<b:if cond='data:blog.homepageUrl !=data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<div style="padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#EAE9E9;color:#406A0E;">
<data:post.title/></div></a>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

• Simpan/Save Templates
• Klik menu Layout. Klik Add a Gadget. Pilih "HTML/JavaScript".
• Copy kode di bawah dan Paste ke ruangan yang tersedia

<a href="http://NamaBlogAnda.blogspot.com/search?max-results=200">Show all post &raquo;&raquo;</a>

Note : Ganti NamaBlogAnda dengan nama blog Anda dan Anda bisa mengubah nilai max-results=200, untuk menampilkan berapa yang akan ditampilkan.

• Save. Selesai.

Note 2: Jika Anda ingin langsung meletakkan link "Daftar Isi" di menu bar blog, maka letakkan search?max-results=200 pada link menu.

Contoh : Jika link menu daftar isi semula :<li><a href='http://NamaBlogAnda.blogspot.com/p/daftar-isi.html'>Daftar Isi</a></li>

maka ubah jadi seperti di bawah :

<li><a href='http://NamaBlogAnda.blogspot.com/search?max-results=200'>Daftar Isi</a></li>

atau, silahkan ber kreasi..


Semoga Manfaat ...