Cara Membuat Daftar Isi Menjadi Scroll

Ketemu dalam artkel saya kali ini cara membuat daftar isi,label,categori,atau apa saja yang mungkin anda inginkan menjadi tampilan scroll, sebut saja cara membuat daftar isi scroll, karna saya menggunakannya pada daftar isi saya, coba anda liat di sebelah kanan/ sidebar saya,dan gunakan scroll mouse anda.

oke, sepertinya kita langsung saja ke cara pembuatannya.

silahkan anda ikuti langkah2 dibawah ini :
1. Login to Blogger kemudian pilih "Layout"
2. Klik pada "Page Element" trus pilih "Add a Gadget --> HTML/Javascript" (Tempatnya terserah kamu).
3.Copy Paste Script yang ada di bawah ini tinggal anda edit saja :



<div style='overflow:auto;width:250px;height:130px;padding:5px;border:2px solid #eee'><ul><li><a href='http://serbasemuaada.blogspot.com/2011/11/idul-adha-momen-meningkatkan-semangat.html'>IdulAdha Momen Meningkatkan Semangat</a></li>


<li><a href='http://serbasemuaada.blogspot.com/2011/11/konferensi-islam-wanita-di-nigeria.html'>Konferensi Islam Wanita di Nigeria</a></li>


<li><a href='http://serbasemuaada.blogspot.com/2011/11/ahmadiyah-meniadakan-dendam-dan.html'>Ahmadiyah Meniadakan Dendam dan Menyebarkan Damai</a></li>


<li><a href='http://serbasemuaada.blogspot.com/2011/11/sikap-muslim-menghadapi-kehilangan.html'>Sikap Muslim Menghadapi Kehilangan / Kefanaan Dunia</a></li>


<li><a href='http://serbasemuaada.blogspot.com/2011/11/hukuman-bagi-yang-murtad-dalam-islam.html'>Hukum Bagi Yang Murtad Dalam Islam</a></li>


<li><a href='http://serbasemuaada.blogspot.com/2011/11/lima-keyakinan-banyak-tuhan-diskusi.html'>Lima Keyakinan Banyak Tuhan Diskusi Damai</a></li>




</ul></div>







Contoh Seperti ini :

• IdulAdha Momen Meningkatkan Semangat
• Konferensi Islam Wanita di Nigeria
• Ahmadiyah Meniadakan Dendam dan Menyebarkan Damai
• Sikap Muslim Menghadapi Kehilangan / Kefanaan Dunia
• Hukum Bagi Yang Murtad Dalam Islam
• Lima Keyakinan Banyak Tuhan Diskusi Damai

4.setelah anda edit dengan daftar isi yang ingin anda masukan, simpan.hasilnya seperti diatas ini:


keterangan:

+ overflow:auto;
» kode ini agar tercipta scrolling atau penggulung halaman apabila isi
dari halaman tersebut sudah melampaui batas tinggi atau lebar yang
telah di tentukan.
+ width:300px;
» adalah lebar bidang yang di inginkan, dalam hal ini adalah sebesar
300 pixel, nilai ini tentunya di sesuaikan dengan keinginan atau di
sesuaikan dengan lebar sidebar yang ada. namun, agar selalu sesuai
dengan sidebar maka sebaiknya memakai nilai 100% (width:100%).
+ height:200px; » adalah tinggi bidang yang di inginkan, nilai ini bisa di ubah sesuai keinginan, misal jadi 250px atau nilai yang lainnya.
+ padding:10px;
» adalah kode pembuat jarak agar tulisan yang ada dalam halaman
tersebut tidak menabrak dinding halaman, nilai ini tentu saja bisa di
ubah sesuai keinginan. misal : padding:5px;
+ border:1px solid #eee » agar bidang tersebut terlihat ada kotaknya, jika anda tidak menginginkan ada terlihat kotaknya, maka tinggal di hapus saja. 

Related Post :