Selamat Datang

Cara Buat Kotak Daftar Isi Di Blog

Nah berikut saya akan memberikan cara membuat kotak daftar isi dengan cara saya sendiri, Seperti yg anda lihat disebelah kanan Blog saya ini ,Silahkan diikuti bagi yang ingin mencobanya.

1. Login ke blogger. Buka menu Design -> Tata Letak
2. Klik Add a Gadget -> HTML/Javascript. Masukkan kode dibawah ini kedalam kotak

 <style>
.list {
border-bottom:1px dotted #ddd;
line-height:1.2em;
padding:3px;0px 0px 20px;
}
</style>

<div  style="overflow:auto; padding:3px; margin:0px 0px 0px 0px; width:215px; height:180px; background- border:1px solid #ffffff;color:#ffffff;">

<div class="list">
1.<a href="http://rizalyuliandi.blogspot.com/2012/05/belajar-buat-blog-blogger.html">Belajar Nge Blog / Blogger</a></div>

<div class="list">
2.<a href="lhttp://rizalyuliandi.blogspot.com/2012/06/cara-singkat-buat-like-box-fb-di-blog.htm">Cara Singkat Buat Like FB di Blog</a></div>

</div>

 3. Kalau sudah klik Save Template. Selesai.

 Keterangan:
  215px  = lebar kotak ( bisa di ganti sesuai keinginan )
 180px  = tinggi kotak ( bisa di ganti sesuai keinginan )
 #ffffff  pada background-color merupakan warna background ( bisa di ganti sesuai keinginan )
 #ffffff  pada border merupakan warna garis pinggir.  ( bisa di ganti sesuai keinginan )
 padding  = jarak antar tulisan dengan garis pinggir  ( bisa di ganti sesuai keinginan )
 border =  ketebalan garis pinggir  ( bisa di ganti sesuai keinginan )
Ganti tulisan warnah merah dgn alamat postingan anda dan ganti tulisan berwarna merah muda dengan judul postingan anda. Jika anda ingin menambah postingan baru , maka copy kode seperti no 1 dan no 2 dan letakkan diatas kode </div>

 NB : Jika anda ingin menggunakan icon gambar sebagai pengganti angka maka copy kode ini dan letakan code seperti ini :

   <style>
    .list {
    background: url("http://lh4.ggpht.com/_15FopxVONSo/ShYuf4RqUuI/AAAAAAAACxI/jcump2GgfLg   /iconbullet.gif") no-repeat left center;
    border-bottom:1px dotted #ddd;
    line-height:1.2em;
    padding:3px 0px 0px 20px;
    }
    </style>

<div  style="overflow:auto; padding:3px; margin:0px 0px 0px 0px; width:215px; height:180px; background- border:1px solid #ffffff;color:#ffffff;">

<div class="list">
<a href="http://rizalyuliandi.blogspot.com/2012/05/belajar-buat-blog-blogger.html">Belajar Nge Blog / Blogger</a></div>

<div class="list">
<a href="lhttp://rizalyuliandi.blogspot.com/2012/06/cara-singkat-buat-like-box-fb-di-blog.htm">Cara Singkat Buat Like FB di Blog</a></div>

 </div>

Jangan lupa untuk menghapus angkanya  dan begitu seterusnya jika anda ingin menambah postingan baru lagi.

3. Kalau sudah klik Save Template. Selesai.

Selamat mencoba. Semoga berhasil..... 

3 komentar: