Cara Membuat Kotak Daftar Isi

Postingan ini saya buat untuk menjawab pertanyaan dari seorang rekan blogger yang menanyakan kepada saya melalui email. Beliau bertanya kesaya, "mas, bagaimana cara membuat kotak blogger tutorial seperti di blog mas herman?" Hm.. Mungkin yang dimaksud adalah yang ini kali ya :)

Blogger Tutorial

1. Apa itu blog

2. Panduan membuat blog di blogger

3. Bagaimana cara memposting artikel pada blog

4. Optimalkan tampilan blog dengan template modern

5. Mengganti header template pada blogger

6. Cara mudah mengganti warna dan font template

7. Mengenali fungsi-fungsi dalam menu setting blog

8. cara menambahkan read more/ baca selengkapnya pada blogger

9. Cara membuat dan memasang shoutbox pada blogger

10. Cara mengatasi masalah pada kode read more

11. Memasang foto di profile

12. Apa fungsi label

13. Cara menambahkan yahoo emoticons pada blogger

14. Memposting kode HTML pada artikel

15. Mendaftar dan mengupload gambar di photobucket

16. Menambah favicon pada blogger

17. Menambahkan search box atau kotak pencari pada blogger

18. Cara menghapus gambar di picasa web album

19. Tips menghilangkan warna pada kotak blockquote

20. Cara mendapatkan kode warna dengan photoshop

21. Cara mendapatkan kode warna dengan ms paint

22. Cara membackup template, widget, dan artikel

23. Cara menghilangkan icon quick edit berbentuk tang dan obeng

24. Memasang feedjit pada blogger

25. Memasang jam pada blog

26. Membuat efek marquee atau teks berjalan

27. Tentang RSS feed

28. Memanfaatkan translator online dari google

29. Pasang Google Translator pada blog

30. Cara membuat kotak scrollbar pada blogger

Ok sebenarnya cukup mudah untuk membuat daftar isi seperti diatas. Bagi anda yang sudah lama ngeblog pasti sudah tahu cara membuatnya hanya saja mungkin caranya yang berbeda.

Nah berikut saya akan memberikan cara membuat kotak daftar isi dengan cara saya sendiri. Silahkan diikuti bagi yang ingin mencobanya.

1. Login ke blogger. Buka menu Design -> Page Elements
2. Klik Add a Gadget -> HTML/Javascript. Masukkan kode dibawah ini kedalam kotak

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

<div class="list">
1. <a href="http://www.hermanblog.com/2008/10/apa-itu-blog_15.html">Apa itu blog</a></div>

<div class="list">
2. <a href="http://www.hermanblog.com/2008/10/cara-membuat-blog-di-blogger_16.html">Panduan membuat blog di blogger</a></div>

</div>

Keterangan:
380px merupakan lebar kotak
180px merupakan tinggi kotak
#ffffff pada background-color merupakan warna background
#ffffff pada border merupakan warna garis pinggir. Silahkan ganti 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 anda ingin menambah postingan baru maka copy kode yang berkedip lalu letakkan diatas kode </div>

Jangan lupa untuk mengganti angkanya dengan angka 3 dan begitu seterusnya jika anda ingin menambah postingan baru lagi.

3. Kalau sudah klik Save Template. Selesai.

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

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

Dengan kode berikut

<style>
.list {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKkYeDnS6zuwKI21IFKZ4X1k2MyPoOnBhtyjjcePezdeFg3zrxnYPvSdOw766cJmSrfPoOiomAVuvAwq3IywCX3JJR45VvOk3aez6Ldbe2apgZozfAT_WHY9RUo1O1u8K4HeIG73KRhorz//") 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. Semoga berhasil

Artikel Terkait