Keren!! Begini Cara Mudah Membuat Scroll Box di Postingan Blog

Assalamu alaykum rekan-rekan Fathin Web. Semoga kita semua selalu dalam keadaan sehat dan dalam lindungan Tuhan yang Maha Kuasa. Mungkin sebagian besar rekan-rekan sesama pemilik blog atau situs sudah tidak asing lagi dengan Scroll Box, namun untuk menyegarkan kembali dan untuk menambah kemampuan kita dalam hal editting blog, tmaka kali ini kita akan bahas bagaimana cara untuk membuat scroll box pada postingan di blog kita. Adapun gambaran tampilannya adalah sebagai berikut:

Untuk membuat scroll box di dalam postingan atau artikel kita di blog ikuti langkah-langkah berikut ini:

1. Setelah login di blogger dan masuk ke postingan kita. Klik menu paling kiri dan pilih opsi tampilah HTML <>, seperti gambar berikut ini.

2. Kemudian copy paste kode html di bawah ini. Ada dua jenis scroll yang dapat diaplikasikan di box tulisan anda yaitu scroll ke bawah dan scroll ke samping.

Kode untuk scroll ke bawah.

<div style="background-color: #fffff; border: 1px double rgb(0, 0, 0); height: 100px; overflow: hidden scroll; width: auto">

<p style="width: auto;">Isi tulisan anda di bagian ini</p>

</div>

Kode untuk scroll ke samping

<div style="background-color: #e4e4db; border: 1px double rgb(0, 0, 0); height: 100px; overflow: scroll hidden; width: 100%;">

<p style="width: 250%;">Isi teks/ tulisan anda di bagian ini, dapat berupa teks maupun kode html seperti pada tulisan ini</p></div>

Keterangan kode:

• overflow              : Fungsi utama scroll, gunakan "hidden scroll" untuk scroll ke bawah atau "scroll hidden" untuk scroll ke samping, atau cukup gunakan "scroll" untuk scroll ke bawah dan ke samping.
• height                    : tinggi scroll box, anda dapat mengatur tinggi box dengan mengubah nilai pixel (contoh : height:150px;)
• width                    : lebar scroll box dan lebar paragraph, pastikan untuk scroll ke samping lebar box pada bagian teks atau <p> lebih besar daripada box atau <div> (contoh : width:100%;)
• background-color  : warna latar box/ kotak scroll

BONUS

Scroll ke samping dan ke bawah:

 

<div style="background-color: #EFEFEF; border: 1px double rgb(0, 0, 0); height: 200px; overflow: scroll hidden; width: 75%;">

<p style="width: 200%;">

Isi teks/ tulisan anda di bagian ini, dapat berupa teks maupun kode html seperti pada tulisan ini. Yang perlu diperhatikan adalah saat anda menulis isi scroll box ini dengan kode html, maka ketikkan isi kode html itu setelah ada mengembalikan tampilan input ke dalam "Tampilan menulis".

</p>

</div>

Demikian cara membuat scroll box di postingan blog semoga dapat bermanfaat membuat postingan kita lebih menarik. Wassalam