Mungkin file tutorial ini sudah tak asing lagi bagi para peblogger yang sudah malang melintang dalam menjelajah dan mengubek-ubek blognya.Tapi mungkin juga ada yang belum tahu mengenai tutorial sederhana tentang cara membuat teks berjalan dan berkedip pada blog wordpress, blogspot, joomla ataupun pada blog dengan css yang lain.
Cara ini juga berlaku pada website dengan design sendiri yang berformat html. Teks berjalan dan berkedip pada bahasa html disebut dengan marquee behavior. Nah, kalau teman-teman mencari arti kata marquee di kamus, maka artinya akan lain yaitu “tenda besar”. Pastinya nggak nyambung kan..
Tidak panjang lebar, berikut tutorial cara membuat teks berjalan dan berkedip pada blog wordpress, joomla, blogspot, dan blog yang lain :
1. Marquee 1.0.0
Marquee 1.0 ini merupakan marquee behavior standar agar teks anda bisa berjalan secara default (dari kanan ke kiri).
Tag HTML membuat teks berjalan marquee 1.0.0 :
<marquee>Teks Anda</marquee>
2. Marquee 1.0.1
Marquee 1.0.1 adalah pengembangan dari marquee 1.0.0, Marquee ini mempunyai kelebihan jika anda arahkan mouse pada teks tersebut maka dia akan istirahat atau berhenti.
Tag HTML membuat teks berjalan marquee 1.0.1 :
<marquee onmouseover=”this.stop()” onmouseout=”this.start()”>Teks Anda</marquee>
3. Marquee 1.0.2
Teks dengan marquee 1.0.2 ini maka akan berjalan sebaliknya yaitu dari kiri ke kanan.
Tag HTML membuat teks berjalan marquee 1.0.2 :
<marquee direction=”right”>Teks Anda</marquee>
4. Marquee 2.0.o
Marquee 2.0.0 ini mempunyai kelebihan bolak-balik dari ruang kotak yang tidak terlihat oleh mata.
Tag HTML membuat teks berjalan marquee 2.0.0 :
<marquee behavior=”alternate”>Teks Anda</marquee>
5. Marquee 2.0.1
Marquee 2.0.1 adalah pengembangan dari marquee sebelumnya, dengan pancingan scrollamount dia menjadi sangat agresif/cepat.
Tag HTML membuat teks berjalan marquee 2.0.1 :
<marquee behavior=”alternate” scrollamount=”18″>Teks Anda</marquee>
6. Marquee 2.0.2
Marquee 2.0.2 masih pengembangan dari Marquee 2.0 dengan sentuhan on-mouse-over stop dan on-mouse-out start, seperti marquee 1.0.1 yaitu jika anda arahkan mouse pada teks tersebut maka dia akan berhenti.
Tag HTML membuat teks berjalan marquee 2.0.2 :
<marquee behavior=”alternate” onmouseover=”this.stop()” onmouseout=”this.start()”>Teks Anda</marquee>
7. Marquee 3.0.0
Marquee 3.0.0 adalah marquee climbing, marquee pendaki ini suka sekali ketinggian, sehingga kita lihat arah teksnya pun ke atas. Jika Anda memiliki teks yang banyak, maka marquee ini merupakan pilihan yang tepat dan sangat cocok.
Tag HTML membuat teks berjalan marquee 3.0.0 :
<marquee direction=”up”>Teks Anda</marquee>
8 Marquee 3.0.1
Marquee 3.0.1 adalah pengembangan dari marquee sebelumnya yang tidak mempunyai batas ruang, marquee ini kita batasi ruang kasatnya sehingga memiliki height 100 saja. Demikian dengan kemampuan scrollamountnya kita perlambat. Dan kita tambahkan on mouse stop/start juga.
Tag HTML membuat teks berjalan marquee 3.0.1 :
<marquee direction=”up” onmouseover=”this.stop()” width=”100%” scrollamount=”2″ onmouseout=”this.start()” height=”100″>Teks Anda</marquee>
9. Marquee 3.0.2
Marquee 3.0.2 masih merupakan pengembangan dari marquee sebelumnya, hanya saja teks berada di tengah ruang kasat.
Tag HTML membuat teks berjalan marquee 3.0.2 :
<marquee direction=”up” width=”100%” scrollamount=”2″ height=”100″ align=”center”>Teks Anda</marquee>
10. Marquee 3.0.3
Marquee 3.0.3 adalah pengembangan juga dengan arah berlawanan dari marquee sebelumnya. kelebihan marquee ini yaitu teks bisa berjalan menurun atau teks yang kita lihat berjalan dari atas ke bawah. Kemampuan scrollamountnya tidak kita batasi sehingga terlihat agresif dengan ruang kasat yang kecil. Bisa diperlambat dengan format html seperti diatas.
Tag HTML membuat teks berjalan marquee 3.0.3 :
<marquee direction=”down” width=”100%” height=”100″>Teks Anda</marquee>
11. Membuat teks berkedip
Untuk membuat teks berkedip seperti diatas sangat mudah dan simple. Tambahkan saja format html seperti dibawah ini :
Tag HTML membuat teks berkedip :
<blink>Teks anda</blink>
12. Membuat teks berjalan yang di dalam nya terdapat link :
<marquee onmouseover="this.stop()" onmouseout="this.start()"
scrollamount="2" direction="up" width="100%" height="100"
align="center">
<a href="http://rubrik-elektronik.blogspot.com" target="new">Rubrik Elektronik</a><br/>
<a href="http://electronic-rubric.blogspot.com" target="new">Electronic Rubric </a><br/>
<a href="http://kolom-iklan.blogspot.com" target="new">Kolom iklan </a><br/>
</marquee>
hasilnya :
Mungkin itu saja beberapa contoh yang bisa di berikan, silahkan anda
otak-atik sendiri agar tercipta variasi-variasi dari marquee ini.
Diatas adalah tutorial sederhana dalam membuat teks berjalan dan berkedip pada blog wordpress, blogspot, joomla ataupun blog yang lain. Semoga bermanfaat.
Cetak Halaman Ini
0 komentar:
Posting Komentar