Cara Membuat Daftar Isi Otomatis Pada Blog

Cara Membuat Daftar Isi Otomatis Pada Blog

Posted by rike on 0

Sudah hampir semua tutorial dasar blogspot dibahas di blog Dapur Tutorial Blogspot. Tutorial dasar tersebut akan sangat membantu anda ke tutorial berikutnya yang sedikit lebih susah dari tutorial dasar ini. Nah kali ini Dapur Tutorial Blogspot akan menyampaikan cara membuat daftar isi blog secara otomatis. Tanpa andanya daftar isi pada blog Dapur Tutorial Blogspot merasa belum lengkap makanya tutorial ini perlu disampaikan

Contohnya daftar isi otomatis ini  bisa anda lihat pada blog ini, semua artikel yang dibuat akan langsung terindeks dengan sendirinya sehingga anda tidak perlu susah-susah memasang judul artikel satu-persatu pada halaman blog anda. Daftar isi otomatis ini bisa anda letakan didalam postingan artikel seperti daftar isi Dapur Tutorial Blogspot dan anda juga dapat meletakannya dibagian sidebar blog anda.

Sebelum kita membahas lebih jauh tetang cara membuat daftar isi otomatis ini anda harus tau terlebih dahulu tetang cara mengisi label pada artikel karena apabila artikel anda belum diberi label (kategori) maka artikel anda tidak bisa terindex sebab daftar isi otomatis ini berdasarkan label (kategori). Silahkan baca Cara Untuk Mengisi Label (Kategori) Pada Sebuah Artikel Blog

Cara membuat daftar isi otomatis ini adalah sebagai berikut :

 [-] Membuat daftar isi pada postingan blog

1. Login terlebih dahulu ke akun blog anda
2. Setelah anda login Klik Entri Baru

3. Pilih mode entri pada Bagian HTML






4. Copy kode berikut

<div style="overflow:auto; padding:3px; margin:0px 0px 0px 0px; width:250px; height:220px; background-color: transparant; inset rgb(8, 8, 8);">

<script style="text/javascript" src="http://dapur-tutorial-blogspot.googlecode.com/files/daftar%20isi%20otomatis.js">

</script>
<script src="http://www.dapur-tutorial.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script>

</div>

NB :
Width;250 px; adalah panjang kotak daftar isi
height:220px; adalah Tinggi kotak daftar ini
http://www.dapur-tutorial.blogspot.com  ubah dengan URL atau alamat blog anda


5. Paste kode pada halaman yang tadi sudah anda pilih pada mode HTML seperti pada gambar berikut





6. Kemudian Klik Publikasi atau Terbitkan Entri dan lihat hasilnya

[-] Membuat daftar isi pad bagian Sidbar blog

1. Seprti diatas anda Login terlebih dahulu ke akun blogger anda
2. Pilih Tata letak





3. Klik Tambah Gadget/Widget





4. Pilih HTML/JavaScript





5. Copy Kede Berikut 

<div style="overflow:auto; padding:3px; margin:0px 0px 0px 0px; width:250px; height:220px; background-color: transparant; inset rgb(8, 8, 8);">

<script style="text/javascript" src="http://dapur-tutorial-blogspot.googlecode.com/files/daftar%20isi%20otomatis.js">

</script>
<script src="http://www.dapur-tutorial.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script>

</div>

NB :
Width;250 px; adalah panjang kotak daftar isi
height:220px; adalah Tinggi kotak daftar ini
http://www.dapur-tutorial.blogspot.com  ubah dengan URL atau alamat blog anda


6. Paste pada Box HTML/JavaScript yang tadi sudah anda pilih seperti pada gambar berikut 





7. Jangan Lupa Isi judul widget dengan daftar isi blog
8. Terakhir klik simpan dan lihat hasil