Cara buat daftar isi otomatis

Daftar judul postingan cukup penting agar pengunjung betah berlama-lama di blog kita. Karena semakin banyak postingan kita maka akan semakin banyak juga pilihan bagi pengunjung untuk membaca artikel yang telah kita buat. Dan dengan daftar ini pengunjung akan lebih mudah memilih judul artikel atau postingan yang akan dibaca.

Daftar judul ini tampil berdasarkan kategori atau label posting, dan lebih menarik lagi menggunakan tab accordion, sehingga dapat menghemat tempat serta memiliki pemberitahuan artikel mana saja yang baru sehingga pengunjung dapat menilik artikel-artikel terbaru kita.

Berikut adalah cara mudahnya untuk ditempel di sidebar  :

1. Login ke blogspot anda
2. klik “Tata Letak” atau “Layout”
3. Klik Tambah Gadget di sebelah kiri atau kanan Layout
4. Pilih HTML/Java Script
5. Kemudian letakkan kode berikut ke dalam gadget HTML/Java Script :

<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script><br /><script src="GANTI DENGAN URL BLOG ANDA/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script><br /><script type="text/javascript">var accToc=true; </script><br /><script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script><br /><style type='text/css'>.judul-label{ background-color:#E5ECF9; font-weight:bold; line-height:1.4em; margin-bottom:5px; overflow:hidden; white-space:nowrap; vertical-align: baseline; margin: 0 2px; outline: none; cursor: pointer; text-decoration: none; font: 14px/100% Arial, Helvetica, sans-serif; padding: .5em 2em .55em; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 1px 1px 4px #AAAAAA; box-shadow: 0 1px 2px rgba(0,0,0,.2); color: #e9e9e9; border: 2px solid white !important; background: #6e6e6e; background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757)); background: -moz-linear-gradient(top, #888, #575757); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757'); } .data-list{ margin-left:5px; margin-right:5px; padding-left:15px; padding-right:5px; white-space:nowrap; text-align:left; font-family:"Arial",sans-serif; font-size:12px; } .list-ganjil{ background-color:#F6F6F6; } .headactive{ color: #fef4e9; border: 2px solid white !important; background: #f78d1d; background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20)); background: -moz-linear-gradient(top, #faa51a, #f47a20); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20'); } </style><br />

    6. Simpan dan selesai

 

Keterangan :

• Tulisan "GANTI DENGAN URL BLOG ANDA", ganti dengan alamat blog anda

Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada dibawa ini.

Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.