Cara Membuat Daftar Isi Blog Dengan Efek jQuery Accordion

KUCOPAS - Cara Membuat Dan Memasang Daftar Isi Blog Dengan Efek jQuery Accordion. Kali ini saya akan share artikel tentang cara membuat daftar isi di blog. Namun daftar isi yang akan saya kasih triknya berikut ini bukan seperti daftar isi yang biasa, karena daftar isi blog ini menggunakan Jquery Accordion mempunyai efek yang sangat luar biasa mengagumkan dan unik tentunya.

Perlu sobat ketahui, daftar isi blog dengan efek jQuery Accordion ini yang menyusun kodenya adalah Abu Farhan, kemudian dimodifikasi lagi kodenya oleh Teja HTC. Lalu daftar isi blog Jquery Accordion ini saya edit lagi sehingga lebih mudah untuk di pasang atau di terapkan pada blog sobat semua.

Daftar isi atau sitemap yang dipasang pada blog memang sangat penting, karena dapat memudahkan para pengunjung untuk mengetahui semua daftar dari isi blog itu sendiri. Kegunaan yang lain adalah agar lebih memudahkan visitor atau pengunjung blog dalam mencari konten atau artikel posting yang di butuhkan.

Jika sobat ingin memasang iklan pada blog sobat, kemungkinan besar blog sobat akan di review oleh pemasang iklan. Apakah layak atau tidak blog sobat ditempeli iklan dari penyedia iklan. Yang biasa menonjol di review adalah tentang apakah navigasi pencarian konten berbelit-belit dan tepat pada tujuan yang di cari atau tidak, kemudian apakah ada pemasangan sitemap atau daftar isi pada blog atau tidak.

Menurut webmaster, memasang daftar isi atau sitemap pada blog itu wajib hukumnya. Sebab untuk menunjang agar menjadi suatu blog yang profesional memang harus mempunyai navigasi pencarian yang tertuju dengan benar untuk memudahkan para pengunjung atau visitor mencari apa yang dicari atau dibutuhkan dalam blog tersebut.

Mengenai tampilan atau wujud dari daftar isi blog yang menggunakan Jquery Accordion ini kurang lebih seperti seperti gambar berikut di bawah ini. Namun biasanya link dari judul akan berubah warna mengikuti warna link default dari blog sobat.

Efek dari daftar isi blog dengan jQuery Accordion ini akan menimbulkan efek dropdown seperti menu, Efeknya akan timbul jika mouse pointer di arahkan dan diklik pada satu pilihan label atau kategori, maka akan keluar daftar isi dari label atau kategori tersebut berurutan kebawah sesuai dengan banyaknya isi label atau kategori blog tersebut.

Jika sobat tertarik untuk membuat, memasang dan menerapkannya pada blog sobat, caranya sangat mudah. Jadi silahkan sobat ikuti langkah-langkahnya dengan teliti yang akan saya jelaskan sebagai berikut.

• Langkah Pertama

1. Silahkan sobat >> Masuk/Login >> ke Blogger.com menggunakan akun sobat.
2. Pada Dasboard tampilan blogger baru, pilih Menu >> Template >> Edit HTML.
3. Kemudian sobat cari kode ]]></b:skin> (Gunakan CTRL+F pada keyboard sobat untuk memudahkan pencarian).
4. Jika sudah ketemu, silahkan sobat masukkan kode CSS berikut tepat sebelum atau di atas kode ]]></b:skin>

.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% 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:#000 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:#000;color:#51A104;border-top:1px solid #FF0000;border-bottom:1px solid #FF0000}.headactive{color: #FFFFFF;border: 2px solid:#C0C0C0;!important;background: #D11717;background: -moz-linear-gradient(top,  #D11717,  #8C0000)}

Catatan:

• Warna Merah adalah Kode warna dari daftar isi yang akan di tampilkan. Sobat bisa menggantinya sesuai dengan keinginan sobat, Namun saya menyarankan tidak usah di ganti. Karena kemungkinan daftar isi akan menjadi eror.

6. Sebelum sobat klik Simpan Template, ada baiknya sobat klik >> Preview atau Pratinjau

terlebih dahulu. Guna untuk menghindari terjadinya eror saat Edit HTML dalam template blog sobat.

7. Jika hasil dari Preview atau Pratinjau tidak terjadi masalah eror, maka silahkan sobat klik >> Simpan Template.

• Langkah Kedua

Langkah yang pertama sudah selesai, kemudian kita akan menuju ke langkah kedua dan tahap yang terakhir, yaitu pemasangan kode pemanggil agar daftar isi dengan efek jQuery Accordion dapat muncul dan berfungsi diblog sobat dengan baik.

Cara Memasang Daftar Isi Dengan Efek jQuery Accordion Pada Posting Blog

1. Setelah Template di Save atau di Simpan, sekarang silahkan sobat langsung menuju ke menu >> Post atau Tab Posting.
2. Kemudian pilih klik >> Buat Entri Baru. (Caranya seperti saat membuat postingan blog).
3. Lalu isikan judul Entri atau judul postingnya dengan judul Daftar isi, Sitemap, Table of Content atau judul yang lain seperti yang sobat inginkan.
4. Setelah itu sobat pilih Mode >> HTML bukan Compose, lalu masukkan semua kode script berikut ke dalamnya.

 <script src="http://kucopas-js.googlecode.com/files/sitemap1.js">
</script>
<script src="http://kuc0pas.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://kucopas.googlecode.com/files/sitemap.js" type="text/javascript">
</script>

5. Yang terakhir silahkan sobat klik >> Publikasikan atau Terbitkan Entri dan lihat hasilnya pada postingan blog sobat.

Catatan:

• Silahkan sobat ganti URL warna BIRU dengan Alamat URL blog sobat.

Cara Memasang Daftar Isi jQuery Accordion Pada Laman Blog

1. Setelah Template di Save atau di Simpan, Sekarang silahkan sobat langsung menuju pilih menu >> Laman >> pilih dan klik >> Laman Baru >> Pilih dan klik lagi >> Laman Kosong.
2. Kemudian isikan judul Laman dengan judul Daftar isi, Sitemap, Table of Content atau judul yang lain seperti yang sobat inginkan.
3. Setelah itu sobat pilih Mode >> HTML bukan Compose, Lalu masukkan semua kode script berikut ke dalamnya.

 <script src="http://kucopas.googlecode.com/files/sitemap1.js">
</script>
<script src="http://kuc0pas.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://kucopas.googlecode.com/files/sitemap.js" type="text/javascript">
</script>

4. Yang terakhir silahkan sobat klik >> Publikasikan dan lihat hasilnya pada laman blog sobat.

Catatan:

• Ganti URL warna BIRU dengan Alamat URL blog sobat.

Cara Memasang Daftar Isi jQuery Accordion Pada Widget, Sidebar atau Gadget Blog

1. Setelah Template di Save atau di Simpan, Sekarang silahkan sobat langsung menuju pilihan menu >> Tata Letak >> Silahkan sobat tentukan posisinya dimana daftar isi jQuery Accordion ini akan di letakkan pada blog sobat.
2. Kemudian pilih dan klik >> Tambah Gadget >> Lalu pilih dan klik lagi >> HTML/JavaScript.
3. Setelah itu sobat masukkan semua kode script berikut di bawah ini ke dalamnya.

 <script src="http://kucopas.googlecode.com/files/sitemap1.js">
</script>
<script src="http://kuc0pas.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://kucopas-js.googlecode.com/files/sitemap.js" type="text/javascript">
</script>

4. Yang terakhir silahkan sobat klik >> Simpan atau Save dan lihat hasilnya pada halaman blog sobat.

Catatan:

• Ganti URL warna BIRU dengan Alamat URL blog sobat.

Sampai di sini saya kira sobat pasti sudah bisa mengerti dan paham bagaimana cara membuat dan memasang daftar isi dengan efek jQuery Accordion diblog sobat. Bila sobat sudah berhasil, jangan lupa di Like atau Follow blog ini. Namun jika sobat masih menemui kesulitan, silahkan bertanya pada form komentar yang tersedia.

Demikian trik tutorial blog tentang Cara Membuat Dan Memasang Daftar Isi Blog Dengan Efek jQuery Accordion yang saya share ini, semoga bisa sangat bermanfaat untuk sobat KUCOPAS semua.