Scroll box di Blogger adalah salah satu elemen HTML yang digunakan untuk menampilkan konten panjang dalam sebuah kotak kecil yang bisa digulir. Dengan fitur ini, tampilan artikel menjadi lebih rapi, ringan, dan profesional.
Tutorial ini akan membahas cara membuat scroll box di Blogger menggunakan HTML dan CSS yang ringan, mudah digunakan, dan cocok untuk pemula maupun pengguna tingkat lanjut.
Scroll box sangat berguna untuk menampilkan kode program seperti HTML, CSS, JavaScript, atau teks panjang agar tidak membuat halaman blog menjadi terlalu panjang dan sulit dibaca.
Apa Itu Scroll Box di Blogger?
Scroll box adalah elemen HTML yang memiliki fitur scroll (gulir) baik vertikal maupun horizontal. Elemen ini biasanya digunakan untuk membatasi tampilan konten panjang agar tetap rapi di dalam sebuah kotak.
Di Blogger, scroll box sering digunakan untuk menampilkan kode atau tutorial agar tidak memenuhi halaman postingan.
Fungsi Scroll Box dalam Blog
- Menampilkan kode HTML, CSS, dan JavaScript agar lebih rapi
- Menghemat ruang pada artikel panjang
- Meningkatkan tampilan artikel agar lebih profesional
- Meningkatkan kenyamanan pembaca
Cara Membuat Scroll Box di Blogger
Gunakan kode HTML berikut ini di mode HTML pada postingan Blogger:
<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;
color:#fff;">
<h3>Contoh Scroll Box</h3>
<p>Ini adalah isi dalam scroll box</p>
</div>
Contoh Hasil Scroll Box
Contoh Scroll Box
Ini adalah contoh tampilan scroll box di Blogger.
Pengaturan Scroll Box
max-height→ Mengatur tinggi kotakoverflow:auto→ Menampilkan scrollbar otomatisbackground→ Warna latar belakangborder→ Garis tepi kotak
Tips SEO Scroll Box Blogger
Agar lebih optimal di Google, gunakan scroll box hanya pada konten yang panjang seperti kode program atau data. Jangan terlalu banyak digunakan agar tidak mengganggu pengalaman pengguna.
FAQ Scroll Box Blogger
Apa itu scroll box di Blogger?
Scroll box adalah elemen HTML berbentuk kotak yang memungkinkan konten panjang digulir secara vertikal atau horizontal agar tampilan blog tetap rapi.
Bagaimana cara membuat scroll box di Blogger?
Scroll box dibuat menggunakan tag div dengan CSS seperti overflow:auto dan max-height untuk mengatur area yang bisa digulir di dalam postingan Blogger.
Apakah scroll box bisa digunakan untuk menampilkan kode?
Ya, scroll box sangat cocok untuk menampilkan kode HTML, CSS, dan JavaScript agar lebih rapi dan mudah disalin oleh pembaca.
Kenapa scroll box tidak muncul di postingan Blogger?
Biasanya terjadi karena CSS overflow belum diatur dengan benar atau tinggi kotak terlalu besar sehingga tidak terlihat efek scroll.
