Cara Membuat Daftar ISI di Blog [ Blogspot ] Untuk Pemula

Baiklah kawan bagi yang masih baru di dunia blogging mari kita belajar bersama, untuk yang sudah piter silahkan bagikan tips dan triknya dalam ngeblog biar kawan-kawan kita semua bias tau.

Oke kali ini kit akan membuat sebuah daftar isi diblog kita, sebelumnya saya juga pernah membuat daftar isi dengan jquery, bagaimana penasarankan buat temen-temen yang memang bener-bener belum tau, ayo langsung saja kita menuju ke tkpnya saja biara lebih jelas.

Pertama tama kalian masuk dulu kea kun bloggger kalian

Ke menu tataletak lalu edit html dan janagn lupa centang expanwidget templates.

Setelah itu cari kode seperti ini di template sobat

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

Kalau sudak ketemu kode ini hapus, lalu ganti dengan kode dibawah ini

<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>

Setelah selesai mengganti simpan template sobat.
Kita melangkah ke tahap selanjutnya, yaitu pemasangan kode link untuk direct  ke hasil pencarian isi blog.
Oke langsung ajah kita masuk ke elemen halaman bukan di edit html yah, setelah masuk Element halaman klik tmbahkan gadget atau element, pilih gadget : HTML/Javascript, setelah itu masukkan kode dibawah ini didalamnya.

<a href="http://DomainAnda.blogspot.com/search?max-results=200">Daftar isi&raquo;</a>

 DomainAnda.blogspot ganti dengan domain/alamat blog sobat, sedangkan nilai 200 adalah sebuah perintah berapa jumlah hasil pencarian yang ingin kalian tampilkan pada satu halaman saat link di buka.

Untuk memodifikasi dari warna background hasil pencarian kalian bias otaatik kode CSSnya yang terletak pada kode pertama tadi seperti ini

<div style="padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#EAE9E9;color:#406A0E;">

 demikan semoga berhasil selamat mencoba kawan

Posted in: All