Cara Membuat Scroll Bar Vertikal dan Horizontal


Scrollbar atau yang disebut baris penggulung adalah sebuah kotak yang digunakan untuk 
menggeser layar agar kita dapat menemukan isi / kontent yang tersembunyi.
Ada 2 macam scrollbar yaitu :
1. Scrollbar vertikal, untuk menggeser ke bawah & ke atas. Atau untuk 
melihat isi / kontent yang ada dibawah & kembali melihat isi / kontent yang ada di atasnya.
2. Scrollbar horizontal, untuk menggeser ke kanan & ke kiri. Atau untuk 
melihat isi / kontent yang ada dikanan & kembali melihat isi / kontent yang ada di kiri.
Nah disini sobat akan saya kasih tau code membuat Scrollbar tegak dan 
bagaimana memasangnya di postingan blog simak penjelasannya berikut ini:

Scroll Bar Vertikal :
  • Pertama copy kode di bawah ini :
<div style="border: 1px solid #ddd; height: 400px; overflow: auto; padding: 10px; width: 300px;">
Isi postingan sobat.....
</div>


  • Kedua pastekan di saat sobat mau membuat pstingan baru tapi dalam mode html
  • Lau publikasikan nanti hasilnya akan seperti ini :
BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan BlogCara Mebuat Scroll Bar Pada Postingan Blog

Scroll Bar Horizontal :


<div style="border:1px solid white;width:200pxheight:100px; overflow-y:hidden; overflow-x:scroll;">
<p style="width:250%;">
Isi Potingan...
</p>
</div>

  • Sama seperti langkah kedua diatas 
  • Lalu publikasikan

HorizontalHorizontalHorizontalHorizontalHorizontalHorizontalHorizontalHorizontalHorizontalHorizontal
HorizontalHorizontalHorizontalHorizontalHorizontalHorizontalHorizontalHorizontalHorizontalHorizontal
HorizontalHorizontalHorizontalHorizontalHorizontalHorizontalHorizontalHorizontalHorizontalHorizontal
HorizontalHorizontalHorizontalHorizontalHorizontalHorizontalHorizontalHorizontalHorizontalHorizontal
HorizontalHorizontalHorizontalHorizontalHorizontalHorizontalHorizontalHorizontalHorizontalHorizontal
HorizontalHorizontalHorizontalHorizontalHorizontalHorizontalHorizontalHorizontalHorizontalHorizontal

  • Keterangan :
  1. Kode berwarna biru untuk mengatur lebar = width: 300px; & tinggi = height: 400px;
  2. Kode berwarna merah sisip kan isi postingan sobat di tengah kode <div>......</div>


EmoticonEmoticon