HOME | ABOUT ME | DAFTAR ISI | welcome to happydesug.blogspot.com

Minggu, 31 Oktober 2010

Membuat Vertikal Scroll Bar

Karena ada widget pada sidebar yang kadang isinya lumayan banyak, sehingga membuat ukuran panjang widget menjadi cukup besar, maka akhirnya aku cari-cari cara gimana supaya bisa membuat ukuran widgetnya menjadi lebih kecil tetapi dengan isi yang, kalau bisa, tidak berkurang.

Setelah cari-cari kesana sini, akhirnya ketemu juga caranya. Yaitu dengan membuat scroll bar pada widget tersebut, sehingga hanya sebagian kecil saja isi widget yang panjang yang ditampilkan, sementara sisanya bisa disembunyikan. Dan jika ingin melihat sisa isi widgetnya, cukup dengan menggeser bar yang ada disebelah kanan dan atau bawah widget.

Kodenya adalah sebagai berikut (tapi aku lupa dimana menemukannya ya…):

<div style="overflow: auto; width: 470px; height: 160px; background-color: #66bbdd">

Teks atau kode html yang ingin ditampilkan pada widget.

</div>

catatan:
- Ukuran pada width (lebar; 470) dan height (tinggi; 160) pada scroll bar dapat dirubah sesuai dengan ukuran lebar dan tinggi widget yang digunakan.
- Rubah kode warna background-color (#66bbdd) sesuai dengan keinginan.

Contohnya seperti dibawah ini, dibuat sesuai dengan baris kode diatas:

Karena ada widget pada sidebar yang kadang isinya lumayan banyak, sehingga membuat ukuran panjang widget menjadi cukup besar, maka akhirnya aku cari-cari cara gimana supaya bisa membuat ukuran widgetnya menjadi lebih kecil tetapi dengan isi yang, kalau bisa, tidak berkurang.

Setelah cari-cari kesana sini, akhirnya ketemu juga caranya. Yaitu dengan membuat scroll bar pada widget tersebut, sehingga hanya sebagian kecil saja isi widget yang panjang yang ditampilkan, sementara sisanya bisa disembunyikan. Dan jika ingin melihat sisa isi widgetnya, cukup dengan menggeser bar yang ada disebelah kanan dan atau bawah widget.

Kodenya adalah sebagai berikut (tapi aku lupa dimana menemukannya ya…):

<div style="overflow: auto; width: 470px; height: 160px; background-color: #66bbdd">

Teks atau kode html yang ingin ditampilkan pada widget.

</div>

catatan:
- Ukuran pada width (lebar; 470) dan height (tinggi; 160) pada scroll bar dapat dirubah sesuai dengan ukuran lebar dan tinggi widget yang digunakan.
- Rubah kode warna background-color (#66bbdd) sesuai dengan keinginan.

Posting Dengan Kategori Sama



0 komentar:

Posting Komentar

Related Posts with Thumbnails