Cara Membuat Daftar Isi Otomatis Pada Sidebar Blog Blogspot

 Daftar isi pada blog bertujuan untuk memudahkan pengunjung melihat daftar isi pada sebuah blog. Beberapa blogger membuat daftar isi blognya pada sidebar blog atau pada halaman postingannya. Cara yang dilakukan juga berbeda. Ada yang menggunkan cara manual ada juga yang menggunakan DAFTAR ISI OTOMATIS

Kali ini saya akan share cara membuat Daftar isi blog seacara otomatis yang dipasang di sidebar blog. Daftar isi Otomatis berarti setiap kita menerbitkan atau memposting sebuah artikel pada blog, maka Daftar Isi Otomatis akan langsung mendeteksinya lalu akan menyimpan judul artikel beserta link menuju postingan tersebut. Cara ini praktis jauh lebih praktis daripada cara manual yang mengharuskan kita mengedit daftar isi setiap selesai membuat dan menerbitkan / memposting sebuah artikel.

Jika anda berniat memasang WIDGET DAFTAR ISI OTOMATIS pada sidebar blog anda, berikut caranya :

Seperti biasa, anda harus masuk terlebih dahulu ke akun blog anda dengan memasukkan Username dan Password blog di blogger dot kom.

• Pada halaman Dasbor Blog, klik "RANCANGAN".

• Pada halaman RANCANGAN, klik "TAMBAH GADGET".

• Pilih HTML/JavaScript pada jendela baru yang muncul dengan mengklik tanda plus (+) di samping tulisan HTML/JavaScript.

• Copy kode dibawah ini :

<div style="background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNl7bgrsC_rFl8inBUIfHfOaw5RbqNLAodwPzuNc2-KJUWv_PnTvVqP63sWg8nNVbMayeHqWDpNoZcYvlMh12sJiPuiHH47cP_ASBQbT7rrPlqA6FaPEBDvdyJZ8aejcooCOSFgT1LV3Ax/) no-repeat scroll 0 0; border:2px solid black; height:310px; overflow:auto; padding:10px; width:347px;">
<div id="cl_option">
Loading... </div>
<div id="cl_content_list">
</div>
<script type="text/javascript">
var jumlah_kata_dalam_ringkasan = 200;
</script>
<script src="https://sites.google.com/site/bloggerbugis/js/DaftarIsiOtomatis4U.js">

</script>
<script src="http://blogger-bugis.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=onLoadFeed&amp;max-results=500">

</script></div>

• Paste pada kotak HTML/JavaScript anda lalu klik simpan.

Hasil dari kode diatas akan terlihat seperti gambar dibawah ini.

Jika ingin mengdit tampilan DAFTAR ISI OTOMATIS blog anda, ikuti petunjuk di bawah ini.

1. Jika anda ingin menggunakan background warnaGanti tulisan TRANSPARENT dengan kode warna lalu hapus tulisan http:// sekian sekian....( kode yang diberi warna merah ). Untuk melihat kode warna, silahkan klik tulisan KODE WARNA yang ada pada bagian atas blog ini. Tepatnya di samping kiri bawah logo BLOGGERBUGIS. 
2. Apabila anda ingin menggunakan background atau Latar belakang gambar, silhkan ganti tulisan https://lh4.googleusercontent............ dan seterusnya dengan URL gambar anda. Ukuran gambarnya 360px X 330px. Jika tidak punya gambar, gunakan saja gambar tersebut diatasalias jangan mengganti URL Gambarnya. 
3. border:2px solid black berarti garis pinggir kotak DAFTAR ISI OTOMAITIS berwarna merah dengan ketebalan 2px. silahkan diedit jika anda ingin menggantinya dengan warna lain tau menambah atau mengurangi tebal garis pinggirnya.
4. Yang paling penting !!!! Anda harus mengganti URL blogger-bugis.blogspot.com dengan URL Blog anda.

Oce sob.... sekian dulu tutorialnya....
Semoga bermanfaat.......