Cara -Trik CSS: Membuat Scroll Text Area di Blog/Website dan Style-nya

Scroll text yaitu text yang berada di dalam kotak yang luas dan tingginya di batasi dalam ukuran tertentu sehingga untuk melihatnya sampai ke bawah dibutuhkan mouse scrolling. Trik ini lazim digunakan untuk menghemat ruang di dalam post body maupun sidebar, sehingga keseluruhan halaman yang dimuat oleh browser menjadi tidak terlalu panjang.

Ini yaitu referensi text yang menggunakan efek manual scrolling text. Secara normal, text ini akan terlihat sebagai paragraf di dalam post body menyerupai text di atas, dimana batas kiri, kanan, atas, dan bawah dibatasi oleh margin atau alignment yang telah diberi pengaturan default di dalam template HTML.

Style diatas dibentuk dengan menggunakan div styling, dengan menambahkan atribut pembatasan lebar (width) dan tinggi (height) pada area text, dimana area text tersebut sebetulnya lebih tinggi dan atau lebih lebar dari batasan yang diberikan. Lalu, untuk menunjukkan notifikasi pada browser bahwa elemen text harus dapat dilihat tetapi dalam luas area yang telah ditentukan tersebut, digunakanlah atribut overflow: scroll untuk menunjukkan efek scroll, ataupun overflow: auto yang secara otomatis akan menunjukkan efek scroll kalau area text disempitkan. Logikanya, hal ini sama dengan area suatu halaman blog /website atau dokumen-dokumen lain di PC. Jika halaman tersebut lebih panjang dari area browser (juga berdasarkan resolusi layar monitor), maka akan muncul scroller di sebelah kanan browser, dan kalau lebih lebar, maka akan muncul scroller di bab bawah browser.

So, kita mampu menggunakan dasar tag <div style="....">text yang hendak diberi style</div> sama menyerupai text styling yang lainnya, dengan menambahkan tiga atribut penting: height, overflow:scroll/auto, dan weight:

<div style="height xx; overflow: auto; weight: xx">text yang hendak diberi efek scroll text</div>

Sebagai referensi hasil dasarnya menyerupai ini:

text yang hendak diberi efek scroll text text yang hendak diberi efek scroll text text yang hendak diberi efek scroll text text yang hendak diberi efek scroll text text yang hendak diberi efek scroll text text yang hendak diberi efek scroll text

Dan ini tag serta atribut yang digunakan untuk referensi di atas:
<div style="height: 70px; overflow: auto; width: 200px;">text yang hendak diberi efek scroll text text yang hendak diberi efek scroll text text yang hendak diberi efek scroll text text yang hendak diberi efek scroll text text yang hendak diberi efek scroll text text yang hendak diberi efek scroll text</div>

Nah, kemudian supaya scroll text tersebut menjadi bagus atau rupawan dan muncul pada posisi sesuai dengan keinginan, tambahkan atribut-atribut styling yang lain, misalnya: border, margin, padding, text-align, atau background. Sebagai contoh:

Ini yaitu referensi Scroll Text dengan tinggi 80px, border berukuran 2px berjenis solid dan berwarna lightblue, dengan menggunakan overflow berjenis auto, text-align berjenis justify(rata kanan kiri), dengan batas margin kiri sebesar 30px, padding sebesar 3px, dan memiliki luas sebesar 300px.

Ini tag dan atribut yang digunakan:
<div style="border: 2px solid lightblue; height: 80px; margin-left: 30px; overflow: auto; padding: 3px; text-align: justify; width: 300px;">
Ini yaitu referensi Scroll Text dengan tinggi 80px, border berukuran 2px berjenis solid dan berwarna lightblue, dengan menggunakan overflow berjenis auto, text-align berjenisjustify (rata kanan kiri), dengan batas margin kiri sebesar 30px, padding sebesar 3px, dan memiliki luas sebesar 300px.</div>

Untuk praktisnya, anda dapat meng-copy yang di bawah ini:

<div style="border: 2px solid #000000; height: 100px; margin-left: 20px; overflow: auto; padding: 3px; text-align: left; width: 320px;">Text anda disini</div>

Yang berwarna biru yaitu value atau ukuran border, tinggi, margin, padding, dan luas area. Anda dapat mengubahnya sesuai keinginan.

Yang berwarna merah yaitu nilai warna border, anda dapat pula mengubahnya. Untuk panduan code warna hex, mampu dilihat disini.
Text-align memiliki 4 value: left, center, justify, dan right.

Anda dapat mengutak-atik atribut-atribut di atas; bahkan menambah atau menghapus atribut yang tidak diperlukan, kecuali 3 atribut inti: height, overflow, dan width untuk menerima bentuk scroll text blog yg diinginkan.
Untuk bab posting gunakan edit HTML, untuk sidebar pilih gadget HML/JavaScript.

Have a nice experiment and be creative.

Tersaji dengan Esensi