welcome to Not Only Green weblog

Google Website Translator Gadget

Monday, November 1, 2010

Membuat Vertikal Scroll Bar

vertical scroll barKarena 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.

0 comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...