Memuat berita terbaru...
Beranda
Blogger
Wedget

cara membuat scroll box di blogger

TipsTechPraktis

Ingin membuat kotak scroll di postingan Blogger? Ikuti panduan lengkap ini dengan kode HTML & CSS untuk menampilkan scroll box rapi di artikel blog kamu.

Cara Membuat Scroll Box di Postingan Blogger

Scroll Box adalah elemen kotak dengan scrollbar vertikal atau horizontal yang digunakan untuk menampilkan teks, kode, atau elemen panjang dalam ruang terbatas. Ini sangat berguna saat kamu ingin membagikan kode HTML, JavaScript, atau teks panjang di postingan Blogger.

🔧 Kapan Scroll Box Digunakan?

  • Saat membagikan potongan kode (HTML, CSS, JS),
  • Untuk menampilkan teks panjang tanpa memenuhi halaman seperti lirik lagu,
  • Untuk menambahkan daftar panjang (seperti link, data, dll).

📌 Cara Membuat Scroll Box di Blogger:

Cukup gunakan kode HTML berikut ini di mode HTML postingan Blogger:

💡 Contoh Scroll Box :

<div style="
  border:1px solid #ddd;
  background:#5C97BF;
  padding:10px;
  border-radius:5px;
  max-height:200px;
  overflow:auto;
  font-family:monospace;
  font-size:14px;
  line-height:1.5;
  white-space:pre-wrap;
  word-wrap:break-word;">
<h1>Hello World</h1>
<p>Ini adalah paragraf di dalam scroll box</p>
</div>

📋 Hasilnya Akan Terlihat Seperti Ini:

Hello World

Ini adalah paragraf di dalam scroll box

🎨 Custom Warna & Ukuran

Kamu bisa mengubah warna latar belakang, ukuran tinggi/lebar, dan warna border sesuai keinginan:

  • background:#5C97BF; = warna latar, bisa disesuaikan dengan keinginan,
  • height:200px; = tinggi scroll box,
  • overflow:auto; = scrollbar akan muncul jika isi lebih panjang.
Baca Juga :

Kesimpulan:
Scroll Box sangat berguna untuk menampilkan konten panjang secara ringkas dan rapi. Gunakan kode di atas untuk meningkatkan tampilan postingan kamu di Blogger!

FAQ

Apa itu scroll box dan untuk apa digunakan di Blogger?

Scroll box adalah kotak dengan fitur gulir (scroll) yang digunakan untuk menampilkan konten panjang agar tetap rapi dan tidak memenuhi tampilan blog.

Bagaimana cara membuat scroll box di postingan Blogger?

Gunakan kode berikut:

<div style="height:100px; overflow:auto; width:350px;">
  Konten panjang di sini...
</div>
Bagaimana cara menampilkan kode HTML di dalam scroll box?

Gunakan karakter escape seperti &lt; untuk < dan &gt; untuk > agar kode tidak dieksekusi oleh browser.

Bagaimana membuat scroll box horizontal untuk baris panjang?

Tambahkan CSS white-space: nowrap; agar teks tidak berpindah baris dan scroll horizontal muncul.

Bisakah scroll box dipakai di sidebar untuk arsip atau label?

Bisa, tambahkan CSS khusus widget di template Blogger untuk mengaktifkan scroll di area arsip atau label.

Apakah scroll box mendukung scroll otomatis untuk horizontal dan vertikal?

Ya, gunakan overflow: auto; agar scrollbar muncul otomatis sesuai kebutuhan konten.

Posting Komentar