Cara membuat daftar isi Scroll dan Accordion Style

Daftar isi atau dalam bahasa Inggris biasa disebut Table of contents adalah sebuah fitur untuk memudahkan pengunjung mengeksplorasi isi sebuah blog, aagar pengunjung bisa mengetahui seluruh isi postingan sebuah blog. Tak sedikit blogger menyamakan istilah daftar isi dengan sitemap, padahal jelas berbeda. Daftar isi biasanya ada yang berdasarkan label atau kategori ada juga yang berdasarkan tanggal publikasi artikel.

Pada kesempatan ini saya akan berbagi tutorial bagaimana cara membuat daftar isi dengan scroll dan daftar isi dengan menu efek accordion jquery. Jika dengan scroll atau tombol gulir menampilkan isi berdasarkan tanggal posting maka daftar isi efek accordion adalah per label.

A. Membuat daftar isi sederhana dengan Scroll atau tombol gulir

Daftar isi dengan scroll ini tampilannya sangat sederhana dan tidak begitu banyak berat loadingnya. Menampilkan arsip atau isi blog berdasarkan tanggal dan bulan posting artikel. Cara membuatnya cukup mudah, bisa sobat masukkan di halaman statis, postingan, sidebar atau footer sekalipun. Khusus di halaman statis dan postingan harus masuk ke menu HTML (bukan compose). Silakan sobat copy kode berikut ini:

<div style="background-color: none; border: 1px solid #CCC; height: 400px; margin: auto; overflow: auto; padding: 3px; text-align: left; width: 95%;"><div align="center"><span style="font-size: medium;">Daftar Isi</span></div><script src="http://julak-project.googlecode.com/files/dafisiscroll%20.js"> </script><script src="http://www.super-gaptek.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"> </script></div>

Jangan lupa mengganti nama blog saya www.super-gaptek.com dengan nama blog sobat blogger sendiri. Silahkan masukkan/ paste di sidebar atau footer.

Catatan;

• Untuk mengurangi atau menambah ukuran tinggi lihat angka 400px silakan dimodifikasi
• Sedangkan untuk lebar kotak daftar isi ditunjukkan dengan angka 95% jadikan 100% atau dikurangi.
• Kata Daftar Isi bisa sobat ganti juga

Oke sobat, saya kira cukup mudah silakan lihat demonya di sini.

B. Cara membuat daftar isi keren efek accordion style

 

Sebelum sobat memakai atau mempraktekkan nya sobat bisa melihat contoh demonya di Daftar Isi

Bagaimana, bagus tidak, hehehe. hemat tempat karena begitu satu label dibuka secara otomatis label atau artikel lain akan menutup sendiri. Kalau sobat mau menggunakan silakan ikuti tutorial di bawah ini.

1. Langkah pertama yaitu menambahkan kode css ke template blog.
cari kode  ]]></b:skin> kemudian masukkan kode css di bawah ini tepat di atas kode ]]></b:skin> tadi.

<br />#dafis-acc {<br />font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;<br />font-size:14px;<br />}<br />.dafis-label {<br />background: rgb(125,126,125);<br />background: -moz-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%);<br />background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1)));<br />background: -webkit-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);<br />background: -o-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);<br />background: -ms-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);<br />background: linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);<br />filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 );<br />-webkit-border-radius: 25px;<br />-moz-border-radius: 25px;<br />border-radius: 25px;<br />color: #A1A1A1;<br />text-transform:uppercase;<br />font-weight: bold;<br />line-height: 2em;<br />margin: 1px 3px;<br />cursor: pointer;<br />outline: medium none;<br />overflow: hidden;<br />padding: 2px 10px;<br />text-decoration: none;<br />text-align: center;<br />}<br />.dafis-label:hover {<br />color: #F2F2F2;<br />}<br />.dafis-daf ol {<br />margin: 0 0 0 30px !important;<br />padding: 0 !important;<br />}<br />.dafis-daf ol li {<br />background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);<br />background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0)));<br />background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);<br />background: -o-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);<br />background: -ms-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);<br />background: linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);<br />filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 );<br />-webkit-border-radius: 25px;<br />-moz-border-radius: 25px;<br />border-radius: 25px;<br />line-height: 1.3em;<br />margin: 1px 3px !important;<br />text-align: left;<br />white-space: nowrap;<br />}<br />.dafis-daf ol li a {<br />color: #333333 !important;<br />display: block;<br />padding-top:5px;<br />padding-left: 10px;<br />text-decoration: none !important;<br />}<br />.dafis-daf ol li a:hover {<br />color:f2f2f2;<br />padding-left: 5px;<br />text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);<br />}<br />

2. Memasang kode javascript / jquery. Cari kode </head> kemudian masukkan kode berikut ini di atasnya.

<br /><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

Jika ditemplate blog sudah ada kode tadi tidak perlu lagi memasukkannya.Terakhir simpan template.  3. Langkah ke tiga yaitu memasang kode berikut boleh di postingan blog atau di static page (halaman statis)

<script src="http://julak-project.googlecode.com/files/daftar%20isi.js" type="text/javascript"></script><br /><script src="http://<span style="color: orange;">www.super-gaptek.com</span>.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>

silakan masukkan / gunakan  menu HTML pada saat menulis artikel. Jangan lupa untuk mengganti www.blogbelajar2.blogspot.com dengan nama blog sobat sendiri. Kemudian publikasikan. Dan daftar isi keren dengan accordion style pun sudah jadi. 

Sobat blogspotter mau pakai yang mana yang pertama atau kedua, dipersilahkan, hehehe.