Cara Membuat Scroll di dalam blog - mungkin anda pernah melihat sebuah postingan yang berbentuk makalah atau artikel yang sangat panjang, yang membuat loading lambat. maka inilah solusi buat postingan tersebut. fungsi dari scrollbar adalah membuat ruangan di dalam blog menjadi leluasa sehingga kita dapat menambahkan tulisan-tulisan yang lain di dalam postingan tersebut. disini ada dua bentuk scrollbar: 1. berbentuk vertikal dan 2. berbentuk horizontal. silahkan langsung di praktekkan saja contoh dibawah ini :
1. Scroll berbentuk Vertikal
silahkan masuk ke dalam postingan baru, lalu pilih html , dan copy-paste sript di atas ke dalam postingan. lalu klik compose kembali, seperti gambar di bawah ini:
ganti tulisan yang berwarna merah dengan tulisan yang mau kamu buat, anda juga bisa mengatur warna, tinggi, lebar, ketebalan kotak.
caranya sama juga degan cara vertikal, ganti tulisan yang berwarna merah dengan tulisan yang ingin kamu buat. ok sangat mudah bukan. semoga bisa bermanfaat. jangan lupa untuk komen.
1. Scroll berbentuk Vertikal
.<div style="border:1px solid white;width:200px;height:100px;overflow-y:hidden;overflow-x:scroll;">
<p style="width:250%;">
Dengan menggunakan overflow-x, kita dapat membuat scroll bar ketika kontent pada div ini lebih lebar dari pada kotakan yang kita buat. Dengan menyeting paragraf menjadi 250%, maka hal ini akan membuat content lebih lebar 250% daripada kotakannya - akibatnya hal ini akan memaksakan terjadinya overflow (menyebabkan munculnya scroll bar).
</p>
</div>
<p style="width:250%;">
Dengan menggunakan overflow-x, kita dapat membuat scroll bar ketika kontent pada div ini lebih lebar dari pada kotakan yang kita buat. Dengan menyeting paragraf menjadi 250%, maka hal ini akan membuat content lebih lebar 250% daripada kotakannya - akibatnya hal ini akan memaksakan terjadinya overflow (menyebabkan munculnya scroll bar).
</p>
</div>
ganti tulisan yang berwarna merah dengan tulisan yang mau kamu buat, anda juga bisa mengatur warna, tinggi, lebar, ketebalan kotak.
- Border 1 px = ketebalan kotak dan solid white = warna kotak
- Width 200 px = lebar kotak
- Heirht 100 px = panjang kotak
2. Scoll Berbentuk Horizontal
.<div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px solid white">
Jika tanpa Setingan "paksaan" di tag paragraf <p>, maka cukup mudah untuk membuat scroll bar vertikal seperti ini.
</div>
Comments