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

Scroll text adalah text yang berada di dalam kotak yang luas dan tingginya di batasi dalam ukuran tertentu sehingga untuk melihatnya hingga 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 adalah contoh text yang menggunakan efek manual scrolling text. Secara normal, text ini akan terlihat sebagai paragraf di dalam post body seperti 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 sebenarnya lebih tinggi dan atau lebih lebar dari batasan yang diberikan. Lalu, untuk memberikan notifikasi pada browser bahwa elemen text harus dapat dilihat tetapi dalam luas area yang telah ditentukan tersebut, digunakanlah atribut overflow: scroll untuk memberikan efek scroll, ataupun overflow: auto yang secara otomatis akan memberikan efek scroll jika 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 jika lebih lebar, maka akan muncul scroller di bagian bawah browser.

So, kita bisa menggunakan dasar tag <div style="....">text yang hendak diberi style</div> sama seperti 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 contoh hasil dasarnya seperti 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 contoh 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 agar scroll text tersebut menjadi bagus atau indah dan muncul pada posisi sesuai dengan keinginan, tambahkan atribut-atribut styling yang lain, misalnya: border, margin, padding, text-align, atau background. Sebagai contoh:

Ini adalah contoh 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 adalah contoh 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 adalah value atau ukuran border, tinggi, margin, padding, dan luas area. Anda dapat mengubahnya sesuai keinginan.

Yang berwarna merah adalah nilai warna border, anda dapat pula mengubahnya. Untuk panduan code warna hex, bisa 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 mendapatkan bentuk scroll text blog yg diinginkan.
Untuk bagian posting gunakan edit HTML, untuk sidebar pilih gadget HML/JavaScript.

Have a nice experiment and be creative.

Tersaji dengan Esensi

mencuri adalah pekerjaan pengecut! © budihaeruman.blogspot.com

Posted in: Blog Design,HTML-CSS Tricks