Adalah sebuah halaman yang berisikan semua label atau artikel yang sudah kita posting kedalam blog.
Membuat daftar isi diblog akan sangat membantu untuk kita (admin blog atau pembaca) yang ingin menelusuri isi blog sobat lebih dalam.
Berikut ini adalah manfaat yang bisa sobat dapatkan dari membuat daftar isi diblog :
- Membantu pembaca untuk mencari artikel yang di inginkannya.
- Menghindari penerbitan artikel yang serupa, yang akan menyebabkan kebingungan mesin bot pencari yang berujung penghapusan artikel tersebut.
- Dapat membantu menaikan Rank Page (urutan halaman di google), dengan memasang internal link.
Baiklah sobat dari pada basa-basi lagi ada baiknya langsung kita praktekan saja cara membuatnya.
1. Tahap Pertama : Memilih tipe daftar isi
Daftar isi dibagi menjadi beberapa tipe sob, tipe tersebut adalah.
Daftar isi yang keren
 |
| Demo (Contoh) |
dan silahkan sobat ganti url https://biljabbaradnan.blogspot.com dengan url sobat
<style type="text/css">
#toc{
width:99%;
margin:5px auto;
border:1px solid #2D96DF;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
}
.labl{
color:#FF5F00;
font-weight:bold;
margin:0 -5px;
padding:1px 0 2px 11px;
background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));
border:1px solid #2D96DF;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;
}
.labl a{
color:#fff;
}
.labl:first-letter{t
ext-transform:uppercase;
}
.new{
color:#FF5F00;
font-weight:bold;
font-style:italic;
}
.postname{
font-weight:normal;
background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));
}
.postname li{
border-bottom: #ddd 1px dotted;
margin-right:5px
}
</style>
<div id="toc">
<span class="loading">Ok selamat menjelajah dan selamat mencoba</span>
<script src="https://googledrive.com/host/0ByNodV_m9cVLR0pmWFgwZ1NmdW8/" type="text/javascript"></script>
<script src="http://biljabbaradnan.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script></div>
Daftar isi sederhana
 |
| Demo (Contoh) |
dan silahkan sobat ganti url https://biljabbaradnan.blogspot.com dengan url sobat
<div style="overflow:auto; border: 1px solid #000000; margin: auto; padding: 3px; width: 100%; height:500px; background-color: none; text-align: left;">
<script style="text/javascript" src=" http://mastergomaster.googlecode.com/files/daftar%20isi%20blog.js "></script>
<script src="http://biljabbaradnan.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script></div>
Daftar isi berdasarkan waktu publikasi
 |
| Demo (Contoh) |
dan silahkan sobat ganti url https://biljabbaradnan.blogspot.com dengan url sobat
<div style="overflow:auto; border: 1px solid #000000; margin: auto; padding: 3px; width: 100%; height:500px; background-color: none; text-align: left;">
<script style="text/javascript" src=" http://mastergomaster.googlecode.com/files/daftar%20isi%20blog.js "></script>
<script src="http://biljabbaradnan.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script></div>
Daftar isi yang hanya beberapa label/kategori saja
 |
| Demo (Contoh) |
dan silahkan sobat ganti url https://biljabbaradnan.blogspot.com dengan url sobat, dan kata blogger, komputer, dan word diganti dengan kategori sobat yang ingin ditampilkan.
<script style="text/javascript" src="https://cdn.rawgit.com/D-dig/js/gh-pages/sitemap3.js"></script>
<h3>Blogger</h3><ul>
<script src="http://biljabbaradnan.blogspot.com/feeds/posts/default/-/Blogger?orderby=published&alt=json-in-script&callback=startpost&max-results=999"></script></ul><br />
<h3>Komputer</h3><ul>
<script src="http://biljabbaradnan.blogspot.com/feeds/posts/default/-/Komputer?orderby=published&alt=json-in-script&callback=startpost&max-results=999"></script></ul><br />
<h3>Word</h3><ul>
<script src="http://biljabbaradnan.blogspot.com/feeds/posts/default/-/Word?orderby=published&alt=json-in-script&callback=startpost&max-results=999"></script></ul><br />
2. Tahap kedua : Membuat halamannya
Setelah memilih tipe daftar isinya, kita harus membuat halaman daftar isinya sobat.
Berikut cara untuk membuat halamannya :
1. Login dahulu ke akun blogger.com sobat
2. Masuk ke dashbor => laman => laman baru
3. Lalu ubah mode penulisannya dari Compose menjadi HTML
4. Setelah itu masukan kode daftar isinya yang barusan sobat copy
5. Jangan lupa untuk memasukan judul lamannya
6. Terakhir Klik "Publikasikan", untuk menguploadnya
3. Tahap ketiga : memasang halaman daftar isi di menu
Setelah melewati tahap pertama dan kedua, tahapan berikut ini adalah "Penyelesaian" sobat.
Jadi perhatikan baik-baik yah agar daftar isinya dapat terpasang di blog sobat.
1. Klik tombol "lihat" yang ada dibawah laman sobat yang baru dibuat tadi.
Atau bisa sobat perhatikan gambar dibawah ini.
2.Silahkan sobat copy alamat url-nya seperti pada gambar dibawah ini.
3. Setelah dicopy url-nya, silahkan sobat masuk ke dashbor => template => edit html
4. Lalu silahkan sobat cari kata yang ada di menu blog sobat, dengan cara klik Ctrl+F.
Misalkan di menu sobat ada kata "PKN" masukan kata "PKN" dikotak yang sudah saya beritanda.
dan hasilnya akan kelihatan.
5. Lanjut, masukan kode berikut ini, diantara kode-kode yang saya beri tanda.
Ganti http://biljabbaradnan.blogspot.co.id/p/daftar-isi.html dengan url laman yang tadi sobat copy.
<li><a href='http://biljabbaradnan.blogspot.co.id/p/daftar-isi.html'>Daftar Isi</a></li>
dan hasilnya akan seperti ini
6. Simpan dan cek kembali
Setelah dicek menu sobat akan menjadi seperti ini
7. Selesai.
Akhirnya berakhir sudah sobat tutorial kali ini.
Setelah sampai pada barisan terakhir ini, bisa dipastikan sobat sudah berhasil "membuat daftar isi blog-nya"
Bagaimana sobat tutorial-nya? apakah cukup membantu atau membuat sobat tambah bingung? hehehe..
Baca juga yah artikel berikut ini untuk referensi dan penambahan ilmu pengetahuan sobat juga.
Sekian dari saya
Semoga bisa membantu
dan Selamat mencoba
Wasalamualaikum.wr.wb
Bagikan
Cara membuat berbagai macam daftar isi blog (keren, sederhana, berdasarkan label tertentu)
4/
5
Oleh
Bil Jabbar Adnan
Jangan lupa tinggalkan komentar yah :)