Cara Pasang Daftar Isi Manual Di Blogspot

Daftar isi pada website/blog berfungsi sebagai alat navigasi bagi pemilik maupun pengunjung untuk menjelajahi isi dari website/blog dan bicara soal alat navigasi sebetulnya juga pernah dibahas pada posting saya yang berjudul Cara Mudah Membuat Menu Navigasi pada Blogspot, namun posting ini akan membahas khusus soal alat navigasi berupa Daftar Isi seperti pada Blog Serba Tersedia ini, contohnya seperti di bawah ini:

Pada umumnya jenis daftar isi ada 2 (dua) macam yaitu daftar isi manual dan daftar isi otomatis. Perbedaan dari kedua daftar isi tersebut adalah jika daftar isi manual sesuai dengan namanya dipasang dan diatur secara manual sesuai keinginan pemilik blog, sedangkan jika daftar isi otomatis akan secara otomatis menampilkan isi blog berdasarkan urutan abjat pada lable dan judul postingan.

Baiklah saya rasa penjelasan singkat tentang fungsi daftar isi pada blog sudah cukup dan sekarang mari mulai bahas sesuai judul posting ini Cara Pasang Daftar Isi Manual Di Blogspot, silahkan ikuti langkah-langkahnya sebagai berikut :

Login ke Blogger, Klik Rancangan/Design;
Pada Elemen Halaman, klik Add Gadget/Tambah Gadget di lokasi yang Anda inginkan;
Cari dan pilih HTML/Javascript;
Copy paste kode di bawah ini ke dalam Content yang telah tersedia, berikut ini kodenya :
<style>
.list {
background: url("http://i977.photobucket.com/albums/ae258/SPN_photo/iconbullet.gif") no-repeat left center;border-bottom:1px dotted #ddd;line-height:1.2em;padding:3px 0px 0px 20px;
}
</style>

<div style="overflow:auto; padding:3px; margin:0px 0px 0px 0px; width:300px; height:180px; background-color: #ffffff; border:1px solid #ffffff;">

<div class="list">
<a href="http://www.serba-tersedia.co.cc/2010/05/cara-menampilkan-kotak-komentar-di.html">Cara Menampilkan Kotak Komentar di Bawah Postingan Blog</a></div>

<div class="list">
<a href="http://www.serba-tersedia.co.cc/2010/05/cara-membuat-teks-berjalan-atau-efek.html">Cara Membuat Teks Berjalan Atau Efek Marquee</a></div>

<div class="list">
<a href="http://www.serba-tersedia.co.cc/2010/05/cara-membuat-teks-berjalan-di-menu-bar.html">Cara Membuat Teks Berjalan di Menu Bar</a></div>

<div class="list">
<a href="http://www.serba-tersedia.co.cc/2010/05/cara-mudah-membuat-menu-navigasi-pada.html">Cara Mudah Membuat Menu Navigasi pada Blogspot</a></div>

<div class="list">
<a href="http://www.serba-tersedia.co.cc/2010/05/menampilkan-huruf-besar-pada-awal.html">Menampilkan Huruf Besar Pada Awal Posting</a></div>

<div class="list">
<a href="http://www.serba-tersedia.co.cc/2010/05/cara-membagi-postingan-menjadi-2-dua.html">Cara Membagi Postingan Menjadi 2 (dua) Kolom</a></div>

<div class="list">
<a href="http://www.serba-tersedia.co.cc/2010/05/cara-menampilkan-kode-html.html">Cara Menampilkan Kode HTML</a></div>

<div class="list">
<a href="http://www.serba-tersedia.co.cc/2010/05/cara-membuat-page-number-navigasi.html">Cara Membuat Page Number-Navigasi Halaman</a></div>

<div class="list">
<a href="http://www.serba-tersedia.co.cc/2010/05/daftar-social-bookmark-indonesia.html">Daftar Social Bookmark Indonesia</a></div>

<div class="list">
<a href="http://www.serba-tersedia.co.cc/2010/05/cara-setting-blog-menjadi-dofollow_21.html">Cara Setting Blog Menjadi Dofollow</a></div>

<div class="list">
<a href="http://www.serba-tersedia.co.cc/2010/05/cara-cepat-dan-benar-memasang-iklan.html">Cara Cepat dan Benar Memasang Iklan</a></div>

<div class="list">
<a href="http://www.serba-tersedia.co.cc/2010/05/pasang-iklan-cara-meningkatkan.html">Pasang Iklan Cara Meningkatkan Pengunjung</a></div>

<div class="list">
<a href="http://www.serba-tersedia.co.cc/2010/05/cara-membuat-blog-di-multiply.html">Cara Membuat Blog di Multiply</a></div>

<div class="list">
<a href=" http://www.serba-tersedia.co.cc/2010/05/panduan-membuat-blog.html">Panduan Membuat Blog</a></div>

<div class="list">
<a href="http://www.serba-tersedia.co.cc/2010/04/cara-mengetahui-pengunjung-yang-online.html"> Cara Mengetahui Pengunjung Yang Online</a></div>

<div class="list">
<a href="http://www.serba-tersedia.co.cc/2010/04/cara-mengganti-header-blog-versi-2.html"> Cara Mengganti Header Blog Versi 2</a></div>

<div class="list">
<a href="http://www.serba-tersedia.co.cc/2010/04/cara-meningkatkan-traffic-situs-dan.html"> Cara Meningkatkan Trafic Situs dan Blog</a></div>

<div class="list">
<a href="http://www.serba-tersedia.co.cc/2010/03/cara-memperpendek-alamat-blog-dengan.html"> Cara Memperpendek Alamat Blog Dengan Domain Gratis</a></div>

<div class="list">
<a href="http://www.serba-tersedia.co.cc/2010/03/cara-membuat-email-di-google-lengkap.html">Cara Membuat Email</a></div>

<div class="list">
<a href="http://serba-tersedia.blogspot.com/2010/03/cara-membuat-kotak-text-area.html">Cara Membuat Kotak Text Area</a></div>

<div class="list">
<a href="http://serba-tersedia.blogspot.com/2010/03/menyembunyikan-title-dan-description.html">Cara Menyembunyikan Title dan Description pada Blogspot</a></div>

<div class="list">
<a href="http://serba-tersedia.blogspot.com/2010/03/cara-mengganti-header-blog-pada-blogger.html">Cara Mengganti Header Blog</a></div>

<div class="list">
<a href="http://serba-tersedia.blogspot.com/2010/03/cara-membuat-artikel-terkait-related.html">Cara Membuat Artikel Terkait (Related Post) pada Blogspot</a></div>

<div class="list">
<a href="http://serba-tersedia.blogspot.com/2010/03/cara-pasang-readmore-otomatis.html">Cara Pasang Read More Otomatis</a></div>

<div class="list">
<a href="http://serba-tersedia.blogspot.com/2010/03/cara-sembunyikan-navbar-blogger.html">Cara Sembunyikan NavBar Blogger</a></div></div>

Klik Tombol Save/Simpan.

Keterangan :
Link dan Teks, silahkan diganti dengan link dan teks Anda;
width: 230px; adalah merupakan lebar dari kotak daftar isi manual dan boleh anda sesuaikan;
height: 180px; adalah merupakan tinggi dari kotak daftar isi manual dan boleh anda sesuaikan.

Untuk tutorial Cara Pasang Daftar Isi Manual sudah selesai, silahkan tunggu tutorial berikutnya tentang Cara Pasang Daftar Isi Otomatis di Blogspot.