Cara Membuat Kotak Scrollbar Di Postingan Blog

Baca Juga

Sebenarnya apasih itu scrollbar dan bagaimana cara memasang scrollbar pada postingan di tengah-tengah artikel ?
Scrollbar adalah kode HTML tertentu yang fungsinya untuk mempersingkat text atau artikel yang penting didalam kotak. Jadi intinya untuk meringkas tulisan-tulisan panjang yang dapat di scroll didalam kotak.

Ada beberapa macam-macam jenis scrollbar yaitu scrollbar vertikal dan horizontal, scrollbar vertikal, scrollbar horizontal. Dibawah ini adalah contoh kode yang dipakai untuk memasang scrollbar di postingan blog.

Keterangan:
Border  : Ukuran garis tepi
Solid     : Warna garis tepi
Height  : Tinggi scroolbar
Width 2500% : Ukuran panjang scroll fungsinya untuk menggeser scroll
Width   : Lebar scroll, untuk lebar dijadikan auto agar otomatis sesuai dengan ukuran lebar postingan anda.

Scrollbar Horizontal dan Vertikal
Scrollbar Horizontal dan Vertikal artinya tulisan yang ringkas dengan bentuk memanjang keatas kebawah dan kekanan kekiri. untuk kode Scrollbar Horizontal dan Vertikal dibawah ini:

<div style="border:1px solid grey;width:auto;height:50px;overflow-y:scroll;overflow-x:scroll;">
<p style="width:2500%;">
MASUKKAN TULISAN ANDA DISINI
</p>
</div>

Hasilnya:

HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH
HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH
HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH
HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH
HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH
HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH
HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH
HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH
HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH
HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH
HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH
HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH

Scrollbar Horizontal
Scrollbar Horizontal artinya tulisan yang ringkas dengan bentuk memanjang kekanan. Untuk kode Scrollbar Horizontal dibawah ini:

<div style="border:1px solid red;width:auto ;height:50px;overflow-y:hidden;overflow-x:scroll;">
<p style="width:2500%;">
MASUKKAN TULISAN ANDA DISINI
</p>
</div>

Hasilnya...

HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH
HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH
HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH
HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH
HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH
HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH
HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH
HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH
HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH
HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH
HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH
HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH
HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH

Scrollbar Vertikal
Scrollbar Vertikal artinya tulisan yang ringkas dengan bentuk dari atas kebawah. Untuk kode Scrollbar Vertikal dibawah ini:

<div style="background-color: #f0f0f0; border: 1px solid #1E90FF; height: 50px; overflow: auto; padding: 5px; width: auto;">
MASUKKAN TULISAN ANDA DISINI
</div>

Hasilnya...

HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH
HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH
HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH
HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH
HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH
HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH
HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH
HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH
HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH
HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH
HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH
HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH HANYA CONTOH

Tweet

Bangjep31

Jika artikel ini cukup menarik bagi anda, share ke teman-teman anda agar mereka juga mendapatkan informasi yang berguna. Terimakasih...

Berlangganan untuk menerima informasi terupdate