Cara Membuat Kotak Scroll


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 :



BLOGGER



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 :

Klik: :
<div style="overflow:auto; width:150px; height:100px; padding:10px; border:1px solid #000000;">BLOGGER</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.




Ditulis Oleh : Unknown ~ Tips dan Trik Blogspot

Christian angkouw Sobat sedang membaca artikel tentang Cara Membuat Kotak Scroll. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya

No comments:

Post a Comment