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! © buka-rahasia.blogspot.com
google

Catatan:
Jika anda menemui tutorial lama, maka perhatikan bahwa untuk masuk ke Edit HTML template tidak lagi melalui halaman "design/rancangan", melainkan dari dashboard > template > klik edit HTML. Masih bingung mencari dan edit kode di Edit HTML Blogger baru? Simak tips trik berikut:
1. Cara Mencari Kode di HTML Editor Blog
2. Fitur di HTML Editor Baru
3. Tips Edit HTML Blogger (artikel lama)
Cara -Trik CSS: Membuat Scroll Text Area di Blog/Website dan Style-nya
Written by: Ahmad Khoirul Azmi
Thanks for reading! Suka dengan artikel ini? Please link back artikel ini dengan codedi bawah atau share dengan sharing buttons di atas. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

add a comment 17 Comment(s):

Manyunte said...

makasih gan infonya...

Ahmad Khoirul Azmee said...

yup you're welcome :D

Krisna 'Law' said...

makasih infonya, aku ganti template kok scroll text areanya ilang, untung ketemu ini, aku coba ya....

Permathic Blog said...

keren kang tipsnya. saya coba.

Maniac Blogger said...

bgus gan,kunjungi n komen blog ane juga ya
suhairibewo.blogspot.com

banyaknama.blogspot.com said...

nice info, makasih gan :)
siap praktek

penerjemah bahasa mandarin said...

oke sob menu scrollnya, btw low untuk yg 2 kolom atau lebih bagaimana ya sob caranya...???salam sukses selalu.thanks

Ganis Sebastian said...

wah..makasih lho mas gan,,ane pakai langsung dua lho untuk footer...salam blogger

Thomi Jasir said...

terimakasih Sob atas Tutorial Blog bermanfaat sekali Tutorial Blog

ciptahost - webhosting said...

teknik scrolling seperti ini sangat bagus untuk di terapkan pada sidebar yang berisi tulisan panjang, atau seperti hirariki posting dalam blog.

Husada Tekpen said...

langsung praktek dan berhasil, makasih gan.

Rasyidan Akbar Fayrussani said...

kok saat saya mencoba scroling area di postingan saya copy paste script-script (untuk tutorial widget) malah hasilnya menjadi widget yang saya maksud bukan menjadi text ya? Solusinya bagaimana ya? Tolong dijawab ya :)

Terima kasih jika dibalas...

Ahmad Khoirul Azmi said...

Sebelum memasukkan kode di antara div dan /div, kodenya harus diparse dulu. Parse kode di sini:
http://buka-rahasia.blogspot.com/p/blogger-adsense-parser-html-encoder.html

Setelah itu kopi, dan masukkan melalui HTML mode di post editor (sebelah "compose").

Rian Akbary said...

thans mas , sangat bermanfaat, mau dicoba dulu..

rosyid wijayanto said...

membantu ane banget gan. makasih. kunjungi gubuk saya juga http://rosyidwijayanto4.blogspot.com/.

Edi Haryanto said...

terimakasih gan tutornya,, langsung ane praktekin
mari mampir blog ane

Fadlkirapein said...

terima kasih, kak Azmi atas tutornya; saya merasa ingin berlama-lama dalam buka-rahasia.blogspot.com menambah pengetahuan yang mudah dipelajari orang baru seperti saya :)

Post a Comment

Silahkan tinggalkan komentar untuk respon/pertanyaan. Jika ingin menuliskan kode di dalam komentar, convert dulu dengan HTML Encoder. Centang "Notify me" untuk mengetahui balasannya. Maaf apabila komentar dibalas dalam waktu lama atau tidak terbalas karena saya tidak online setiap hari. Atau biar lebih cepat dan enakan bisa kontak lewat Facebook. KOMENTAR BERISI LINK & tidak sesuai dengan Comment Policy akan langsung dihapus.Karena banyaknya spam, komentar sekarang di-moderasi sebelum diterbitkan. Thanks.
Smashed Spams: 11362

Recent Comments

Tautweb.com

Join Our Team!

© 2013 Buka Rahasia Blogspot | Template by Dicas Blogger | Modified & Enhanced by Ahmad Khoirul Azmi

 ContactPrivacy PolicyComment PolicySitemap