Cara Membuat Kotak Scrollbar Di Postingan Blog
Selamat datang para pembaca pada artikel kami Cara Membuat Kotak Scrollbar Di Postingan Blog yang kami bagikan melalui media informasi online yang kami beri nama Mas Lelur, Disini kami mencoba untuk membagikan segala informasi yang kami dapatkan untuk dapat menambah wawasan baru bagi para pembaca kami. berikut ini selengkapnya tentang informasi yang kami maksudkan tentang
Cara Membuat Kotak Scrollbar Di Postingan Blog
Scrollbar Vertikal Tipe 1
Hasil Scroll dengan kode HTML diatas adalah seperti dibawah ini.
Scrollbar Vertikal Dan Horisontal
Scrollbar Vertikal Tipe 2
Scrooll vertiakal artinya tulisan di ringkas dalam bentuk memanjang dari atas kebawah, namun untuk kode HTMlL yang digunakan dalam kode ini sedikit berbeda. untuk membuat scroll vertikal gunakan kode yang tertera dibawah ini.
Cara Membuat Kotak Scrollbar Di Postingan Blog
Apa sebenarnya Scrollbar? jika Anda melihat sebuah blog terutama yang menyajikan sebuah kode HTML tertentu dimana biasanya kode HTML tulisannya terlalu panjang, untuk mempersingkat ruang di dalam tulisan dipersingkat dengan sebuah kotak yang bisa meringkas tulisan. Jadi dapat diartikan Scrollbar adalah sebuah menu untuk meringkas tulisan panjang dalam sebuah kotak yang dapat di scrooll untuk menampilkan isi keseluruhan sebuah tulisan.
Ada banyak jenis scroolbar yang umumnya digunakan untuk meringkas sebuah tulisan, secara umum dibagi menjadi tiga yaitu scroll horisontal, scroll vertikal dan scrool gabungan vertikal dan horisontal. Berikut ini cara membuat scrool secara lengkap
Scrollbar Horisontal
Scrooll horisontal artinya tulisan di ringkas dalam bentuk memanjang, untuk membuat scroll horisontal gunakan kode yang tertera dibawah ini.
Border = Ukuran garis tepi srcoll
Solid = Warna garis tepi scroll
Height = Tinggi scrool,
Width:2500% = Ukuran panjang scroll yang digunakan untuk mengeser Scroll
Width = Lebar kotak scroll, Anda bisa merubah ukuran lebar menjadi auto agar otomatis sesuai dengan ukuran lebar postingan.
Untuk kode berikutnya gunakan cara yang sama untuk merubah warna, ukuran lebar, tinggi. Hasil Scroll dengan kode HTML diatas adalah seperti dibawah ini.
Ada banyak jenis scroolbar yang umumnya digunakan untuk meringkas sebuah tulisan, secara umum dibagi menjadi tiga yaitu scroll horisontal, scroll vertikal dan scrool gabungan vertikal dan horisontal. Berikut ini cara membuat scrool secara lengkap
Scrollbar Horisontal
Scrooll horisontal artinya tulisan di ringkas dalam bentuk memanjang, untuk membuat scroll horisontal gunakan kode yang tertera dibawah ini.
<div style="border:1px solid black;width:auto ;height:50px;overflow-y:hidden;overflow-x:scroll;">Keterangan
<p style="width:2500%;">
MASUKKAN TULISAN ANDA DISINI
</p>
</div>
Border = Ukuran garis tepi srcoll
Solid = Warna garis tepi scroll
Height = Tinggi scrool,
Width:2500% = Ukuran panjang scroll yang digunakan untuk mengeser Scroll
Width = Lebar kotak scroll, Anda bisa merubah ukuran lebar menjadi auto agar otomatis sesuai dengan ukuran lebar postingan.
Untuk kode berikutnya gunakan cara yang sama untuk merubah warna, ukuran lebar, tinggi. Hasil Scroll dengan kode HTML diatas adalah seperti dibawah ini.
Scrollbar Vertikal Tipe 1
Scrooll vertiakal artinya tulisan di ringkas dalam bentuk memanjang dari atas kebawah, untuk membuat scroll vertikal gunakan kode yang tertera dibawah ini.
<div style="background-color: #f0f0f0; border: 1px solid #1E90FF; height: 50px; overflow: auto; padding: 5px; width: auto;">
MASUKKAN TULISAN ANDA DISINI
</div>
By using overflow-x, we can create scroll bars when the contents of this div are wider than the container. By setting this paragraph to 250 percent, it is 250 percent wider than the parent container - forcing an overflow.
Scrollbar Vertikal Dan Horisontal
Scrooll vertiakal dan Horistonal artinya tulisan di ringkas dalam bentuk memanjang dari atas kebawah serta kekiri dan kanan, untuk membuat scroll vertikal, horisontal gunakan kode yang tertera dibawah ini.
<div style="border:1px solid red;width:auto;height:50px;overflow-y:scroll;overflow-x:scroll;">Hasil Scroll dengan kode HTML diatas adalah seperti dibawah ini.
<p style="width:2500%;">
MASUKKAN TULISAN ANDA DISINI
</p>
</div>
By using overflow-x, we can create scroll bars when the contents of this div are wider than the container. By setting this paragraph to 250 percent, it is 250 percent wider than the parent container - forcing an overflow.
By using overflow-x, we can create scroll bars when the contents of this div are wider than the container. By setting this paragraph to 250 percent, it is 250 percent wider than the parent container - forcing an overflow.
By using overflow-x, we can create scroll bars when the contents of this div are wider than the container. By setting this paragraph to 250 percent, it is 250 percent wider than the parent container - forcing an overflow.
By using overflow-x, we can create scroll bars when the contents of this div are wider than the container. By setting this paragraph to 250 percent, it is 250 percent wider than the parent container - forcing an overflow.
By using overflow-x, we can create scroll bars when the contents of this div are wider than the container. By setting this paragraph to 250 percent, it is 250 percent wider than the parent container - forcing an overflow.
By using overflow-x, we can create scroll bars when the contents of this div are wider than the container. By setting this paragraph to 250 percent, it is 250 percent wider than the parent container - forcing an overflow.
By using overflow-x, we can create scroll bars when the contents of this div are wider than the container. By setting this paragraph to 250 percent, it is 250 percent wider than the parent container - forcing an overflow.
By using overflow-x, we can create scroll bars when the contents of this div are wider than the container. By setting this paragraph to 250 percent, it is 250 percent wider than the parent container - forcing an overflow.
By using overflow-x, we can create scroll bars when the contents of this div are wider than the container. By setting this paragraph to 250 percent, it is 250 percent wider than the parent container - forcing an overflow.
By using overflow-x, we can create scroll bars when the contents of this div are wider than the container. By setting this paragraph to 250 percent, it is 250 percent wider than the parent container - forcing an overflow.
By using overflow-x, we can create scroll bars when the contents of this div are wider than the container. By setting this paragraph to 250 percent, it is 250 percent wider than the parent container - forcing an overflow.
Scrollbar Vertikal Tipe 2
Scrooll vertiakal artinya tulisan di ringkas dalam bentuk memanjang dari atas kebawah, namun untuk kode HTMlL yang digunakan dalam kode ini sedikit berbeda. untuk membuat scroll vertikal gunakan kode yang tertera dibawah ini.
<div style="border: 1px solid green; height: 80px; overflow-x: hidden; overflow-y: scroll; width: auto;">Hasil Scroll dengan kode HTML diatas adalah seperti dibawah ini.
<p style="width:250%;">
MASUKKAN TULISAN ANDA DISINI
</p>
</div>
Untuk menggunakan kode ini masuk ke menu posting di blog Anda, selanjtnya pilih menu HTML yang berada di compos, selanjutnya masukkan atau copy paste kode diatas sesuai dengan scrollbar yang diinginkan. Selesai dicopy masuk ke menu Compos, hapus tulisan MASUKKAN TULISAN ANDA DISINI dengan tulisan atau kode HTML yang ingin Anda buat.
Simpel dan mudah jika Anda mengalamai kesulitan silahkan ajukan pertanyaan dikolom komentar. Selamat mencoba.