Cara Membuat Kotak yang Bisa di Scroll

Assalamu'alaikum Warahmatullahi Wabarakatuh..
     Sesuai judul diatas, kali ini kita akan membahas bagaimana cara membuat kotak yang bisa discroll. Caranya cukup mudah, kita tinggal membuat sebuah div untuk teks/ kontennya kemudian di CSS-nya kita tinggal menambahka  overflow: auto;. Cara ini bisa kita terapkan menggunakan Inline CSS, External CSS, ataupun Internal CSS (Baca Juga: Cara Memasang CSS kedalam HTML). Oke, tanpa panjang lebar lagi biar lebih jelas langsung saja kita lihat dan coba contoh dibawah:

CSS Inline


<!DOCTYPE html>
<html>
<head>
     <title>Kotak Scroll</title>
</head>
<body>
     <div style="height: 100px; overflow: auto; background-color: #4791D2; padding: 5px; color: white; border-radius: 5px;">
          <p>Perkenalkan nama saya Azis Hapidin, saya lahir di Kabupaten Cianjur pada tahun 1999. Jadi sekarang umur saya sudah 16 tahun. Saat tulisan ini dibuat, saya masih sekolah di SMK Muhammadiyah Cianjur dan duduk di kelas 2 di jurusan Rekayasa Perangkat Lunak (RPL). Saya ngambil jurusan RPL karena memang hobi saya di bidang itu, jadi sekarang enggak ada alesan bagi saya buat males pergi ke sekolah, apalagi di hari-hari yang ada pelajaran Produktif RPL-nya.</p>
          <p>Saya orangnya.. saya orangnya gimana ya? Mungkin agak susah ya buat menilai diri sendiri. Tapi kalau saya nanya ke temen-temen, ada yang bilang saya itu humoris, ada juga yang bilang orangnya garing, ada juga yang bilang <s>ganteng kaya Artis Korea</s> wajahnya pas-pasan, yaa macem-macem lah.</p>
     </div>
</body>
</html>
 
Jika kode HTML diatas disave dan dibuka dibrowser, maka hasilnya adalah sebagai berikut:
Perkenalkan nama saya Azis Hapidin, saya lahir di Kabupaten Cianjur pada tahun 1999. Jadi sekarang umur saya sudah 16 tahun. Saat tulisan ini dibuat, saya masih sekolah di SMK Muhammadiyah Cianjur dan duduk di kelas 2 di jurusan Rekayasa Perangkat Lunak (RPL). Saya ngambil jurusan RPL karena memang hobi saya di bidang itu, jadi sekarang enggak ada alesan bagi saya buat males pergi ke sekolah, apalagi di hari-hari yang ada pelajaran Produktif RPL-nya.
Saya orangnya.. saya orangnya gimana ya? Mungkin agak susah ya buat menilai diri sendiri. Tapi kalau saya nanya ke temen-temen, ada yang bilang saya itu humoris, ada juga yang bilang orangnya garing, ada juga yang bilang ganteng kaya Artis Korea wajahnya pas-pasan, yaa macem-macem lah.

 

CSS Internal


<!DOCTYPE html>
<html>
<head>
    <title>Kotak Scroll</title>
    <style type="text/css">
    #kotak {height: 100px; overflow: auto; background-color: #4791D2; padding: 5px; color: white; border-radius: 5px;}
    </style>
</head>
<body>
<div id="kotak">
    <p>Perkenalkan nama saya Azis Hapidin, saya lahir di Kabupaten Cianjur pada tahun 1999. Jadi sekarang umur saya sudah 16 tahun. Saat tulisan ini dibuat, saya masih sekolah di SMK Muhammadiyah Cianjur dan duduk di kelas 2 di jurusan Rekayasa Perangkat Lunak (RPL). Saya ngambil jurusan RPL karena memang hobi saya di bidang itu, jadi sekarang enggak ada alesan bagi saya buat males pergi ke sekolah, apalagi di hari-hari yang ada pelajaran Produktif RPL-nya.</p>
    <p>Saya orangnya.. saya orangnya gimana ya? Mungkin agak susah ya buat menilai diri sendiri. Tapi kalau saya nanya ke temen-temen, ada yang bilang saya itu humoris, ada juga yang bilang orangnya garing, ada juga yang bilang <s>ganteng kaya Artis Korea</s> wajahnya pas-pasan, yaa macem-macem lah.</p>
</div>
</body>
</html>
Jika kode HTML kedua diatas dibuka dibrowser, maka hasilnya akan tetap sama:
Perkenalkan nama saya Azis Hapidin, saya lahir di Kabupaten Cianjur pada tahun 1999. Jadi sekarang umur saya sudah 16 tahun. Saat tulisan ini dibuat, saya masih sekolah di SMK Muhammadiyah Cianjur dan duduk di kelas 2 di jurusan Rekayasa Perangkat Lunak (RPL). Saya ngambil jurusan RPL karena memang hobi saya di bidang itu, jadi sekarang enggak ada alesan bagi saya buat males pergi ke sekolah, apalagi di hari-hari yang ada pelajaran Produktif RPL-nya.
Saya orangnya.. saya orangnya gimana ya? Mungkin agak susah ya buat menilai diri sendiri. Tapi kalau saya nanya ke temen-temen, ada yang bilang saya itu humoris, ada juga yang bilang orangnya garing, ada juga yang bilang ganteng kaya Artis Korea wajahnya pas-pasan, yaa macem-macem lah.

Gimana mudah kan?
Sekian tutorial singkat kali ini,
Terima Kasih atas kunjungannya,
Wassalamu'alaikum Warahmatullahi Wabarakatuh..


EmoticonEmoticon