Cara Membuat Daftar Isi Blogger di Halaman Posting

Bismillahirahmanirrahim. Sebagai blogger tentunya kita ingin memperbanyak page view pada blog yang kita buat. Salah satu caranya adalah dengan memberikan fasilitas daftar isi blogger di halaman posting, sehingga akan mempermudah pengunjung blog untuk mencari dan membaca artikel yang kita miliki. Daftar isi yang akan kita buat ini lebih mantap dari daftar isi lainnya karena daftar isi blogger ini sesuai dengan kategori yang ada di blog kita. Nah bagi kalian yang tertarik untuk memasang daftar isi di posting blogger ikuti langkah-langkahnya sebagai berikut dan demonya bisa liat pada link di bawah ini.

Download Demo

• Login Blogger
• Lalu buatlah satu postingan dan bisa diberi judul  Daftar Isi
• Lalu isikan kode di bawah ini untuk isi postingnya 
<div id="cl_option"> Tunggu Sebentar... </div> <div id="cl_content_list"> </div> <script type="text/javascript">var jumlah_kata_dalam_ringkasan = 99999;</script> <script src="http://ekosusanto.googlecode.com/files/Daftar%20Isi.js"> </script> <script src="http://www.cantiknya-ilmu.co.cc/feeds/posts/default?alt=json-in-script&callback=onLoadFeed&max-results=9999"> </script>
• Lalu pilih Post Options dan chelis Dijadwalkan pada lalu set tanggal pada saat kalian memulai pertama menulis blogger hal ini digunakan supaya posting daftar isi tidak tampil di halaman beranda blog kalian
• Lalu Terbitkan Entri dan liat entri

Setelah langkah-langkah di atas telah selesai.  Pada dasarnya daftar isi sudah selesai namun kalau ingin mempercantik tampilan daftar isi bisa tambahkan css pada template seperti di bawah ini.

• Login Blogger
• Pilih pilih Edit HTML 
• Lalu copy paste kode CSS di bawah ini sebelum kode ]]></b:skin>
#cl_option{border-bottom:solid 1px #fff;background:#141414;} #cl_content_list{margin-top:3px;overflow: auto; height: 500px; border:solid 1px #ccc;} #cl_content_list p{border-bottom:solid 1px #000;margin:0px;padding:0px;padding-top:2px} #cl_content_list a{padding-left:10px;color:#fff;} #cl_content_list a:hover{} #cl_content_list p:hover{background:#fff;color:blue;}
• Simpan template dan liat hasilnya kembali

Sekian dulu tutorial kali ini semoga bermanfaat.  Jangan lupa berkunjung kembali di blog ini