Membuat Daftar Isi Otomatis Akordion Berdasar Label Blogger (Blogspot)

Daftar isi otomatis akordion berdasar label merupakan tampilan daftar isi blog/website yang indah dan dinamis untuk ditampilkan. Untuk membuatnya, maka berikut ialah langkah-langkahnya :

  1. Masuk halaman dashboard blogger (blogspot).
  2. Pilih menu template.
  3. Pilih edit html.
  4. Pastikan blog/website sudah terdapat kode untuk memuat jQuery dengan cara mencari (tekan Ctrl + F pada teks kode html) kode berikut di elemen html blog/website :<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>
  5. Jika belum terdapat kode di atas pada elemen html blog/website, maka masukkan kode di atas sebelum kode </head> html.
  6. Klik simpan (save).
  7. Pilih menu halaman dan buat halaman statis (blank page) baru.
  8. Beri judul halaman statis blog/website.
  9. Pilih tab html dan masukkan kode berikut :<style type="text/css">#daftar-isi{background-color:#333;border:2px solid #fafafa;color:#fff;margin-bottom:10px;-webkit-box-shadow:0 1px 2px #000;-moz-box-shadow:0 1px 2px #000;box-shadow:0 1px 2px #000;overflow:hidden}#daftar-isi .judul-label{overflow:hidden;cursor:pointer;text-decoration:none;font:normal 13px/100% 'Verdana',Arial,Sans-serif;padding:10px 15px 11px;color:#bbb;text-shadow:0 1px 1px rgba(0,0,0,0.3);border-top:1px solid #444;border-bottom:1px solid #222;background:#333;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3c3c3c',endColorstr='#333');background:-webkit-linear-gradient(top,#3c3c3c,#333);background:-moz-linear-gradient(top,#3c3c3c,#333);background:-o-linear-gradient(#3c3c3c,#333);background:linear-gradient(#3c3c3c,#333))}#daftar-isi .headactive{color:#efefef;border-top:1px solid #24b6e3;border-bottom:1px solid #104968;background:#248ab0;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#248AB0',endColorstr='#21739B');background:-webkit-linear-gradient(top,#248AB0,#21739B);background:-moz-linear-gradient(top,#248AB0,#21739B);background:-o-linear-gradient(#248AB0,#21739B);background:linear-gradient(#248AB0,#21739B))}#daftar-isi ol{background-color:#333;margin:0;padding:0;color:#999;list-style:none}#daftar-isi li{line-height:normal;font:normal 11px/100% 'Verdana',Arial,Sans-serif;margin:0;padding:5px 5px 5px 15px;white-space:nowrap;text-align:left;border-top:1px solid #444;border-bottom:1px solid #222}#daftar-isi li:first-child{border-top:0}#daftar-isi a{color:#5687f8}#daftar-isi a:hover{text-decoration:underline}#daftar-isi a:visited{color:#5687b8}#daftar-isi strong{font-weight:bold;font-style:italic;color:red}</style><script type="text/javascript">openNewTab=accToc=showNew=!0;var maxNew=10,baru="Baru!",sDownSpeed=600,sUpSpeed=600;</script><script src="http://reader-download.googlecode.com/files/hompishive-labels-v1.js" type="text/javascript"></script><script src="/feeds/posts/summary?max-results=10000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
  10. Klik publish.
  11. Muat halaman statis blog/website yang baru dibuat.
  12. Selesai.
Membuat halaman statis baru blogger (blogspot)
Tab HTML Halaman Statis Blogger (Blogspot)
Kode HTML daftar isi akordion berdasar label blogger (blogspot)
Hasil Daftar Isi Akordion

Populer

Menampilkan File Google Drive Pada Blog / Website

Banding Tayangan Iklan Google Adsense Dinonaktifkan

Membuat Tombol Kembali Ke Atas Melayang di Pojok Kanan Bawah Blogger (Blogspot)

Membuat Judul Halaman Blog Dinamis Blogger (Blogspot) Untuk Optimasi Mesin Pencarian

Membuat Link Download Google Drive Pada Blog / Website

Membuat Gadget/Widget Menu Tab Blogger (Blogspot)

Menghilangkan Navbar Blogger (Blogspot)

Membuat Tombol Facebook follow, Twitter, G+, Pinterest Horizontal Segaris Blogger (Blogspot)

Menghilangkan Link Langganan Entry Atom Blogger (Blogspot)