Bagaimana Cara Membuat Daftar Isi blog? Daftar isi adalah salah satu bagian terpenting yang mungkin harus dimiliki oleh sebuah blog. Dengan adanya daftar isi di blog, pengunjung akan lebih mudah dalam mencari isi dari semua yang ada di dalam blog tersebut. Selain itu juga mesin pencari seperti google akan mudah medeteksi bila sebuah blog memiliki daftar isi yang mewakili isi dari semua isi yang ada di blog.

Sebenarnya ini juga merupakan salah satu dari teknik SEO. Baca Teknik SEO yang Direkomendasikan Google. Bila sebuah blog itu tersusun dengan rapi, tidak berantakan, dan ringan itu akan membuat google dan mesin pencari lainnya akan lebih mudah dalam mendeteksi blog tersebut.


Bagaimana Cara Membuat Daftar Isi Itu?
Dalam membuat daftar isi ini kita akan menamhan css untuk membentuk daftar isi nantinya kemudian akan dipanggil dengan meletakkan css pada halaman atau artikel blog.
1. Langkah yang pertama adalah Login ke akun blog kamu
2. Masuk ke Dasbor kemudian pilih menu Template
3. Klik Edit Template maka akan muncul tempat dimana tertera kode-kode html blog kamu, bila tidak muncul karena koneksi yang sedikit lambat atau karena faktor lain, pancing dengan cara menekan CTRL+F
4. CTRL+F disini bukan untuk mencari kode pada html, tapi hanya untuk memancing munculnya kode html. Bila sudah muncul, letakkan kursor pada isi html kemudian tekan CTRL+SHIFT+F untuk melakukan pencarian cepat.
5. Cari kode ]]></b:skin> dan letakkan kode berikut tepat diatas ]]></b:skin>

#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;
margin-top:-55px;
overflow:hidden;
}
#daftar-isi .judul-label {
overflow:hidden;
cursor:pointer;
text-decoration:none;
font:normal 13px/100% 'Electrolize',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-color:#333;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3c3c3c', endColorstr='#333333');
background-image:-webkit-linear-gradient(top, #3c3c3c, #333);
background-image:-moz-linear-gradient(top, #3c3c3c, #333);
background-image:-o-linear-gradient(top, #3c3c3c, #333);
background-image:linear-gradient(top, #3c3c3c, #333);
}
#daftar-isi .headactive {
color:#efefef;
border-top:1px solid #24B6E3;border-bottom:1px solid #104968;
background-color:#248AB0;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#248AB0', endColorstr='#21739B');
background-image:-webkit-linear-gradient(top, #248AB0, #21739B);
background-image:-moz-linear-gradient(top, #248AB0, #21739B);
background-image:-o-linear-gradient(top, #248AB0, #21739B);
background-image:linear-gradient(top, #248AB0, #21739B);
}
#daftar-isi ol {
background-color:#333;
margin:0 0;
padding:0 0;
color:#999;
list-style:none;
}
#daftar-isi li {
line-height:normal;
font:normal 11px/100% 'Verdana',Arial,Sans-serif;
margin:0 0;
white-space:nowrap;
padding:5px 5px 5px 15px;
text-align:left;
border-top:1px solid #444;border-bottom:1px solid #222;
}
#daftar-isi li:first-child {border-top:none;}
#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;
}

Klik Pratinjau untuk melihat hasil perubahan, disini memang tidak terlihat perubahan yang terjadi. Tetapi hanya untuk mengetahui bila terjadi kesalahan dan kekurangan kode dalam mamasukkan kode-kode tadi. Bila blog sudah terbuka dengan baik dan tidak ada pemberitahuan tentang kesalahan editan, klik SIMPAN.

Bagaimana Memanggil Daftar Isi itu agar Ada di Blog Kita?
Setelah menambahkan css pada template kita, sekarang kita harus memanggil kode tersebut agar muncul di blog kita.
1. Masuk ke menu Halaman (atau bisa juga di posting artikel, tapi lebih disarankan melalui halaman blog)
2. Pilih buat Halaman Baru, Halaman Kosong.
3. Beri Judul sesuai keinginan kamu, misal : Daftar Isi, Daftar Isi Blog, Daftar Isi Blog Mas Kentir, dll
4. Dalam memasukkan tulisan di halaman post ada 2 pilihan "Compose dan HTML", pilih yang HTML.
5. Copy kode berikut di halaman yang sudah kamu beri judul tadi

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var showNew = true,
accToc = true,
openNewTab = true,
maxNew = 10,
baru = "Baru!",
sDownSpeed = 600,
sUpSpeed = 600;
</script>
<script type="text/javascript" src="http://reader-download.googlecode.com/svn/trunk/hompishive-labels-v1.js"></script>
<script src="http://maskentir.blogspot.com/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

• Tulisan warna Biru : bisa ganti dengan keinginan kamu (misal:New!!, Terbaru!!, dll)
• Ganti URL http://maskentir.blogspot.com dengan URL blog kamu
• var showNew : Jika bernilai true, tanda biru bertuliskan Baru! akan ditampilkan, jika bernilai false, tanda biru bertuliskan Baru! akan disembunyikan
• accToc : Jika bernilai true, effect accordion akan diterapkan, jika bernilai false, effect accordion akan hilang sehingga semua daftar isi akan terlihat.
• openNewTab : Jika bernilai true, setiap link akan secara otomatis terbuka di tab/jendela baru saat diklik, jika bernilai false, setiap link akan terbuka di tab/jendela yang sama saat diklik.
• maxNew : Digunakan untuk menentukan jumlah maksimal Baru! yang tampil pada setiap posting baru (Menentukan seberapa banyak posting bisa disebut sebagai posting baru).
• sDownSpeed : Digunakan untuk menentukan kecepatan effect .slideDown() panel.
• sUpSpeed : Digunakan untuk menentukan kecepatan effect .slideUp() panel.

 Itulah sekilas tentang Cara Membuat Daftar Isi Keren Menggunakan Akordion yang Sederhana tapi terkesan Profesional. Semoga bermanfaat dan bisa diterapkan di blog kamu.

Ingat!
Jangan lupa tulisakan komentar kamu di kolom komentar dibawah karena blog ini dofollow. Dan admin akan mengunjungi balik blog kamu dengan menuliskan komentar dan memfollow blog kamu

Salam,

Artikel Terkait: