Terkadang kita perlu menampilkan text yang bisa bergerak baik itu naik, turun, kesamping kiri ataupun kanan untuk menarik perhatian pembaca. Kali ini saya coba menyajikannya lengkap khusus untuk anda yang ingin mengutak-atik blog anda agar lebih keren.
Membuat Text Berjalan Kesamping Kiri Bagaimana caranya untuk menambahkan teks yang bergeser kesamping, baik dibagian sidebar, posting blog dan lain-lain. Cara ini merupakan cara lain untuk menarik pengunjung agar memperhatikan beberapa tulisan yang kita kehendaki.
Tapi, sebaiknya kita jangan memasangnya terlalu banyak, karena justru akan mengganggu dan merusak konsentrasi pembaca. Anda dapat menambahkan tulisan bergulir pada kalimat / frase tertentu seperti : posting paling populer, iklan, berita terkini dll. Okedeh, tanpa perlu basa-basi kepanjangan. Langsung aja nih...
Berikut adalah kode untuk menambahkan teks bergulir sederhana dari kanan ke kiri
kode <marquee> bergulir sederhana teks </ marquee>
Output akan seperti:
Contoh 1:
jangan lupa, anda mengetiknya di tab Edit HTML seperti gambar dibawah ini
kemudian akan terlihat seperti ini :
Bagaimana jika background text berjalan Anda ingin diwarnai? Silahkan coba ini...
Tambahkan warna latar belakang teks,
<marquee bgcolor="#99ccff">kode scrolling text sederhana</marquee>
Contoh 2:
Bagus bukan? kalau Anda ingin merubah warna backgroundnya dengan warna lainnya anda bisa melihat di kode heksadesimal
di siniLanjut yuk...
Membuat Text Berjalan Kesamping KananIni merupakan trik lanjutan tentang marquee script, yaitu membuat text yang berjalan dari kiri ke kanan. Yang perlu Anda lakukan adalah :
- Copy dan paste kode dibawah ini pada posting blogger di tab EDIT HTML seperti yang saya tunjukkan pada gambar diatas :
<marquee
direction="right" bgcolor="#99CCFF">contoh text bergeser kekanan</marquee>
silahkan Anda lihat, pada tulisan yang saya stabilo kuning, merupakan perintah arah bergesernya text.
- Hasilnya akan terlihat seperti dibawah ini:
Membuat text naik pada blogrollIni merupakan trik yang ke-3 untuk geser-menggeser text, dan untuk kali ini, saya ingin mengajak Anda untuk mempelajari trik membuat text naik, dan ini tidak terbatas pada blogroll, perintah script ini bisa anda terapkan di text apapun di blogger, simak ya.
- Seperti biasa, inilah kode rahasia yang harus Anda copy paste kan, cara untuk copy dan pastenya sudah saya kasih tau pada posting sebelumnya.
<marquee direction="up" bgcolor="#99CCFF">contoh text rolling keatas</marquee>
- Jika Anda sudah melakukannya dengan benar, maka akan muncul tampilan seperti dibawah ini:
- warnanya koq beda ya? : ) ya iyalah... orang kode warnanya saya ubah he..he..
Sudah siap untuk trik yang keempat? lanjuut...
Membuat text turun pada blogrollKayaknya kalo untuk buat text turun sudah banyak ya yang bikinin, tapi daripada Anda harus repot buka blog lainnya, mendingan sekalian saya tuliskan aja disini. Begini nih caranya :
- Copy paste kode berikut ini :
<marquee
direction="down" bgcolor="#9900FF">text rolling turun</marquee>
- Lihat pada tulisan yang saya stabilo kuning ya, ya... itulah kunci perintahnya. Jadi textnya bisa rolling kebawah. Hasilnya akan terlihat seperti dibawah ini:
Menggeser text kekiri dan kekananUntuk kali ini, kita tidak hanya akan menggeser text saja, melainkan mengaturnya sehingga dia bisa bergeser kekiri dan kekanan secara otomatis (mulai agak sulit? tidak juga). Silahkan perhatikan langkah-langkah berikut ini:
- Pada script yang sudah ada silahkan Anda menambah perintah seperti yang di stabilo kuning dibawah ini:
<marquee
behavior="alternate" bgcolor="#33FFCC">text goyang kiri dan kanan</marquee>
- Hasilnya seperti dibawah ini, text akan berjalan kekri dan kekanan secara otomatis.
Mengurangi Kecepatan Geser TextUntuk merubah kecepatan bergesernya text, kita tinggal menambah perintah sebagai berikut (yang distabilo kuning ya...)
- Anda harus menambah beberapa perintah di scriptnya seperti yang tertera dibawah ini:
<marquee behavior="alternate" direction="left" bgcolor="#9999CC"
scrollamount="2">text bergeser pelan</marquee>
- Hasilnya akan terlihat, pergeseran text bisa terlihat lebih lambat :
- Jika kita ingin agar pergeseran textnya justru lebih cepat bisa merubah angka yang distabilo ini ya
<marquee behavior="alternate" direction="left" bgcolor="#9999CC"
scrollamount="6">text bergeser cepat</marquee>
- Nah, kelihatan kan tambah kenceng larinya.. kayak kuda binal hehehe...
Text Berhenti Saat Cursor DiatasnyaKalau Anda bingung sama judul postingan ini, silahkan baca sejarahnya, alias baca postingan saya sebelumnya. Pasti deh tambah bingung hehe... becanda lho.
Langsung aja ya, yang perlu Anda lakukan adalah mengikuti langkah-langkah berikut ini:
<marquee behavior="alternate" direction="left" bgcolor="#CCCCCC"
onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" scrolldelay="50"> kalo ada cursor berhenti</marquee>
catatan : tulisan yang saya stabilo kuning diatas hanya untuk menunjukkan kepada Anda disitulah kunci perintahnya. Bukan berarti hanya tulisan itu yang Anda copasin lho.. copas semua bleh!
- Hasilnya akan terlihat seperti dibawah ini:
Mengubah Warna Text Pada Text BerjalanUntuk kali ini, kita akan membahas cara untuk mengubah warna pada text berjalan
- Pertama, Anda harus mengawali dengan tag <div dan diakhiri tag </div>
- Kedua, Anda tinggal menambahkan kode warna sesuai dengan keinginan Anda
<div style="color: red;"><marquee>contoh text berwarna</marquee>
</div>Nb: pokoknya copas aja deh, biar gak ada kelirunya...(warna stabilonya diilangin ya...)
Membuat Hyperlink Pada Text BerjalanInilah yang menurut saya paling keren, membikin text berjalan jadi hyperlink text alias text yang jika diklik akan membuka situsnya. Berikut step bay stepnya :
- pertama, copas kode dibawah ini:
<marquee behavior="scroll" direction="left" bgcolor="#99FFFF" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4"> <a href="url#1">LINK#1</a> <a href="url#2">LINK#2</a> <a href="url#3">LINK#3</a> </marquee>
- hasilnya akan terlihat seperti dibawah ini
Jangan lupa ganti tiap tulisan url#1,url#2,url#3 dengan
alamat URL situs/blog yang Anda kehendaki dan LINK#1 dst dengan
nama situs/blog yang Anda kehendaki
Contoh:
<marquee behavior="scroll" direction="left" bgcolor="#99FFFF" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4"> <a href="http://www.matasehat.com/">Kesehatan Mata</a> <a href="http://www.bongkarrahasia.blogspot.com/">Rahasia Bisnis Online</a> <a href="http://www.entrepreneur-on.blogspot.com/">Entrepreneur Tips</a> </marquee>
Jangan lupa commentnya : )
Anda dapat memilih warna latar belakang anda dengan mengganti kode heksadesimal.
Klik
di sini untuk melihat kode warna yang berbeda.
Ditunggu komentarnya ya boss, jika Anda ingin mendownload artikel ini silahkan klik disini