Cara Buat Daftar Isi Dengan Fasilitas Scroll Bar

mau punya daftar isi kayak punya saya kawan.........??




Ikuti ajJah langkah-langkahnya di bawah ini :

1. Login ke Blogger.
2. Buka menu Layout -> Page Elements
3. Klik Add a Gadget -> HTML/Javascript.
4. Masukkan kode dibawah ini kedalam kotak

script daftar isi dengan tanda panah di sampingnya:


<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:284px; height:180px; background-color: #ffffff; border:1px solid #ffffff;">

<div class="list">
1. <a href="http://kokobotax.blogspot.com/2009/12/cara-membuat-menu-d-tree.html">Cara membuat menu D tree</a></div>

<div class="list">
2. <a href="http://kokobotax.blogspot.com/2009/12/cara-membuat-menu-tab-view.html">cara membuat menu tab view</a></div>

<div class="list">
3. <a href="http://kokobotax.blogspot.com/2009/12/cara-membuat-menu-horizontal.html">cara membuat menu horizontal</a></div>

</div>


script daftar isi dengan angka di sampingnya:


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

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

<div class="list">
1. <a href="http://Alamat Url yang ingin di Tampilkan">Cara Mnghilangkan Navbar</a></div>

<div class="list">
2. <a href="http://Alamat Url yang ingin di Tampilkan">Panduan membuat blog di blogger</a></div>

</div>


Keterangan:

380px merupakan lebar kotak, 180px merupakan tinggi kotak, #ffffff pada background-color merupakan warna background, dan #ffffff pada border merupakan warna garis pinggir. Silahkan diganti sesuai dengan template anda.

1 comment

Poskan Komentar