0 Cara Gampang Membuat Scroll Bar Menu List

PanduanTop - Untuk menjelaskan apa itu scroll bar, lebih jelasnya bisa  melihat tampilan gambar di samping. Berupa kotak frame yang ada Scroll Up/Down dan horizontal. Fungsi Scroll Bar ? Yang pasti untuk menghemat space (ruang) di halaman blog kita. Bisa di bayangkan seandainya kita punya daftar artikel yang sangat banyak, tentunya akan terlihat daftar yang panjang ke bawa. Ini akan menghabiskan tempat. Dengan scroll bar akan terlihat simple dan rapi.
Bagaimana cara menerapkannya ?
Bagi sobat seorang IT yang terbiasa membaca code atau utak-atik code tentu sangat familiar dan mudah memahaminya, tapi sobat blogger bermacam-macam latar belakangnya. Untuk itu saya mencoba memberikan contoh dengan cara mudah dan praktis saja.

Perhatikan kode di bawah ini :

<table border="0" width="200"><tbody><tr><td>
<div style="font-family: arial; font-size: 13px; overflow: scroll; width: 200px; height: 150px;"><div style="text-align: left; width: 100%; overflow: hidden;"> 
<ul>
    <li><a href="http://URL">List Description 01</a></li>
    <li><a href="http://URL">List Description 02</a></li>
    <li><a href="http://URL">List Description 03</a></li>
    <li><a href="http://URL">List Description 04</a></li>
    <li><a href="http://URL">List Description 05</a></li>
    <li><a href="http://URL">List Description 06</a></li>
    <li><a href="http://URL">List Description 07</a></li>
    <li><a href="http://URL">List Description 08</a></li>
    <li><a href="http://URL">List Description 09</a></li>
</ul>
</div></div></td>
</tr>
</tbody></table>
</div>

Perhatikan Text yang di tandai warna : Biru, Merah dan Orange
Warna Biru menunjukkan ukuran frame seperti Lebar (Width), Tinggi (Height), Border dan ukuran font.  Warna Merah adalah alamat URL dari daftar list yang di tuju. Warna Orange adalah text yang muncul di frame. Sementara kode :

<li><a href="http://URL">List Description 09</a></li>

Bisa di perbanyak sesuai banyaknya list artikel.

Silahkan sesuaikan dengan kebutuhan Anda kira - kira mau di tempatkan di mana (Sidebar atau Posting). Untuk penempatan di posting bisa langsung di taruh di halaman posting, atau di sidebar yaitu dengan menambahkan widget >> add html

Mudah bukan ?? Selamat mencoba :)

Komentar →