Cara Membuat Kotak ScrollBar pada Postingan Blog

document-scroll-iconScrollBar adalah sebuah kontrol penggulung yang terdapat di sisi suatu jendela. Jenisnya sendiri secara umum ada dua macam, yaitu Vertical ScrollBar dan Horizontal ScrollBar. Salah satu fungsi ScrollBar adalah untuk menggulung teks pada layar. Membuat kotak scroll bar pada postingan yang terdapat tulisan atau kode-kode tertentu yang panjang merupakan langkah yang tepat agar postingan tetap terlihat rapi dan dinamis.

Cara membuat kotak scroll bar agar muncul dipostingan blog adalah dengan meng-copy dan paste-kan kode script dibawah ini pada mode Edit HTML (jika yang Anda gunakan blogspot)  atau Text (jika Anda menggunakan blog wordpress) di bagian posting blog. Kode scriptnya adalah:

<div style="padding: 5px; overflow: auto; width: 500; height: 50px; border: 1px solid #000000;">www.RiyanPutra.com bla..bla..bla</div>

Catatan:

  • Ganti tulisan http://www.RiyanPutra.com -> bla..bla..bla dengan kalimat atau apapun yang ingin Anda tampilkan didalam kotaknya.
  • Silahkan cek berhasil atau tidaknya silahkan klik mode Compose (jika yang Anda gunakan blogspot) atau mode Visual (jika blog Anda wordpress)
  • Height:50px; adalah ukuran lebar atas bawah kotak scroll, ini bisa Anda ganti sesuai keinginan.
  • Width: 500; adalah ukuran otomatis lebar samping kotak scroll, ini bisa Anda ganti dengan auto.
  • Border:1px solid adalah ukuran tebal garis kotak scroll, ini juga bisa Anda sesuaikan.
  • #000000 adalah kode warna pada garis kotak scroll, bisa diganti hanya saja Anda harus mengetahui kode-kode warna.

Contohnya seperti ini nanti:

http://www.RiyanPutra.com> Blog Motivasi, Inspirasi, Wawasan Umum, Bisnis Online dan Kisah-kisah Seputar Memaknai Hidup. bla..bla..bla.. teks disini, teks disini, teks disini, teks disini…

Baca juga artikel berikut:

Iklan

4 pemikiran pada “Cara Membuat Kotak ScrollBar pada Postingan Blog

  1. Wal sharingnya pas dengan rencana saya buat scrol bar Masbro, terima kasih ya dan langsung aplikasi di <a href="www.sekolahbisnisonline.org" <training
    Terima kasih sukses mulia!

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s