Cara Membuat Daftar Isi Otomatis Beautiful

Daftar isi otomatis beautiful - Semua orang yang pernah belajar di sekolah pasti sudah tahu tentang Daftar Isi. Otomatis, hampir semua orang sudah tahu dengan istilah ini yaitu sesuatu yang berjalan atau bekerja sendiri. Beautiful, banyak orang yang tidak tahu istilah ini. Orang yang setidaknya pernah belajar bahasa inggris atau punya teman seorang bule kemungkinan besar tahu arti kata yang satu ini yaitu "Jelek" . Anda sudah punya Daftar Isi Otomatis Beautiful di blog anda ?


Tentang Daftar Isi beauty
 "Membuat daftar Isi Otomatis". Adapun kata "beautiful"saya tambahkan di akhir judul agar judulnya terkesan menarik dan membuat anda penasaran untuk membaca artikel ini . Selain itu, Daftar isi Otomatis yang dimaksud disini memang terkesan sederhana tapi tetap elegan dan menarik. Dengan demikian, Daftar Isi otomatis yang satu ini memang pantas disebut beautiful.

Dengan membuat daftar isi di blog, pengunjung akan lebih mudah menemukan setiap artikel yang ada di blog. Selain itu, daftar isi otomatis ini tidak harus dipasang di sidebar blog sehingga meskipun menggunakan JavaScript tetap tidak akan menambah berat badan blog. Apabila anda penasaran bagaimana tampilan Dafatar Isi Otomatis yang satu ini, silahkan lihat "LIVE DEMO" atau screenshoot gambarnya di bawah ini :

Gambar 1 : Cara membuat daftar isi di Blog

Cara Membuat daftar isi Otomatis

Setelah melihat Live demo dan Screenshoot, anda tertarik untuk membuat daftar isi otomatis ini di blog anda ? Berikut kode yang di guanakan untuk membuat dan memasangnya di blog :

<script src="https://sites.google.com/site/bloggerbugis/js4u/daftar_isi_otomatis_bloggerbugis.js">
</script> <script src="http://www.bloggerbugis.com/feeds/posts/default?max-results=500&amp;alt=json-in-script&amp;callback=loadtoc">
</script>

Sebelum memasang kode Daftar Isi Otomatis di atas pada blog anda, ganti kode yang berwarna merah dengan URL / Alamat blog anda.

Untuk memasang widgetnya di blog, ada 2 cara yang bisa di lakukan :

1. Membuat laman untuk daftar isi blog.

Membuat halaman khusus untuk memasang daftar isi blog caranya sama seperti membuat artikel biasa. Bisa juga menggunakan laman baru seperti yang anda lihat di Live Demo. Yang perlu di ingat, kodenya harus dimasukkan pada mode HTML ( Bukan Mode Compose )

Gambar 1 : Cara membuat daftar isi di Blog

 

2. Membuat daftar isi di sidebar blog

Jika ingin memasang pada sidebar blog, tambahkan gadget baru, pilih HTML/Java Script, masukkan kode daftar isi otomatis, klik Simpan, Selesai. Apabila anda belum tahu cara menambahkan gadget / Widget baru di blog, klik "Cara menambahkan Widget Baru di Blog".

Jika anda memilih opsi nomor 2, sebaiknya buat sebuah kotak dengan fungsi scroll agar widgetnya tidak terlalu panjang ke bawah apabila blog anda sudah memiliki banyak artikel. Caranya :

Tambahkan kode berikut sebelum kode Daftar Isi Otomatis :

<div style="width:100%; height:300px; text-align:left; background:#f2f2f2;float:center;margin:0 auto; padding:5px;overflow:auto">

Setelah itu, tambahkan kode penutup kotak scrollnya di bawah kode Daftar Isi Otomatis :

</div>

Setelah kodenya digabungkan maka kodenya akan terlihat seperti ini :

<div style="width:100%; height:300px; text-align:left; background:#f2f2f2;float:center;margin:0 auto; padding:5px;overflow:auto">
<script src="https://sites.google.com/site/bloggerbugis/js4u/daftar_isi_otomatis_bloggerbugis.js">
</script> <script src="http://www.bloggerbugis.com/feeds/posts/default?max-results=500&amp;alt=json-in-script&amp;callback=loadtoc">
</script>
</div>

Widget Daftar Isi Otomatis dengan menggunakan kode di atas seperti ini :

Gambar 1 : Cara membuat daftar isi di Blog

• Lebar kotak daftar isi otomatis sesuai lebar sidebar blog anda.
• Untuk penjelasan lebih lengkap tentang kotak scroll klik "Cara membuat dan memberi gaya pada kotak dengan fungsi scroll"

Semoga artikel cara membuat Daftar Isi Otomatis ini bermanfaat.
Salam Blogger....