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.
Berita Lebih Baru Berita Lebih Lama
  • Kotak Scrolling
    Profil: http://abas-kerja-online.blogspot.com/2012/03/cara-membuat-kotak-fungsi-scrolling.html
    04 Maret, 2012

    Komentar ini telah dihapus oleh Kotak Scrolling sebagai penulis.

    • isoyo
      Profil:https://www.blogger.com/profile/11403628103956124000
      03 Maret, 2014

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

  • Iklan Internet Murah Efektif Berkualitas Indonesia
    Profil: http://abas-kerja-online.blogspot.com/2012/05/pasang-iklan-murah-berkualitas.html
    11 Mei, 2012

    Kalau begitu coba.. ah.. Thank sob info@.. :D

  • Ferdinand Hegemur
    Profil: http://ferdinand-hegemur.blogspot.com/
    28 Juli, 2012

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

  • Dyanseller
    Profil: http://dyan-seller.blogspot.com/
    29 Juli, 2012

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

Tambahkan Komentar
comment url
Terima kasih telah berkomentar di Blog Kang Ismet.
  • Untuk menyisipkan Gambar, Kode, atau Kutipan silahkan klik Tab Sisipkan di atas.
  • Emoji yang bisa digunakan pada komentar :), :D, :( <3, :love dan :top
  • Untuk melihat Komentar yang telah ditambah sisipan kunjungi DEMO
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Klik tombol Salin Kode! lalu paste ke kolom komentar.


image quote pre code
5 Komentar