Cara Membuat Kotak Scroll di Postingan Blog/Website

Ngopi sadayana! 😎

Pembahasan kali ini masih seputar kotak amal.. eh kotak amal, kotak script dong maksudnya anak muda! ^ _ ^

Uniknya kotak script yang satu ini memiliki fitur scroll, atau disebut juga kotak scroll (scroll box). So, saya akan membahas bagaimana cara membuat kotak scroll di postingan blog/website.

Sebelum saya lanjutkan :

Sebetulnya kalau pembahasan ini mau saya buat dengan format serius, bisa. Materinya digabung atau dipadatkan dalam satu artikel. Tapi saya sengaja tidak menggunakan pendekatan itu.

Di sini saya hanya sekedar latihan, sekaligus mengajak sobat (khususnya newbie) agar sama-sama belajar dalam memahami kode script dan fungsinya secara perlahan, tapi PASTI! Jadi kalau terkesan bertele-tele, mohon disori. 😄

Okey! Back to topick..

Bicara soal kotak script (text box area) atau kotak catatan di postingan blog/website memiliki banyak versi yang bisa kita modifikasi.

Misalnya : kotak script minimalis, kotak script sudut melengkung, kotak script efek bayangan, dan termasuk kotak script dengan fitur scroll seperti yang sedang kita obrolkan ini.

Jadi gini! Membuat artikel yang informatif “singkat – padat – jelas” memang sangatlah disarankan. Tapi terkadang ada juga yekan artikel yang membutuhkan pembahasan yang lebih intens, sehingga membuat wrapper (isi artikel) menjadi panjangggg..! *kyak Tol Cipali

So, dont worry!! Solusi untuk artikel yang kepanjangan adalah dengan membuat kotak scroll di postingan blog.

Kotak scroll (scroll box) adalah kotak yang memiliki fitur scroll bar yang akan membuat teks yang berada di kotak tersebut bisa dituliskan sepanjang-panjangnya tanpa menampilkan banyak teks pada wrapper.

Apa itu Scroll Bar??

Scroll bar adalah salah satu kode script bahasa program HTML. Scroll bar inilah yang menjadi alat kontrol yang akan kita gunakan untuk menggulung sebagian tulisan di dalam kotak.

Jadi, kotak scroll fungsinya untuk mempersingkat teks atau meringkas tulisan yang panjang di artikel. Artinya tulisan panjang tersebut dapat digulir (di-scroll) di dalam kotak scroll yang sudah dibuat.

Intinya dengan membuat kotak scroll di postingan blog, maka akan lebih efisien meminimalkan tempat pada halaman artikel. Sehingga tidak boros tempat dan tentu saja tampilan postingan akan terlihat dinamis.

Berikut ini ada tiga versi kotak scroll, sangat bagus digunakan di postingan blog personal. Langsung saja yuk meluncur ke TKP. Check it out :

1. Kotak Scroll Vertikal

Kotak Scroll Vertikal artinya scroll bar akan menggulung artikel di dalam kotak dengan bentuk memanjang ke arah atas–bawah. Sehingga tulisan ini bisa digulir naik–turun atau secara vertikal.

Script– nya :

<div style="background-color: #111111; border-radius: 5px; border: 4px solid red; color: green; height: 100px; width: auto; overflow: auto; padding: 10px; text-align: left; "> Tulis artikel anda di sini..! </div>

Hasilnya :

Ini Contoh kotak scroll vertikal dengan menggunakan kode script di atas. Maka tulisan di dalam kotak ini bisa digulir naik – turun atau secara vertikal.

Cara membuat kotak scroll vertikal cukup mudah yaitu dengan menseting  overflow : auto ;  tanpa setingan “paksa” pada tag paragraf  <p>  sehingga secara otomatis tulisan di dalam kotak akan memanjang vertikal (atas – bawah)

2. Kotak Scroll Horizontal

Kotak Scroll Horizontal artinya scroll bar akan menggulung artikel di dalam kotak dengan bentuk memanjang ke arah kiri–kanan. Sehingga tulisan ini bisa digulir menyamping atau secara horizontal. 

Script– nya :

<div style="background-color: #ffeb7e; border-radius: 0px; border: 4px solid rgb(255, 0, 0); width: auto; height: 100px; overflow-x: scroll; overflow-y: hidden; overflow: scroll hidden; padding: 10px; text-align: left; "><p style="width: 250%;"> Tulis artikel anda di sini..! </p></div></div>

Hasilnya :

Ini contoh kotak scroll horizontal dengan menggunakan kode script di atas, maka tulisan di dalam kotak ini bisa digulir ke samping atau secara horizontal. Cara membuat kotak scroll horizontal yaitu dengan menggunakan fungsi overflow–x  dan perlu menyeting “paksa” pada tag paragraf  <p>  dengan memberi value width : 250% artinya konten di dalam kotak akan lebih lebar 250% daripada kotak scroll. Sehingga hal ini akan memaksa terjadinya overflow (scroll bar horizontal).

3. Kotak Script Vertikal & Horizontal

Kotak Scroll Vertikal & Horizontal artinya scroll bar akan menggulung artikel di dalam kotak dengan bentuk memanjang ke arah kiri–kanan, dan ke arah atas–bawah. Sehingga tulisan ini bisa digulir naik–turun dan menyamping atau secara vertikal & horizontal.

Script– nya :

 

<div style="background-color: #ff5c5c; border: 4px solid rgb(2, 209, 68); box-shadow: 0px 0px 10px; height: 100px; overflow-y:scroll; overflow-x:scroll; padding: 10px; text-align: left; width: auto;"><p style="width: 250%;"> Tulis artikel anda di sini..! </p></div>

Hasilnya :

Ini contoh kotak scroll vertikal & horizontal dengan menggunakan kode script di atas, maka tulisan di dalam kotak ini bisa digulir naik – turun dan menyamping atau secara vertikal & horizontal.
Cara membuat kotak scroll vertikal & horizontal yaitu dengan menggunakan fungsi overflow-x dan overflow-y, serta perlu menyeting “paksa” pada tag paragraf <p> dengan memberi value width : 250%,
Artinya konten di dalam kotak akan lebih lebar 250% dan lebih tinggi 250%. Sehingga hal ini akan memaksa terjadinya overflow (menyebabkan munculnya scroll bar vertikal & horizontal).

Ket :

• Overflow-x : posisi scroll pada sumbu x
• Overflow-y : posisi scroll pada sumbu y
• Height : tinggi kotak scroll (bisa diatur)
• Width : lebar kotak scroll (bisa diatur)
• <p width : 250%> : lebar paragraf di dalam kotak scroll (bisa diatur)

Kesimpulan :

Cara membuat kotak scroll di postingan blog, kita hanya perlu menambahkan value height, width, dan overflow ke dalam tag <div> di HTML-nya. Ketiga value tersebut akan menentukan seberapa besar kotak scroll dan arah scrolling yang akan ditampilkan.

Baca juga :

● Cara Membuat Kotak Script Minimalis

---

● Cara Membuat Kotak Script Sudut Melengkung

---

● Cara Membuat Kotak Script Efek Bayangan

---

● Cara Membuat Tulisan berjalan (Marquee)

---

Nah Kira–kira seperti itu sob, cara membuat kotak scroll di postingan blog.

Silahkan sobat berkreasi sendiri, misalnya coba bagaimana cara membuat kotak scroll dengan background gambar. Seperti punya miminho di bawah ini. Keren yekan! Tunggu apa lagi, langsung saja di-scroll.. *maksa* 😄

Ini contoh kotak scroll vertikal dengan background gambar - So, demi menambah kreasi di Blog, penguasaan dan teknik design kecil - kecilan seperti ini sangat diharapkan sedikit.
Saran : Sebaiknya gunakan kotak scroll sesuai kebutuhan terutama dalam pemakaian di artikel. Selamat mencoba!
By : Rico Sihaloho

Ketahuilah Sobat!!
“Orang boleh pandai setinggi langit, tapi selama ia tak menulis, ia akan hilang di dalam masyarakat dan dari sejarah " - Pramoedya Ananta Toer

Next..

Bagaimana cara memasang kotak scroll di postingan blog/website?

Berikut cara memasang kotak scroll di postingan blog. Silahkan ikuti step by step-nya :

• Masuk ke Dashboard
• Buat Posting/New Entry
• Tulis konten seperti biasa sampai selesai.
• Ganti mode penulisan dari “Compose” menjadi “HTML”
• Copy script yang kalian suka, dan Paste -kan Script tersebut pada posisi yang kalian mau.
• Kembali ganti mode penulisan dari “HTML” menjadi "Compose", lalu edit “Tulis artikel anda di sini..!” ganti dengan tulisan sobat yang mau dimasukan dalam kotak scroll.
• Silahkan klik "Pratinjau" untuk memastikan script sudah berjalan.
• Terakhir, kalau sudah berjalan dan posisinya sudah pas. Jangan lupa di simpan dulu dan silahkan dipublish.
• DONE.

Sekian pembahasan tentang cara membuat kotak scroll di postingan blog/website. Semoga tips dan trick di atas cukup jelas dan mudah dipahami.

Monmaap kalau ada kata-kata saya yang kurang berkenan. Kalau ada yang kurang jelas. Ingatlah! Kolom komentar terbuka untuk umum kok anak muda.. hehe. Terima kasih!

Happy blogging..

Nite & GBU more. Bye..!!