Cara Buat Daftar Isi Dengan Fasilitas Scroll Bar

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:

<!-- more -->
&lt;span style=&quot;font-family<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="background-color: white; border: 1px solid rgb(255, 255, 255); height: 180px; margin: 0px; overflow: auto; padding: 3px; width: 284px;">


<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>


</div>

script daftar isi dengan angka di sampingnya:

<div style="border: 1px solid rgb(153, 153, 153); height: 200px; overflow: auto; padding: 10px;">

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

<div style="background-color: white; border: 1px solid rgb(255, 255, 255); height: 180px; margin: 0px; overflow: auto; padding: 3px; width: 380px;">


<div class="list">

1. <a href="http://alamat%20url%20yang%20ingin%20di%20tampilkan/">Cara Mnghilangkan Navbar</a></div>


<div class="list">

2. <a href="http://alamat%20url%20yang%20ingin%20di%20tampilkan/">Panduan membuat blog di blogger</a></div>


</div>


</div>: &amp;quot;; font-size: 12;&quot;&gt;&lt;/span&gt;

&lt;div class=&quot;alert&quot;&gt;
&lt;span style=&quot;font-family: &amp;quot;; font-size: 12;&quot;&gt;
&lt;/span&gt;
&lt;script language=&quot;JavaScript&quot;&gt;
var txt=&quot;&lt;span&gt;Welcome in ShareCenter.blogspot.com : Free Software, Tips 'n Tricks Computers, Free Tutorials, Free Articles and more..&lt;/span&gt;&quot;;var
kecepatan=100;var segarkan=null;function bergerak() {
document.title=txt;txt=txt.substring(1,txt.length)+txt.charAt(0);segarkan=setTimeout(&quot;bergerak()&quot;,kecepatan);}bergerak();
&lt;/script&gt;&lt;span style=&quot;font-family: &amp;quot;; font-size: 12;&quot;&gt; &lt;/span&gt;&lt;/div&gt;
&lt;span style=&quot;font-family: &amp;quot;; font-size: 12;&quot;&gt;&lt;/span&gt; &lt;/li&gt;

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.

Artikel Terkait