CARA MEMBUAT DAFTAR ISI BLOG

Membuat daftar isi blog sangat direkomendasikan, karena dengan kita memasang daftar isi blog pada sidebar sangat banyak membatu para netter (pengunjung) segera menemukan program-progran pada postingan yang dia perlukan, selain itu memudahkan untuk penjelajahan (berselancar) pada blog kita. Dengan demikian maka secara tak langsung kita memanjakan para pengunjung untuk melihat atau membaca pada postingan kita, memang seharusnya memang demikian karena pengunjung adalah tamu maka sebisa bisanya membuat para tamu betah di blog kita.

Adapaun cara membuatnya adalah ada 2 cara :

1.  Cara membuat daftar isi blog secara otomatis.

2.  Cara membuat daftar isi blog secara manual.

Marilah kita bahas satu persatu cara pembuatannya :

1.  DAFTAR ISI BLOG OTOMATIS.

• Yang saya maksud otomatis disini ialah begitu anda membuat setingannya, maka setelah anda habis menulis postingan secara otomatis setelah anda simpan postinganya, judul postingan akan muncul di daftar isi, lengkap dengan tanggal dan bulannya, dan ini hanya bisa digunakan di blogspot.

Langkah pertama :

• Sign in di blogger

• Klik menu Layout

• Klik menu Edit HTML

• Klik link Download full template, silahkan save untuk backup data

• Copy paste kode CSS berikut di atas kode ]]></b:skin>

#toc {  border: 0px solid #000000;  background: #ffffff;  padding:2px; width:495px;  margin-top:10px;}
.toc-header-col1, .toc-header-col2,
.toc-header-col3 {  background: #B5CBFA;  color: #000000;  padding-left: 5px;  width:250px;}
.toc-header-col2 {  width:75px;}
.toc-header-col3 {  width:125px;}
.toc-header-col1 a:link, .toc-header-col1 a:visited,
.toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link,
.toc-header-col3 a:visited {  font-size:100%;  text-decoration:none;}
.toc-header-col1 a:hover,
.toc-header-col2 a:hover,
.toc-header-col3 a:hover {  font-size:100%;  text-decoration:underline; color:#3D3F44;}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {  padding-left: 5px;  font-size:100%; background:#f0f0f0;}

• Klik Simpan Template

Langkah kedua :

• Klik menu Elemen Halaman

• Klik tulisan Tambah sebuah Elemen Halaman

• Klik tombol TAMBAHKAN KE BLOG di bawah tulisan JavaScript/HTML

• Copy paste kode berikut ke dalam elemen yang muncul

<div id="toc"></div>

• Klik tombol Simpan

• Pindahkan elemen yang baru di buat tepat di atas elemen Post

1. Klik tombol Simpan yang berada di sebelah atas

• Klik tulisan Tambah sebuah Elemen Halaman kembali

• Klik tombol TAMBAHKAN KE BLOG di bawah tulisan JavaScript/HTML

• Beri judul elemen tersebut dengan yang kata yang sobat ke hendaki. Contoh : DAFTAR ISI, kemudian copy paste kode berikut ke dalam kotak elemen

<div id="toclink"><a href="javascript:showToc();">Lihat Daftar Isi</a><br/><br/></div>
<script style="text/javascript" src="http://home.planet.nl/~hansoosting/downloads/blogtoc.js"></script>
<script src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>

• Ganti tulisan YOURBLOG dengan nama blog sobat

• Klik tombol Simpan

• Pindahkan elemen yang baru di buat ke tempat yang sobat sukai (sebaiknya di simpan disebelah atas)

• Klik tombol SIMPAN yang berada di sebelah atas

• Selesai

2.  DAFTAR ISI BLOG SECARA MANUAL.

Adapun cara manual setingan ini bisa dipakai di semua situs tanpa kecuali, hanya sayangnya sehabis kita menulis postingan, masih harus menulis judul postingan di kotak daftar isi.

Adapun caranya sebagai berikut :

• Copy dan paste code dibawah ini dan silahkan anda taruh di sedebar, dimana saja.
  

<div style="overflow:scroll;width:340px;height:250px; background-color: #FFFFFF; border:1px solid #ccc;text-align: left;padding:5px">
<ul>
<li><a href="http://yourblog.com/cara-membuat-daftar-isi-blog">1. CARA MEMBUAT DAFTAR ISI BLOG </a></li>
<li><a href="http://yourblog.com/cara-mengganti-background-blogspot">2.  CARA MENGGANTI BACKGROUND BLOGSPOT </a></li>

</ul>
</div>

• width:340px;height:250px silahkan anda ganti dan sesuaikan dengan sidebar anda
  
• http://yourblog.com ganti dengan alamat blog anda
• Nomer 1 dan nomor 2 adalah judul postingan.

Selamat mencoba……!!

Posted in: Triks dan Tips