Membuat Menu Fungsi Scroll

Beberapa hari nggak online/update blog,saat lihat komentar ada sobat yang menanyakan sambil belajar bagaimana membuat fungsi scroll seperti pada sidebar seperti disamping blog ini.
Kira-kira komentar itu seperti ini :

mas, salam kenal. aku penasaran gimana cara buat kotak yang kayak Blog Tutorial itu ?? mohon bimbingannya mas ...

Untuk itu mumpung lagi ada waktu,sekarang kita kita bahas menghias blog dengan memanfaatkan fungsi scrollbar ya..
Untuk lebih relevan,sebaiknya diletakkan pada sidebar

Untuk membuat menunya sobat hanya membutuhkan kode HTML seperti ini :

<div style="overflow:auto;width:320px;height:250px;padding:10px;border:1px solid #eee">

isi menu

</div>

Keterangan :

1. width --> lebar menu
   
   
2. height --> tinggi menu
   
   
3. padding --> jarak antar tulisan dengan garis pinggir
   
   
4. border --> ketebalan garis pinggir

Contoh Menu dengan Fungsi Scroll :

1. Shareapic - Upload Gambar di Bayar Dollar$$

2. Penghasilan dari PPC Lokal - KumpulBlogger

3. Linkbucks - Merubah Link Menjadi Dollar $$

4. Income Tambahan dari Ziddu

5. Tips Shvoong dapet Traffic dan Dollar

6. ReviewMu-Part Review Pertama di Indonesia

7. AdReviewCamp-Paid Review Indonesia

8. Dollar dari PTC (Paid To Click)

9. Tips & Trik Memilih PTC

10. Vinefire-Tips Mendapatkan Traffic dan Dollar dr Internet

11. Apa Itu Paypall ??

Contoh kode HTML untuk menu di atas :

<div style="overflow:auto;width:320px;height:250px;padding:10px;border:1px solid #eee">

<a href="http://banuutomo.blogspot.com/2009/11/shareapic-upload-gambar-di-bayar-dollar.html"> Shareapic - Upload Gambar di Bayar Dollar$$</a>

<a href="http://banuutomo.blogspot.com/2009/11/penghasilan-dari-ppc-lokal-kumpul.html"> Penghasilan dari PPC Lokal - KumpulBlogger</a>

<a href="http://banuutomo.blogspot.com/2009/11/linkbucks-merubah-link-menjadi-dollar.html">Linkbucks - Merubah Link Menjadi Dollar $$</a>

<a href="http://banuutomo.blogspot.com/2009/10/income-tambahan-dari-ziddu.html"> Income Tambahan dari Ziddu</a>

<a href="http://banuutomo.blogspot.com/2009/09/tips-shvoong-bisa-dapet-dollar-dan.html"> Tips Shvoong dapet Traffic dan Dollar</a>

<a href="http://banuutomo.blogspot.com/2009/10/reviewmu-paid-review-pertama-di.html">ReviewMu-Part Review Pertama di Indonesia</a>

<a href="http://banuutomo.blogspot.com/2009/10/adreviewcamp-paid-review-indonesia.html">AdReviewCamp-Paid Review Indonesia</a>

<a href="http://banuutomo.blogspot.com/2009/10/dollar-dr-ptc-paid-to-click.html">Dollar dari PTC (Paid To Click)</a>

<a href="http://banuutomo.blogspot.com/2009/10/tips-memilih-ptc.html">Tips & Trik Memilih PTC</a>

<a href="http://banuutomo.blogspot.com/2009/09/tips-mendapatkan-traffic-dan-dollar-dr.html">Vinefire-Tips Mendapatkan Traffic dan Dollar dr Internet</a></li>

<a href="http://banuutomo.blogspot.com/2009/10/apa-itu-paypall.html">Apa Itu Paypall ??</a>

</div>

Sedikit keterangan tentang elemen diatas :

1. 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.
   
   
2. width:310px; ==>> adalah lebar bidang yang di inginkan, dalam hal ini adalah sebesar 310 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%).
   
   
3. height:200px; ==>> adalah tinggi bidang yang di inginkan, nilai ini bisa di ubah sesuai keinginan, misal jadi 300px.
   
   
4. padding:10px; ==>> adalah jarak agar tulisan yang ada dalam halaman tersebut tidak menabrak dinding halaman, nilai ini tentu saja bisa di ubah sesuai keinginan. misal : padding:5px;
   
   
5. border:1px solid #eee » agar bidang tersebut terlihat ada kotaknya, jika sobat tidak menginginkan ada terlihat kotaknya, maka tinggal di hapus saja.

gimana ?? Gampang kan sobat !!!

sekarang tinggal sobat kreasikan sendiri ...

Salam Blogger Indonesia ..