Cara membuat daftar isi scroll

Selamat malam semua,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:160px;height:220px;padding:10px;border:2px solid #eee'><ul><li><a href='http://fadliesquall.blogspot.com/2010/03/template-blogger_05.html'>free template 3 column</a></li>

<li><a href='http://fadliesquall.blogspot.com/2010/02/pasang-buku-tamu-di-sidebar.html'>Cara Membuat buku tamu</a></li>

<li><a href='http://fadliesquall.blogspot.com/2010/02/tutorial-blog-memperindah-header-dengan.html'>memperindah header dengan tampilan grafity</a></li>

<li><a href='http://fadliesquall.blogspot.com/2010/03/membuat-buku-tamu-tersembunyi.html'>membuat buku tamu tersembunyi</a></li>

<li><a href='http://fadliesquall.blogspot.com/2010/03/mengganti-header-blog-dengan-benner.html'>mengganti header blog dengan banner</a></li>

<li><a href='http://fadliesquall.blogspot.com/2010/03/cara-menulis-code-script-pada-postingan.html'>Cara menulis code script pada postingan</a></li>

<li><a href='http://fadliesquall.blogspot.com/2010/03/mengganti-tampilan-cursor-pada-blogger.html'>mengganti tampilan cursor pada blogger</a></li>

<li><a href='http://fadliesquall.blogspot.com/2010/03/membuat-halaman-123_25.html'>cara membuat halaman berurut123</a></li>

<li><a href='http://fadliesquall.blogspot.com/2010/03/cara-mengganti-template-blogger.html'>cara mengganti template blogger</a></li>

</ul></div> 



4.setelah anda edit dengan daftar isi yang ingin anda masukan, simpan.hasilnya seperti dibawah 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. 


gimana??ngerti??mudah bangetkan...selamat mencoba kawan..jangan lupa comment, 

7 komentar:

Menip Capolist mengatakan...

berarti harus ngisi satu satu alamat urlnya?? waduh!!!

Fadliansyah(fo_fot) mengatakan...

ya bgtu lah...tapi mudah aja ko,,!?

SMAN1GANGGALOMBOKUTARA mengatakan...

gimana cara membuat hurup berjalan di atas,,, seperti mas yaitu kata wellcome to fot_fot... lz rian

Arif Pri mengatakan...

makasih gan sangat bermanfaat buat blog pemula seperti saya..

Ibnu Zuhri mengatakan...

Makaziiii Mass!
Saya coba nich!

Sauqi Syahtia mengatakan...

Mnatap gan infonya
kunjungi sauqisyahtia.blogspot.com

Mang Uem mengatakan...

thanks sudah berbagi ilmunya, sukses selalu....

Posting Komentar

 
 
 

About Me

Foto Saya
Fadliansyah(fo_fot)
hal yg di lakukan dgn baik+niat yg baik...psti berhasil dgn baik.
Lihat profil lengkapku

Pengikut