Membuat Daftar Isi Manual Di Blogspot

Kali ini artikel saya akan membahas tentang daftar isi sebuah bllog atau website. 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 Membuat Menu Scroll di Blogspot, namun posting ini akan membahas khusus soal alat navigasi berupa Daftar Isi seperti pada Tutorial Blog, 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 abjad pada label 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 Membuat Daftar Isi Manual Di Blogspot, silahkan ikuti langkah-langkahnya sebagai berikut :

1. Login ke Blogger, Klik Rancangan/Design;
2. Pada Elemen Halaman, klik Add Gadget/Tambah Gadget di lokasi yang Anda inginkan;
3. Cari dan pilih HTML/Javascript;
4. Copy paste kode di bawah ini ke dalam Content yang telah tersedia, berikut ini kodenya : 
   <style>
   .list {
   background: url("http://lh4.ggpht.com/_15FopxVONSo/ShYuf4RqUuI/AAAAAAAACxI/jcump2GgfLg/iconbullet.gif") no-repeat left center;
   line-height:1.5em;
   padding:3px 0px 3px 20px;
   }
   </style>
   <div style="background-color: #f7f7f7; border: 1px solid rgb(68, 67, 67); height: 220px; margin: 0px; overflow: auto; padding: 3px; width: 300px;">
   <div class="list">
   <ahref="http://newsuryacomputer.blogspot.com/2014/01/cara-memasang-widget-top-komentator.html">Cara Memasang Widget Top Komentator Cloud di Blog</a></div>
   <div class="list">
   <ahref="http://newsuryacomputer.blogspot.com/2014/01/membuat-label-bergerak-blogumulus-di.html">Membuat Label Bergerak (Blogumulus) di Blogspot  </a></div>
   <div class="list">
   <ahref="http://newsuryacomputer.blogspot.com/2014/01/menghilangkan-langgan-entri-atom-dan.html">Menghilangkan Langgan : Entri (Atom) dan Subscribe to : Poskan Komentar (Atom) </a></div>
   <div class="list">
   <ahref="http://newsuryacomputer.blogspot.com/2014/01/membuat-menu-horizontal-animasi-di-blog.html">Membuat Menu Horizontal Animasi di Blog </a></div>
   <div class="list">
   <ahref="http://newsuryacomputer.blogspot.com/2014/01/cara-memasukkan-script-ke-blog.html">Cara memasukkan Script ke Blog </a></div>
   <div class="list">
   <a href="http://newsuryacomputer.blogspot.com/2014/01/membuat-menu-accordion-tanpa-edit-html.html">Membuat Menu Accordion Tanpa Edit HTML </a></div>
   <div class="list">
   <ahref="http://newsuryacomputer.blogspot.com/2014/01/cara-membuat-read-more-otomatis-plus.html">Cara Membuat Read More Otomatis Plus Thumbnail Versi 3 </a></div>
   </div>
   5. Klik Tombol Save/Simpan.
   
   
   
   

   • Tulisan Berwarna Merah, silahkan diganti dengan link yang dituju atau Link.
   • Tulisan Berwana Biru, Silahkan Diganti dengan teks / judul postingan 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.

   
   Selamat mencoba,
    selamat malam dan semoga mimpi indah..