Beberapa hari lalu, saya nyoba belajar membuat Daftar Isi dengan fitur Accordion untuk blog ini dan akhirnya berhasil juga. Menurut saya menu daftar isi itu memang sangat penting. Dengan adanya halaman arsip seperti ini, tentu akan semakin memudahkan pengunjung untuk menjelajahi setiap artikel-artikel yang ada di blog kita. Sebenarnya pihak juga sudah menyediakan widget Archive, hanya saja kita masih kurang leluasa untuk memodifikasi tampilannya.

Oleh karena itu lah, berikut ini saya akan bagikan kepada sahabat script Daftar Isi Accordion yang keren dan mudah untuk dikreasikan sesuai dengan selera masing-masing. Menu daftar isi ini juga sudah saya rancang agar lebih responsif saat dibuka dari versi Mobile atau layar dengan ukuran yang kecil. Jadi, sahabat gak perlu khawatir. Pun saya juga akan beritahu cara bagaimana untuk mengubah-ngubah warna dari tampilan menu daftar isi ini. ^_^

daftar-isi-accordion-responsive

Cara Membuat Halaman Daftar Isi (Archive) Blog

Pertama, silahkan login terlebih dahulu ke Dashboard Blogger sahabat. Lalu, buka tab Laman untuk membuat Halaman Baru dan pilih Laman Kosong.

membuat-laman-baru-blog

Kedua, setelah terbuka halaman baru pada bagian kolom paling atas silahkan masukkan Judul, misal Daftar Isi atau Arsip dll. Kemudian pilih bagian HTML untuk memasukkan kode script.

Membuat-halaman-daftar-isi

Ketiga, copy seluruh kode script di bawah ini, lalu paste kan pada halaman baru sahabat tadi. Dan langkah terakhir untuk menyimpan halaman silahkan klik Publikasikan.

<style>
#arsip {
background-color:#fefefe;
color:#000;
border:2px solid #fafafa;
margin-bottom:30px;
box-shadow:0 1px 2px #000;
-webkit-box-shadow:0 1px 2px #000;
-moz-box-shadow:0 1px 2px #000;
overflow:hidden;
}
#arsip .kepala {
background-color:#67b434;
color:#000;
border-bottom:2px solid #666;
overflow:hidden;
margin:0px;
cursor:pointer;
text-decoration:none;
text-align:center;
line-height: 30px;
font-size: 20px;
text-transform:uppercase;
padding:10px 15px 11px;
}
#arsip .kepala:hover {
background-color:#666;
color:#f1f1f1;
}

#arsip .badan li a:link {color:#67b434;}
#arsip .badan li a:visited {color:#333;}
#arsip ol {list-style-type:decimal;}
#arsip .badan li a:hover {text-transform:uppercase;}

#arsip time {float:right;margin-right:20px;}
@media screen and (max-width: 680px) {
#arsip time {display:none;}
#arsip .kepala {line-height: 25px;font-size: 16px;padding:2px;}
}
</style><div class='clear'/>
<script src="https://googledrive.com/host/0B5BeCAuyk7k9R2FRa21LSWMxS0U" type="text/javascript"></script>
<script src="http://www.chaidir.web.id/feeds/posts/default?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

NB: Sebelumnya silahkan pastikan template yang sahabat gunakan sudah terpasang Jquery. Jika belum copy dan paste kan script berikut terlebih dahulu pada Template – Edit HTML.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>

Mengatur Tampilan Daftar Isi Accordion

Untuk melakukan pengaturan pada halaman Daftar Isi tersebut silahkan perhatikan beberapa penjelasan berikut ini:

  • Tulisan paling bawah yang saya tandai dengan warna Biru merupakan alamat blog yang akan digunakan. Silahkan diganti dengan alamat URL blog sahabat.
  • Kode berwarna Biru diatas nya adalah script pengaturan untuk membuat struktur HTML dari daftar isi. Ini gak perlu diatur-atur lagi.
  • Tulisan berwarna Merah adalah property CSS yang menandakan bagian mana yang akan diatur.
  • Tulisan warna Hijau adalah kode untuk mengatur warna background-color.
  • Tulisan warna Orange adalah kode untuk mengatur color font atau warna dari tulisan.

Dibawah ini akan langsung saya berikan contoh pilihan warna yang bisa sahabat gunakan. Jika sahabat sudah mengerti cara mengotak-atik CSS nya sendiri, boleh juga silahkan modifikasi dengan kreasi warna yang lain. Keenam bentuk tampilan berikut sudah saya uji coba menggunakan halaman-halaman blog saya, seperti yang tertera di masing-masing screenshot gambar. Kalau mau lihat demo nya langsung silahkan kunjungi saja alamat tersebut.

1. Daftar Isi Accordion warna Hitam Abu-abu

membuat-daftar-isi-accordion-hitam

#arsip atur background-color menjadi #ccc dan color #000
#arsip .kepala background-color menjadi #666 dan color #bbb
#arsip .kepala:hover background-color #3c3c3c dan color #fefefe
#arsip .badan li a:link color #333
#arsip ol dengan decimal

2. Daftar Isi Accordion warna Putih Abu-abu

membuat-daftar-isi-accordion-putih

#arsip atur background-color menjadi #fefefe dan color #000
#arsip .kepala atur background-color #f1f1f1 dan color #f26300
#arsip .kepala:hover background-color #f26300 dan color #000
#arsip .badan li a:link color #f26300
#arsip ol dengan square

3. Daftar Isi Accordion warna Orange

membuat-daftar-isi-accordion-orange

#arsip atur background-color menjadi #f1f1f1 dan color #000
#arsip .kepala atur background-color #f26300 dan color #000
#arsip .kepala:hover background-color #ddd dan color #f26300
#arsip .badan li a:link color #f26300
#arsip ol dengan circle

4. Daftar Isi Accordion warna Merah

membuat-daftar-isi-accordion-merah

#arsip atur background-color menjadi #fefefe dan color #000
#arsip .kepala atur background-color #cc181e dan color #333
#arsip .kepala:hover background-color #333 dan color #fff
#arsip .badan li a:link color #cc181e
#arsip ol dengan circle

5. Daftar Isi Accordion warna Biru

membuat-daftar-isi-accordion-hitam

#arsip atur background-color menjadi #d8dfea dan color #000
#arsip .kepala atur background-color #3b5998 dan color #bbb
#arsip .kepala:hover background-color #004b73 dan color #ccc
#arsip .badan li a:link color #3b5998
#arsip ol dengan decimal-leading-zero

6. Daftar Isi Accordion warna Hijau

membuat-daftar-isi-accordion-hitam

#arsip atur background-color menjadi #fefefe dan color #000
#arsip .kepala atur background-color #67b434 dan color #000
#arsip .kepala:hover background-color #666 dan color #f1f1f1
#arsip .badan li a:link color #67b434
#arsip ol dengan lower-roman

*****

Sekian dulu tutorial Cara Membuat Daftar Isi Accordion keren yang bisa saya bagikan. Semoga penjelasan dari saya bisa mudah dimengerti dan tulisan ini bisa bermanfaat buat sahabat . Dengan berbagai macam alternatif pilihan warna diatas, sahabat bisa menyesuaikan tampilan yang paling cocok dengan warna blog sahabat masing-masing. Jika ada kendala atau pertanyaan silahkan sampaikan saja lewat kotak komentar. 😀

Selamat Mencoba dan Tetap Semangat Berkarya!!