Membuat Daftar Isi Otomatis Pada Blog Dengan Mudah

Sebelumnya saya telah membuat postingan mengenai cara membuat daftar isi.  Namun kali ini saya akan share tentang cara membuat daftar isi otomatis pada blog, yg tentunya sangatlah mudah  untuk diterapkan pada blog anda.

Daftar isi ini akan mengikuti label postingan pada blog anda. Jadi list daftar isi nantinya akan otomatis terupdate sesuai dengan postingan yg ada pada blog anda. Daftar ini juga saya gunakan pada blog saya, bisa anda lihat lansung pada link ini.

Berikut beberapa fitur yg terdapat pada daftar isi yg saya share kali ini, adalah sebagai berikut : 

• Menggunakan fungsi scroll 
• Tersusun sistematis berdasarkan abjad pada label postingan
• Postingan akan otomatis terindex ke daftar isi
• Postingan terbaru akan memiliki keterangan "New !!"
• Menampilkan jumlah total postingan dan komentar pada blog

Berikut cara atau langkah-langkah dalam menerapkan Daftar Isi Otomatis Pada Blog Dengan Mudah :

1. Memasang daftar isi pada Widget / Gadget blog :

• Pilih Layout / Tata Letak
• Kemudian Add Gadget / Tambahkan Gadget
• Lalu pilih HTML/Java Script
• Setelah itu pastekan kode di bawah ini :

<div style="border: 1px solid #eee; height: 500px; overflow: auto; padding: 10px; width: auto;">

<script src="http://yourjavascript.com/6438331231/contents.js"></script><script src="http://tobaccosarea.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>

<script>

function numberOfPosts(json) 

{ 

document.write('Total Posts: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>'); 

}

function numberOfComments(json) 

{

document.write('Total Comments: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');

}

</script>

<br />

<div style="border-bottom: 1px dashed #333; float: left;">

<script src="http://tobaccosarea.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=numberOfPosts"></script></div>

<div style="border-bottom: 1px dashed #333; float: right;">

<script src="http://tobaccosarea.blogspot.com/feeds/comments/default?alt=json-in-script&amp;callback=numberOfComments"></script></div>

• Ganti kode yg berwarna biru sesuai dengan tinggi daftar isi kebutuhan anda
• Ganti kode yg berwarna merah dengan URL / alamat blog anda
• Terakhir, tekan save untuk menyimpannya 

2. Memasang daftar isi pada Page / Halaman blog :

• Pilih Page / Halaman 
• Kemudian New Page 
• Setelah halaman telah dibuat, pilih tab HTML bukan tab Compose
• Setelah berada pada tab HTML maka pastekan kode diatas dan jangan lupa merubah alamat ataupun tinggi sessuai kebutuhan anda.
• Terakhir, tekan save dan lihat hasilnya. 

Gimana.. Mudah kan membuat daftar isi otomatis pada blog. Sekian dulu pada postingan kali ini, semoga bermanfaat. Jangan lupa follow dan Like postingan ini. Terima kasih. Salam bloger.

Silahkan Support Situs Ini Jika Berkenaan ;)

Tweet