Membuat Daftar Isi Blog Menarik

By On Sunday, April 17th, 2011 Categories : Serba-Serbi
Sekedar berbagi posting, sebenarnya sudah lama saya mencari cara untuk memasang fasilitas Daftar Isi untuk blog saya. Kebetulan saya membuat blog baru, maka saya browsing di Google dan pastinya banyak teman-teman blogger yang menawarkan cara yang berbeda-beda yang sudah pasti dengan tampilan yang berbeda pula. Ada yang mudah dan otomatis namun kurang dari segi tampilan. Ada yang menawarkan tampilan bagus/keren, tapi dengan cara manual. Nah di sinilah saya harus memilih:

1. Cara otomatis namun tampilan kurang
2. Cara manual namun tampilan bagus
Setelah saya fikir-fikir dan memang saya adalah orang yang begitu memperhatian dalam hal tampilan blog, akhirnya saya memilih yang nomor 2, Cara manual namun tampilan bagus. Manual di sini maksudnya manual dalam hal memasukkan URL blog satu demi satu kedalam Daftar Isi. Bagi yang sudah mempunyai banyak postingan, mungkin akan merasa ribet karena harus memasukan URL satu demi satu. Tapi apabila sudah punya, pekerjaan kita akan relatif lebih mudah. Caranya kita tinggal memasukkan URL postingan baru segera setelah postingan kita published. Dengan begitu, kita tidak akan merasa ribet kok. Cuma memakan waktu kurang dari 30 detik. 🙂 Yang penting tampilan OK…

Ini screenshot Daftar isi di blog saya yang baru:

Setidaknya beginilah tampilan bagus menurut saya yang sesui bagi blog saya aris-unik-menarik.blogspot.com, tapi bagi masing-masing orang mungkin berbeda lagi.
Kenapa sih harus memakai daftar isi? Jawabannya adalah sama apabila ada yang bertanya “Kenapa sih buku harus ada daftar isi?”, Yaitu supaya pembaca mudah mencari apa yang mereka ingin baca. Begitu.. 🙂

Nah bagi yang tertarik dengan daftar isi ini, dibawah ini cara membuat daftar isi seperti di atas:
Langkah-langkah Membuat daftar isi dengan scrollbar :

1.Sign blog anda.
2.Klik Design.
3.Klik Add a Gadget.
4.Klik HTML / Javascript.
5.Copy kod dibawah ini, paste pada kotak HTML / Javascript.

Daftar isi mengunakan icon :

<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>

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

<a href=”http://aris-unik-menarik.blogspot.com/2011/04/10-gejala-narsis.html”>10 Gejalan Narsis</a></div>

<div class=”list”>
<a href=”http://aris-unik-menarik.blogspot.com/2011/04/10-password-terpopuler-di-dunia.html”>10 Password Terpopuler di Dunia</a></div>

<div class=”list”>
<a href=”http://aris-unik-menarik.blogspot.com/2011/04/wasiat-wasiat-aneh-di-dunia.html”>Wasiat-Wasiat Aneh di Dunia</a></div>

</div>

Daftar isi menggunakan angka:

<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:284px; height:180px; background-color: #ffffff; border:1px solid #ffffff;”>

<div class=”list”>
<a href=”http://aris-unik-menarik.blogspot.com/2011/04/10-gejala-narsis.html”>10 Gejalan Narsis</a></div>

<div class=”list”>
<a href=”http://aris-unik-menarik.blogspot.com/2011/04/10-password-terpopuler-di-dunia.html”>10 Password Terpopuler di Dunia</a></div>

<div class=”list”>
<a href=”http://aris-unik-menarik.blogspot.com/2011/04/wasiat-wasiat-aneh-di-dunia.html”>Wasiat-Wasiat Aneh di Dunia</a></div>
<div class=”list”>

</div>

Catatan: 
380px merupakan lebar kotak, 180px merupakan tinggi kotak, #ffffff pada background-color merupakan warna background, dan #ffffff pada border merupakan warna garis tepi. Silakan ganti mengikut sesuai dengan template anda.
Gantikan perkataan yang berwarna Merah dengan alamat postingan anda dan ganti tulisan berwarna Biru yang dengan tajuk posting anda.
Gantikan yang berwarna hijau sesuai keingiann anda. Width=Lebar dan Height=Panjang
Bisa diletakkan dimana saja: diatas, dibawah, atau bahkan di dalam postingan.
Jika anda ingin menambah posting baru, copy kode dibawah ini dan paste sebelum kode </div>.

<div class=”list”>
<a href=”alamat link yang ingin dituju”> tajuk posting </a></div>

6. Save

Sekian, semoga bermanfaat!

Membuat Daftar Isi Blog Menarik | Si Boy | 4.5
Leave a Reply