Padapostingan kali ini saya akan menjelaskan bagaimana cara membuat box yang bisa digeser (scroll box). Bagi para master tentunya sudah tidak aneh dengan scroll box ini.

Biasanya scroll box digunakan untuk meminimalisir space tempat, baik tinggi atau pun lebar. Penggunaan scroll box ini, bisa digunakan di postingan, edit template ataupun di widget.
Kunci dari scroll box ini adalah penambahan kode CSS:
overflow:auto
atau
overflow:scroll
kemudian, atur lebar (width) atau tinggi (height).

Perhatikan contoh tanpa scroll:
Ini adalah contoh tanpa scroll box, supaya panjang saya tambah poin:
  1. Scroll Box
  2. Overflow
  3. Auto
  4. Scroll
  5. Width
  6. Height
Kemudian saya tambahkan kode (pada Edit HTML):
<div style="background-color:#00FFFF; width:300px; height:100px; overflow:auto;">
disini diisi teks di atas</div>
Maka hasilnya seperti ini:

Ini adalah contoh dengan scroll box, supaya panjang saya tambah poin:
  1. Scroll Box
  2. Overflow
  3. Auto
  4. Scroll
  5. Width
  6. Height

Untuk mengetahui lebih jelas fungsi OVERFLOW, silahkan kunjungi tutorial (CSS) Fungsi OVERFLOW.

5 komentar

Cara Membuat kotak fungsi scrolling pada blog ternyata gampang ya gan!!! Thank you for sharing.. I love scrolling.

Balas

keren sangat...ini yg ane cari Gan...verry thanks.....

Balas

waduh makasih banyak ya gan .. kepake juga tutorial ini di blog saya .. hehe
http://dyan-seller.blogspot.com

Balas

Wahahaaaaa.. iya gan.. ane juga cari2 ini.. alhamdulillah ketemu juga ... siapa tahu tampilan blogku jadi keren coba mau aku terapkan di majalahgreen.blogspot.com

Balas

Poskan Komentar


×
Chat