Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.

Membuat Box Yang Bisa Digeser (Scroll Box)

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.

4 komentar

1. Komentar ini, diurutkan dari yang terbaru
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
  1. Kalau begitu coba.. ah.. Thank sob info@.. :D
  2. keren sangat...ini yg ane cari Gan...verry thanks.....
  3. waduh makasih banyak ya gan .. kepake juga tutorial ini di blog saya .. hehe
    http://dyan-seller.blogspot.com
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.