Cara Membuat Kotak Scroll di Artikel Blog

السلام عليكم

Salam Rahayu dan Damai selalu.
Sahabatku yang baik hati, dalam tulisan ini, kita akan belajar bersama caranya membuat Kotak Scroll/scroll box dalam artikel.
Sering kali tentunya kita dapati dan kita jumpai kotak scroll yang dipasang oleh para senior kita didalam artikelnya. Karena kotak itu kadang sangat dibutuhkan. Tujuannya salah satunya adalah untuk meringkas suatu kalimat atau kode script atau kode kode yang lain, yang sekira akan terlalu panjang dan akan menambah berat loading bila tidak diberi kotak scroll tersebut.

baca juga: cara mudah membuat kotak script

Sebenarnya banyak jenis 'kotak gulir' atau scroll box yang umumnya digunakan, namun pada pada dasarnya ada tiga bentuk scroll box.
1. Scrollbar Horisontal
2. Scrollbar Vertikal
3. Scrollbar gabungan.

Mari kita pelajari bersama satu persatu.

1. Scrollbar Horisontal.

Pada scrollbar ini, tulisan atau kode akan diringkas memanjang.
Untuk membuatnya inilah salah satu kodenya:

<div style="border:3px solid black;width:auto ;height:150px;overflow-y:hidden;overflow-x:scroll;">
<p style="width:2500%;">
masukkan tulisannya di sini
</p>
</div>

ini hasil penampakan dengan kode di atas.

<div style="background:border:3px solid brown;width:auto ;height:150px;overflow-y:hidden;overflow-x:scroll;">

<p style="width:3500%;">

masukkan tulisannya di sini

</p>

</div>

keterangan:

border:3px    = ukuran ketebalan garis tepi. Semakin besar angkanya, maka akan semakin tebal garisnya.
solid black    = kode bentuk garis tepi dan warnanya. Maksudnya garis tanpa putus putus.
Bila menghendaki berupa titik titk, kita ganti dengan 'dooted', bila ingin garis putus putus kita ganti 'dashed' atau groove atau yang lain.
Silahkan ganti sesuka hati kita,untuk warna bisa green, yellow atau kalau mau memakai kode diawali dengan tanda pagar # kemudian kode hexadecimalnya, coba tengok di sidebar ada Picker.

width:auto ;height:50px;  = untuk mengatur lebar otomatis mengikuti tempat, dan tingginya bisa kita rubah.
<p style="width:2500%;       = untuk mengatur besar kecilnya alat penggeser.
Semakin besar angkanya, maka akan semakin kecil bentuknya.

Bila akan diberi warna background area tulisan, tinggal kasih kode 'background:yellow/red/green'

<div style="background:#33ff00;border:3px solid #ff3300;width:auto ;height:150px;overflow-y:hidden;overflow-x:scroll;">

<p style="width:2500%;">

masukkan tulisannya di sini

</p>

</div>

2. Scrollbar Vertikal

Dalam scrollbar ini, tulisan akan diringkas memanjang dari atas ke bawah.
untuk scrollbar ini, bisa kita gunakan kode berikut:

<div style="border: 1px solid red; height: 80px; overflow-x: hidden; overflow-y: scroll; width: auto;"><p style="width:150%;">

masukkan tulisannya di sini
</p>
</div>

maka akan menjadi seperti di bawah ini :

Sering kali tentunya kita dapati/jumpai kotak scroll yang dipasang oleh para senior kita didalam artikelnya. Karena kotak itu kadang sangat dibutuhkan. Tujuannya salah satunya adalah untuk meringkas suatu kalimat atau kode script atau kode kode yang lain, yang sekira akan terlalu panjang dan akan menambah berat loading bila tidak diberi kotak scroll tersebut.

Sebenarnya banyak jenis 'kotak gulir' atau scroll box yang umumnya digunakan, namun pada pada dasarnya ada tiga bentuk scroll box.

1. Scrollbar Horisontal

2. Scrollbar Vertikal

3. Scrollbar gabungan.

Mari kita pelajari bersama satu persatu.

3. Scrollbar Gabungan (Horisontal dan Vertikal)

Dalam scrollbar ini, kita bisa menggabungkan antar dua scroll di atas.
Dalam hal ini, kita bisa menggunakan kode di bawah ini:

<div style="border:3px solid blue;width:auto;height:50px;overflow-y:scroll;overflow-x:scroll;">

<p style="width:2500%;">

masukkan tulisan kita di sini

</p>

</div>

maka penampakannya ....(kok seperti hantu ya? pake penampakan segala).
ya sudah......(gitu aja kok repot....) maka jadinya seperti di bawah ini:

<div style="border:3px solid blue;width:auto;height:100px;overflow-y:scroll;overflow-x:scroll;">

<p style="width:2500%;">

masukkan tulisan kita di sini

</p>

</div>

Kalau kita mau berkreasi ...monggo.. kaidah yang penting dan utama sudah kita tulis di depan. Tinggal kita nambah backgroundnya, warna garis tepi, besar kecilnya....silahkan. Agar kita puasssssssss.

baca juga: cara membuat tulisan berjalan

Mungkin sampai di sini belajar bersama kita kali ini dalam membuat kotak gulir atau kolom scrollbar kali ini, tentu banyak salahnya,,,mohon dimaafkan.
Kami sangat menanti koreksi dan pencerahannya.

Salam Rahayu selalu.
والسلام عليكم