Cara Membuat Kotak Scroll

Print Friendly and PDF


Scroll Kotak Otomatis
Jika isi kotak lebih lebar dari kotaknya, maka kotak akan secara otomatis membuat scroll ke samping dan membuat scroll ke bawah apabila isi kotak lebih panjang dari ukuran kotaknya. Dengan demikian, jika ingin menyimpan widget yang lebar atau panjang atau keduanya pada sidebar blog, kita tinggal membuat kotak scroll lalu menyimpan widget tersebut di dalam kotak scrollnya.

Kotak dengan fungsi scroll kurang lebih akan terlihat seperti ini :


KOTAK dengan Fungsi Scroll Blog


Mana scrollnya ????

Apabila sudah diisi dengan tulisan atau widget yang melebihi kapasitas kotaknya, maka kotak secara otomatis akan menambahkan scroll seperti contoh di bawah ini :




Artikel Cara membuat kotak dengan fungsi scroll ini di tulis dan di buat untuk sekedar pelajaran aja,  Jika anda ingin mengcopy artikel ini, silahkan saja,semoga bermanfaaat ya....terimakasih


Atau seperti contoh kotak scroll di bawah ini yang di isi dengan gambar:





Kode yang digunakan untuk membuat sebuah kotak dengan fungsi scroll adalah :

<div style="overflow:auto; width:150px; height:100px; padding:10px; border:1px solid #000000;">DAFTAR ISI</div>

Sebelum menambahkan sedikit gaya pada kotaknya, saya akan jelaskan kode untuk membuat kotak scrollnya terlebih dahulu.

width:100px  adalah lebar kotak yang diukur dalam pixel. (100px/100pixel)
height:400px adalah tinggi kotak yang diukur dalam pixel. (400px/400pixel)
padding:10px; adalah jarak isi kotak dengan garis pinggir kotak.
border:1px solid #000000 adalah kode untuk ketebalan garis pinggir kotak ( border ) dengan garis biasa ( solid ) yang berwarna hitam ( #000000 ).
Kata BLOGGER adalah isi kotak yang berupa tulisan yang bisa juga di ganti dengan kode widget jika kotaknya di isi dengan widget.

Selamat mencoba sobat
Previous
Next Post »

WARNING..!! Etika BERKOMENTAR di Blog all's well :

a. Gunakanlah Perkataan yang Baik, Ramah dan Sopan
b. Komentar SPAM akan all's well HAPUS setelah direview
c. Komentar NEGATIF & RASIS akan Segera di HAPUS
d. Dilarang Menambahkan "LINK AKTIF" dalam Komentar

Note: "ANDA SOPAN KAMI PUN SEGAN" (all's well) ConversionConversion EmoticonEmoticon

Our Gallery