Membuat Daftar Isi Blog

Selain artikel baru yang update tentu kita memiliki artikel lama yang tak kalah berkualitas. Sayang sekali bukan kalau artikel itu kita tak tersentuh orang lain. Nah, bagaimana cara membuat orang lain agar tahu artikel artikel kita apa saja??? Batlah daftar isi blog kita. Caranya anda tinggal menuju ke tata letak (sekarang design/rancangan) , lalu ke elemen halaman dan buatlah gadget HTML. Isi dengan kode di bawah ini:

<style>
.list {
border-bottom:1px dotted #ddd;
line-height:1.2em;
padding:3px;
}
</style>

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

<div class="list">
1. <a href="http://www.masdoyok.co.cc/2009/06/memasang-badge-facebook.html" target="_blank">Pasang Badge Facebook</a></div>

<div class="list">
2. <a href="http://www.masdoyok.co.cc/2009/07/buat-email-di-google.html" target="_blank">Cara Buat Gmail</a></div>

</div>

Ganti yang warna merah dengan alamat postingan Anda
Ganti yang bewarna hijau dengan judul yang akan muncul di daftar isi Anda

Keterangan:
380px merupakan lebar kotak, 180px merupakan tinggi kotak, #ffffff pada background-color merupakan warna background, dan #ffffff pada border merupakan warna garis pinggir. Silahkan diganti sesuai dengan template anda.

Ingat:
Ganti tulisan yang berwarna merah dengan alamat postingan anda dan ganti tulisan berwarna merah yg dicetak tebal dengan judul postingan anda. Jika ingin menambahkan daftarisi lagi maka letakkan kode di bawah ini sebelum </div> pada kode di atas..

<div class="list">
Nomer Urut. <a href="http://www.masdoyok.co.cc/2009/07/buat-email-di-google.html" target="_blank">Cara Buat Gmail</a></div>

Seperti cara tadi ganti nomer urut, alamat postingan dan judul yang akan muncul.

3. Kalau sudah klik Save Template. Selesai.

Jika anda ingin menggunakan icon gambar sebagai pengganti angka maka ganti kode dibawah ini

<style>
.list {
border-bottom:1px dotted #ddd;
line-height:1.2em;
padding:3px;
}
</style>

Dengan kode

<style>
.list {
background: url("http://lh4.ggpht.com/_15FopxVONSo/ShYuf4RqUuI/AAAAAAAACxI/jcump2GgfLg/iconbullet.gif") no-repeat left center;
border-bottom:1px dotted #ddd;
line-height:1.2em;
padding:3px 0px 0px 20px;
}
</style>

Ganti tulisan yang berwarna merah dengan alamat icon gambar anda dan hapus angka pada setiap judul postingan.

Selamat mencoba