CARA MEMBUAT KOTAK/SCROLL DI DALAM POSTINGAN

tutorial membuat kotak atau scroll di dalam postingan
ADMIN
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

.<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>

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.
  • 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>
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.

Artikel Terkait :
Download Button
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.