Cara Membuat Kotak/tebl scroll dipostingan blog /web

Halo sobat kali ini saya akan berbagi trik Cara Membuat Kotak/tebl scroll dipostingan blog /web semoga cara yang saya bagi in akan bermanfaat buat teman-teman yang pecinta blog atau yang sering posting artikel di blog yang teman-teman sayangi :)

Apa itu Scrollbar? jika teman-teman pernah 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. Contoh Scrollbar yang saya maksud adalah seperti gambar di bawah 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;">
<p style="width:2500%;">
MASUKKAN TULISAN ANDA DISINI
</p>
</div>

Keterangan
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 dapat merubah ukuran lebar menjadi auto agar otomatis sesuai dengan ukuran lebar postingan.

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>

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. 

Semoga teman-teman dapat menerapkannya di blogger teman-teman sekalian :) jangan lupa komentarnya kalau gagal dan sukses ya :) 
Notification ! {New!}
Beberapa artikel di blog ini terkadang berisi informasi dari berbagai macam sumber. Hak cipta berupa gambar, teks, dan link sepenuhnya dimiliki oleh web tersebut.

0 Comments