Membuat Daftar Isi Part 2 (JQuery Accordion)

Sebelumnya ane uda pernah mosting artikel tentang Cara Membuat Sitemap di Blog yaitu membuat daftar isi untuk blog yang tentunya sangat bermanfaat bagi pengunjung blog kita. Kali ini ane juga masih mosting tentang artikel serupa, hanya saja bedanya, kalau yang sebelumnya hanya memakai JS, yang sekarang justru dengan bantuan JQuery. Ini aku ambil dari Blog Sharing Ilmu Pengetahuan dan sudah aku ganti sebagian scriptnya. Kalau sobat penasaran dengan hasilnya bisa lihat DISINI

Udah liatkan kan??? heheh.... Kalau sobat tertarik untuk mengganti model Daftar Isi sobat yang lama dengan yang model seperti ini caranya gampang kok....

1. Login ke Blogger dengan ID sobat
2. Pilih menu Template --> Edit HTML
3. Expand Widget Templates.,cari kode ]]></b:skin> lalu letakkan kode berikut tepat diatasnya

.judul-label{background:-moz-linear-gradient(top,  #393E41,  #000000);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% Comic Sans MS, 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: #330000;border: 2px solid white !important;background:#CCFFFF url("http://2.bp.blogspot.com/-6OcDgB9yXXI/TVfIh9HaUYI/AAAAAAAABUk/PUZFTYOTg-8/s1600/1m3.gif") no-repeat}.data-list{line-height:1.5em;margin-left:5px;margin-right:5px;padding-left:15px;padding-right:5px;white-space:nowrap;text-align:left;font-family:kristen itc;font-size:12px;}.list-ganjil{background-color:#CCFF99;color:#51A104;border-top:1px solid #FF0000;border-bottom:1px solid #FF0000}.headactive{color: #FFFFFF;border: 2px solid:#C0C0C0;!important;background: #CC66FF;background: -moz-linear-gradient(top,  #CC66FF,  #8C0000)}

4. Simpan Template

Selanjutnya adalah untuk menampilkan daftar isinya kedalam blog kita. Untuk langkah ini ada 2 cara yang bisa sobat gunakan. Pertama, lewat Page dan Kedua, lewat Postingan seperti artikel. Terserah sobat mau milih yang mana. Kebetulan kalau saya make yang pertama karena langsung dimasukan ke tab menu.....

5. Buat artikel baru (bisa di Pages juga bisa di New Post)
6. Setelah berada di menu editor, Letakkan kode berikut di tab HTML

<script src="http://muhammadsuteja.googlecode.com/files/by1.js">
</script>
<script src="http://chumhienk-mhienk.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc">
</script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://muhammadsuteja.googlecode.com/files/by.js" type="text/javascript">
</script>

Keterangan :

• Ganti tulisan yang berwarna merah dengan alamat blog sobat
• sobat juga bisa mengganti background color dengan mengganti semua kode warna yang ada dengan kode warna yang sobat inginkan.

Selamat mencoba.

Salam,