Cara Membuat Daftar Isi Pada Blog

Cara Membuat daftar Isi Blog yang bakal gua share di artikel ini pasti bekerja secara otomatis tanpa perlu masukin link artikel satu persatu ke dalammya yang membuatnya lebih menarik, gadget Daftar Isi Blog ini di lengkapi dengan menu drop down buat ngemudahin para SACKAKERZ milih jenis artikel yang bakal di tampilin oleh daftar isi blog keren ini.


     Pengunjung bisa milih ngeliat daftar isi Blog berdasarkan tanggal posting, dan bisa juga berdasarkan label artikel. Gua juga nambahin Kotak dengan Fungsi Scroll biar widgetnya ga terlalu panjang ke bawah kalo settingan widget memuat ratusan artikel sehingga ngebikin widget ini lebih menarik. Biar lengkapin tampilannya, gua juga nambahin 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"

 Biar lo lebih tertarik untuk masang widget daftar isi Blog otomatis ini di blog lo, liat gambar di bawah ini :

 Buat ngebikin daftar isi blog otomatis kaya di atas, kode yang digunain adalah sebagai berikut :

 <div style="background: #f2f2f2; width: 320px color: #000000; float: center; font: normal 13px verdana; height: 350px; margin: 10px auto; overflow: auto; padding: 10px; text-align: left; text-shadow: 1px 1px 2px #000000; 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 #000000">
 <div id="cl_option">
Masih loading SACKAKERZ... 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/aztasacka.blogspot.com/javascript/Dafatar_isi_Biasa_Azta_Sacka.js">
 </script>
 <script type="text/javascript" src="http://www.aztasacka.blogspot.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:#ffffff;text-align:right;padding:5px 0px;text-shadow:1px 1px 1px #ff0000">
 Widget Oleh <a href="http://www.aztasacka.blogspot.com">Azta Sacka</a></div>
 </div>

 Kode di atas bisa di edit buat menyesuaikan tampilannya dengan tema blog lo.

 Perhatiin 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.
•  000000 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 10. 
• Yang terakhir dan paling penting adalah kode http://www.aztasacka.blogspot.com. Ganti kode tersebut dengan URL / Alamat blog anda

 Dengan mengedit semua kode di atas, lo bakal punya daftar isi blog yang sesuai dengan tema warna blog lo. Coba pasang widgetnya pada sidebar blog atau laman atau halaman artikel blog lo, kalo belom tau caranya, liat tutorialnya di bawah sini :

Cara Memasang Widget Daftar Isi Blog Otomatis

 Ada 2 cara yang bisa dipake buat masang widget daftar isi itu di dalam blog. Yang pertama itu masang daftar isi blog otomatisnya pada sidebar blog, dan yang kedua masang daftar isi otomatis itu pada halaman artikel atau laman blog. Ini nih masing masing panduan cara masang daftar isi blog otomatis :

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

 Buat masang daftar isi otomatis pada Laman Baru atau Halaman Posting ( artikel ), masuk dulu ke Post Editor blogspot sama kaya lo kalo pengen bikin artikel. Pada halaman Post Editor, pilih mode HTML terus paste kode Daftar Isi Blog Otomatis.

 Buat ngebikin widgetnya ada di tengah halaman, tambahin kode <center> sebelum kode Daftar Isi terus tambahin kode </center> di bawah kode daftar isi nyampe kodenya keliatan kaya gini :

 <center>
Kode Daftar Isi Blog Otomatis
</center>

 Kalo udah, jangan lupa publish / terbitkan kaya artikel biasa.



2. Pasang Daftar Isi Blog Otomatis Pada Sidebar Blog

 Buat masang daftar Isi Blog Otomatis pada sidebar blog, coba masuk ke halaman TATA LETAK >>> Klik Tambah Gadget >>> Pilih HTML/JavaScript >>> Copy Paste kode Daftar Isi ke kotak HTML/JavaScript >>> Klik Simpan.

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

     Semoga artikel Azta Romeo Secca tentang Cara Membuat Daftar Isi blog ini bermanfaat buat lo para SACKAKERZ. Kalo lo kurang suka dengan widget ini, gua bakal bikin artikel lagi tentang widget daftar isi di blog dengan tampilan berbeda.

 Selamat berblogging-blogging ria guat para SACKAKERZ...!!!!!

"Azta Sacka"