Cara Membuat Scroll Box Keren dan Responsive Di Postingan Blogger

komputerdia.com - Scroll Box merupakan sebuah kotak yang dilengkapi dengan fitur scroll (gulir) yang dapat difungsikan diberagam tempat, misalnya kalian akan menerapkan fitur ini disebuah postingan, sidebar atau bahkan footer sekalipun, namun umumnya scroll box ini biasanya digunakan pada bagain halaman posting artikel.

Ada juga pendapat lain yang mendefinisikan jika Scroll Box merupakan sebuah kotak yang berisi kan suatu informasi berupa teks, gambar, atau elemen lainnya, yang memungkinkan pengguna atau pengunjung dapat melakukan aktivitas gulir/scroll jika isinya terlalu banyak/panjang untuk kotak yang sudah dibuat.

Kotak gulir (scroll box) sering digunakan ketika kalian tidak ingin mengambil ruang terlalu banyak pada suatu konten yang akan dibuat. Dengan membuat kotak scroll, kalian dapat mengizinkan lebih banyak konten untuk masuk ke dalam ruang yang lebih kecil. Fungsi utama dari scroll box ini adalah untuk meminimalkan sebuah tampilan teks atau tulisan agar terlihat lebih ramping, sehingga tidak terkesan panjang.

Dalam artikel kali ini, saya akan menunjukkan setidaknya +12 cara yang bisa kalian lakukan untuk membuat scroll box dengan tema yang berbeda-beda, dan di artikel ini juga saya akan menjelaskan bagaimana cara membuat scroll box vertical/vertikal dan scroll box horizontal responsive di postingan blog. Untuk lebih jelasnya silahkan kalian perhatikan langkah - langkah dibawah ini :

Cara Membuat Scroll Box (Kotak Gulir)

• Langkah pertama silahkan kalian masuk ke akun blogger
• Tekan tombol Entri Baru, dan kalian akan diarahkan ke halaman pembuatan artikel / posting.
• Untuk bisa menjalankan script atau kode scroll box, kalian harus pindahkan area posting dari mode Compose ke mode html .

• Setelah kalian berada di halaman mode compose, silahkan kalian copy dan tempelkan salah satu kode scroll box style dibawah ini.
• Pilih gaya yang kalian inginkan untuk dipasang di blog kalian

A. Scroll Box Blogger Vertikal/Vertical (ke bawah)

<div style="background-color: #ffa66f; border: 2px #6e2222 dashed; text-align: left; height: 30px; overflow: auto; padding: 10px; width: auto;">Silahkan simpan tulisan kalian yang akan menggunakan scroll box disini</div>

<div style="background-color: #ffc7c7; border: 2px #6E2222 dotted; padding: 10px; text-align: left; height: 30px; overflow: auto; width: auto;">Silahkan simpan tulisan kalian yang akan menggunakan scroll box disini</div>

<div style="background-color: #82cafa; border: 3px #6E2222 double; padding: 10px; text-align: left; height: 30px; overflow: auto; width: auto;">Silahkan simpan tulisan kalian yang akan menggunakan scroll box disini</div>

<div style="background-color: #6eb76a; border: 2px #6E2222 inset; padding: 10px; text-align: left; height: 30px; overflow: auto; width: auto;">Silahkan simpan tulisan kalian yang akan menggunakan scroll box disini</div>

<div style="background-color: #c2c2c2; border: 2px #6E2222 ridge; padding: 10px; text-align: left; height: 30px; overflow: auto; width: auto;">Silahkan simpan tulisan kalian yang akan menggunakan scroll box disini</div>

<div style="background-color: #d9da81; border: 2px #6E2222 solid; padding: 10px; text-align: left; height: 30px; overflow: auto; width: auto;">Silahkan simpan tulisan kalian yang akan menggunakan scroll box disini</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 5px solid #2288dd; border-radius: 10px; padding: 10px; text-align: left; height: 30px; overflow: auto; width: auto;">Silahkan simpan tulisan kalian yang akan menggunakan scroll box disini</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-radius: 10px; border: 4px solid #999; padding: 10px; t-align: left; height: 30px; overflow: auto; width: auto;">Silahkan simpan tulisan kalian yang akan menggunakan scroll box disini</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffe599; border-radius: 10px; border: 2px dashed #aaa; padding: 10px; t-align: left; height: 30px; overflow: auto; width: auto;">Silahkan simpan tulisan kalian yang akan menggunakan scroll box disini</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #6fa8dc; border-radius: 10px; border: 4px double #fff; padding: 10px; t-align: left; height: 30px; overflow: auto; width: auto;">Silahkan simpan tulisan kalian yang akan menggunakan scroll box disini</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #a2c4c9; border-radius: 10px; border: 4px outset #fff; padding: 10px; t-align: left; height: 30px; overflow: auto; width: auto;">Silahkan simpan tulisan kalian yang akan menggunakan scroll box disini</div>

B. Scroll Box Blogger Horizontal (ke samping)

<div style="border: 2px solid black; height: 145px; overflow-x: scroll; overflow-y: scroll; width: auto;">
<div style="width: 250%;">
<div style="height: 250%;">
Masukkan tulisan kalian disini
</p>
</div>
</div>
</div>

<div style="border:1px solid white;width:auto;height:100px;overflow-y:hidden;overflow-x:scroll;">
<p style="width:250%;">
Tulisan Kalian Disini
</p>
</div>

• Kode berwarna Merah, silahkan kalian ganti dengan isi tulisan kalian
• Kode berwarna Biru, silahkan kalian ganti dengan kode warna yang kalian inginkan
• Kode berwarna Kuning, silahkan ganti dengan ukuran yang kalian inginkan
• Setelah semua setelah telah kalian atur, silahkan kalian publikasikan artikel atau postingan kalian tersebut.
• Selesai, semoga bermanfaat untuk kalian semuanya

Share this post