Trik Mudah Cara Membuat Daftar Isi Blog

Beberapa artikel terakhir yang saya posting di blog seperti Cara Memasang Tracking ID kode Google analystics di blog dan artikel sebelumnya berhubungan dengan SEO. Agar tidak terlalu banyak di pusingkan dengan Optimasi SEO saya akan selingi artikel SEO di BB dengan artikel tentang cara menghias dan mempercantik blog.

Widget daftar isi blog otomatis.

Saya memilih menulis artikel tentang widget daftar isi blog sebagai selingan artikel SEO Blogger Bugis. Alasannya, karena Widget Daftar isi Blog akan membuat pengunjung lebih mudah mencari artikel di dalam blog.Tampilannya yang menarik tidak akan membuat pengunjung bosan berlama lama nongkrong di blog.

Selain itu, Cara Membuat Daftar isi blog yang akan saya share di artikel ini akan bekerja secara otomatis tanpa perlu memasukkan link artikel satu persatu ke dalammya. Yang membuatnya lebih menarik, gadget Daftar Isi Blog ini di lengkapi dengan menu drop down untuk memudahkan pengunjung memilih jenis artikel yang akan di tampilkan oleh daftar isi blog keren ini.

Pengunjung bisa memilih melihat daftar isi Blog berdasarkan tanggal posting, dan bisa juga berdasarkan label artikel. Saya juga menambahkan Kotak dengan Fungsi Scroll agar widgetnya tidak terlalu panjang ke bawah jika settingan widget memuat ratusan artikel sehingga membuat widget ini lebih menarik. Untuk melengkapi tampilannya, saya juga menambahkan efek shadow inset atau efek bayangan ke dalam box widget, artinya, anda bisa menyebut widget ini dengan "Widget daftar isi blog otomatis dengan scroll efek shadow"

Agar anda lebih tertarik untuk memasang widget daftar isi Blog otomatis ini di blog anda, silahkan lihat gambar di bawah ini :

Tidak puas dengan gambar ?

Klik tombol spoiler di bawah ini untuk melihat Live Demonya :

Untuk membuat daftar isi blog otomatis seperti di atas, kode yang digunakan adalah sebagai berikut :

<div style="background: #f2f2f2; width: 320px; color: #000; float: center; font: normal 13px verdana; height: 350px; margin: 10px auto; overflow: auto; padding: 10px; text-align: left; text-shadow: 1px 1px 2px #fff; border:4px double #ccc; -moz-box-shadow: inset 2px 2px 2px #404040; -webkit-box-shadow: inset 2px 2px 2px #404040;box-shadow: inset 2px 2px 2px #404040">
<div id="cl_option">
Masih loading bro... sabar ya... </div>
<div id="cl_content_list">
</div>
<script type="text/javascript">
var jumlah_kata_dalam_ringkasan =200;
</script>
<script type="text/javascript" src="https://sites.google.com/site/bloggerbugisdotkom/javascript/Dafatar_isi_Biasa_Bloggerbugis.js">
</script>
<script type="text/javascript" src="http://www.bloggerbugis.com/feeds/posts/default?alt=json-in-script&amp;callback=onLoadFeed&amp;max-results=500">
</script>
<div style="float:right;font:normal 10px verdana; color:#ccc;text-align:right;padding:5px 0px;text-shadow:1px 1px 1px #000">
Widget by <a href="http://www.bloggerbugis.com">Blogger Bugis</a></div>
</div>

Kode di atas bisa di edit untuk menyesuaikan tampilannya dengan tema blog anda.

Perhatikan kode yang berwarna merah !!!

• f2f2f2 adalah kode warna background ( Warna Latar Belakang ) yaitu Abu - Abu. Ganti kode tersebut dengan kode warna yang anda inginkan untuk mengganti warna background widget Daftar Isi Otomatis.Untuk melihat kode warna HTML, silahkan klik "Daftar Kode Warna HTML".
• 320px adalah Kode lebar widget. Ganti dengan angka yang lebih besar untuk membuat widgetnya lebih lebar atau ganti dengan angka yang lebih kecil untuk membuat widgetnya lebih sempit. Misalnya 300px atau 350px.
• 000 adalah kode warna tulisan yaitu hitam. Silahkan ganti dengan warna yang anda inginkan. Adapun warna Link yang ada di dalam widget, tergantung dari pengaturan CSS template anda.
• 4px double adalah kode ketebalan garis pinggir widget, yaitu garis pinggir ganda ( double ) dengan ketebalan 4 piksel ( 4px ) . Ganti dengan angka 4 yang lebih besar atau lebih kecil. untuk membuat hanya 1 garis pinggir, ganti double dengan solid, untuk membuat garis pinggir putus - putus, ganti dengan dashed
• ccc adalah kode warna garis pinggir, ganti dengan kode warna yang anda inginkan.
• Masih loading bro... Sabar ya.... adalah kalimat yang di tampilkan jika widgetnya belum terbuka karena halaman masih loading. Silahkan ganti dengan kalimat yang anda inginkan.
• 500 adalah jumlah maksimal judul artikel yang akan di tampilkan di dalam widget daftar isi otomatis. Ganti dengan angka yang lebih besar atau lebih kecil. Pada live demo yang anda lihat di atas, saya hanya menggunakan 15.
• Yang terakhir dan paling penting adalah kode http://www.bloggerbugis.com. Ganti kode tersebut dengan URL / Alamat blog anda

Dengan mengedit semua kode di atas, anda akan memiliki daftar isi blog yang sesuai dengan tema warna blog anda. Silahkan pasang widgetnya pada sidebar blog atau laman atau halaman artikel blog anda, jika belum tahu caranya, simak tutorialnya berikut ini :

Cara Memasang Widget Daftar Isi Blog Otomatis

Ada 2 cara yang bisa di lakukan untuk memasang widget daftar isi tersebut di dalam blog. Yang pertama adalah memasang daftar isi blog otomatisnya pada sidebar blog, dan yang kedua memasang daftar isi otomatis tersebut pada halaman artikel atau laman blog. Berikut masing masing panduan cara memasang daftar isi blog otomatis :

1. Pasang Daftar Isi Blog Otomatis di Laman atau Halaman Artikel

Untuk memasang daftar isi otomatis pada Laman Baru atau Halaman Posting ( artikel ), silahkan masuk ke Post Editor blogspot sama seperti jika ingin membuat artikel. Pada halaman Post Editor, pilih mode HTML lalau paste kode Daftar Isi Blog Otomatis.

Untuk membuat widgetnya berada di tengah halaman, tambahkan kode <center> sebelum kode Daftar Isi lalau tambahkan kode </center> di bawah kode daftar isi sehingga kodenya akan terlihat seperti ini :

<center>

Kode Daftar Isi Blog Otomatis

</center>

Setelah selesai, jangan lupa publish / terbitkan seperti artikel biasa.

2. Pasang Daftar Isi Blog Otomatis Pada Sidebar Blog 

Untu memasang daftar Isi Blog Otomatis pada sidebar blog, silahkan masuk ke halaman TATA LETAK >>> Klik Tambah Gadeget >>> Pilih HTML/JavaScript >>> Copy Paste kode Daftar Isi ke kotak HTML/JavaScript >>> Klik Simpan.

Penjelasan lengkap tentang cara memasukkan widget daftar isi Blog pada sidebar blog, klik "Cara Menambahkan Widget di Blog" untuk membaca tutorialnya yang di lengkapi dengan gambar

Semoga artikel Blogger Bugis tentang Cara Membuat Daftar Isi blog ini bermanfaat. Jika anda kurang suka dengan widget ini, saya akan membuat artikel lagi tentang widget daftar isi di blog dengan tampilan berbeda

Happy Blogging..