Teks berjalan atau Marquee sudah familiar kita lihat di dunia periklanan (billboard) maupun pada tampilan televisi di bagian bawah yang juga disebut dengan running text. Marquee dapat menampilkan gerakan tulisan yang dapat menarik perhatian orang untuk membaca pesan yang ada di dalamnya; baik itu pesan komersil, informasi/berita, himbauan, dll. Nah anda juga bisa menambahi blog kesayangan dengan marquee ini. Materi tulisan terserah saja, bisa terjemahan Al-Qur'an atau Hadits (seperti blog ini), bisa pengumuman, bisa anjuran, atau teks komersil/iklan.
Cara Memasang Marquee:
1. Login ke Blogger anda terlebih dahulu
(misalnya masuk via: www.blogger.com)
2. Klik Nama blog anda.
3. Kemudian Klik Tata letak
4. Dan Pilih Add gadget lalu klik HTML/Javascript
.
5. letakkan kode berikut di Html/Javascript :
(di copy-paste)
Aneka Model Skrip Marquee, pilih mana jenis yang anda suka,
lalu masukkan (copy-Paste) skripnya yang berwarna hijau muda ke kotak HTML/JavaScript.
1. Teks berjalan dari kanan ke kiri
2. Teks berjalan/tampil 5 kali saja lalu akan hilang
<marquee loop"5">www.jadipintar.com</marquee>
3. Teks seperti nomor 1 dengan tambahan blok warna biru
<marquee bgcolor="blue">www.jadipintar.com</marquee>
4. Teks berjalan dalam separuh media
<marquee width="50%>www.jadipintar.com</marquee>
5. Teks berjalan ngebut 10 kali kecepatn normal
<marquee scrollamount="10">www.jadipintar.com</marquee>
6. Teks berjalan dari kiri ke kanan
<marquee direction="right">www.jadipintar.com</marquee>
7. Teks berjalan bolak-balik
<marquee behavior="alternate">www.jadipintar.com</marquee>
8. Teks meluncur ke bawah
<marquee direction="down" height="75">www.jadipintar.com</marquee>
9. Teks berjalan tunggu Mouse
<marquee behavior"alternate" onMouseOver="this.stop()" onMouseOut="this.start()">www.jadipintar.com</marquee>
10. Teks berjalan delay 0,3 detik
<marquee scrolldelay="300">www.jadipintar.com</marquee>
11. Teks Mendaki dari bawah ke atas
<marquee direction="up" height="100" onMouseOver="this.stop()" onMouseOut="this.start()" scrollamount="5"><a href="http://blogmashanif.blogspot.com/">www.jadipintar.com </a></marquee>
Keterangan :
Silakan ganti tulisan warna coklat (teks nomor 3 dengan
warna kesukaan anda, in english)
Silakan ganti tulisan warna merah dengan tulisan apa saja
yang anda suka.
Penjelasan:
1. WIDTH and HEIGHT. Atribut ini digunakan untuk menentukan ukuran dari tampilan untuk tag MARQUEEContoh :
<marquee width=200 height=50> jadipintar.com </marquee>
<marquee width=500 height=200> jadipintarj.com </marquee>
2. DIRECTION. Atribut ini digunakan untuk menentukan arah gerak dari tampilan apakah ingin ke kiri, kanan, atas, atau bawah.
Contoh :
<marquee direction=left> jadipintar.com </marquee>
<marquee direction=right> jadipintar.com </marquee>
<marquee direction=up> jadipintar.com </marquee>
<marquee direction=down> jadipintar.com </marquee>
3. BEHAVIOUR. Atribut ini digunakan untuk menentukan bagaimana tampilan bergerak, jika sebelumnya yang ditentukan adalah arahnya maka pada atribut BEHAVIOUR yang ditentukan adalah perilaku geraknya.
Contoh :
BEHAVIOR = SCROLL
Dengan penentuan BEHAVIOR = SCROLL maka tampilan akan bergerak sesuai arah yang ditentukan dan akan kembali mengulangi gerakan dari titik awal gerakan.
<marquee behaviour=scroll> jadipintar.com </marquee>
BEHAVIOR = SLIDE Dengan penentuan BEHAVIOR = SLIDE maka tampilan akan bergerak sesuai arah yang ditentukan lalu kemudian berhenti di titik akhir tanpa mengulangi gerakan sebelumnya.
<marquee behaviour=slide> jadipintar.com </marquee>
BEHAVIOR = ALTERNATE
Dengan penentuan BEHAVIOR = ALTERNATE maka tampilan akan bergerak bolak-balik.
<marquee behaviour=alternate> jadipintar.com </marquee>
Kalian dapat mencoba atribut-atribut diatas dan lihatkan hasilnya..
4. SCROLL DELAY. Atribut ini digunakan untuk menentukan jeda waktu antara tiap gerakan dari tampilan. Nilai yang diisi untuk atribut ini adalah berupa angka dalam mili detik.
Contoh :
Normal
<marquee> jadipintar.com </marquee>
Delay 500 mili detik
<marquee scrolldelay=500> jadipintar.com </marquee>
Delay 1000 mili detik
<marquee scrolldelay=1000> jadipintar.com </marquee>
Anda dapat mencoba atribut-atribut diatas dan lihatkan hasilnya..
5. SCROLL AMOUNT. Meskipun kelihatannya hampir sama dengan atribut sebelumnya SCROLLDELAY, SCROLLAMOUNT memiliki sedikit perbedaan dengan atribut tersebut. Jika SCROLLDELAY berfungsi untuk menentukan jeda waktu antara tiap gerakan, maka atribut SCROLLAMOUNT berfungsi untuk menentukan jauhnya lompatan untuk setiap gerakan.
Contoh berikut merupakan perbedaan antara marquee normal dengan marquee yang mempunyai nilai SCROLLAMOUNT 20 mili detik dan 70 mili detik:
<marquee> jadipintar.com </marquee>
<marquee scrollamount=20> jadipintar.com </marquee>
<marquee scrollamount=70> jadipintar.com </marquee>
Anda dapat melihat hasilnya seteleh mengetik atribut-atribut diatas....
6. BGCOLOR. Penggunaan atribut BGCOLOR pada tag MARQUEE akan menghasilkan jalur gerakan memiliki warna. Prinsip kerja atribut ini sama dengan atribut BGCOLOR pada tag TABLE yaitu memberikan warna latar.
Contoh :
<marquee bgcolor=yellow> jadipintar.com </marquee>
Tag diatas akan menghasilkan tulisan bergerak yang memiliki warna latar berwarna kuning.
7. HSPACE. Atribut ini berguna untuk memberikan jarak antara tampilan bergerak dengan tulisan yang ada disamping kanan dan kiri tulisan.
Contoh :
Halo kawan <marquee width=25% bgcolor=yellow>
jadipintar.com <br />
Tempat dimana kamu bisa belajar segalanya !!
</marquee> Halo kawan..
Kode diatas mempunyai nilai HSPACE default yaitu 0 sehingga tidak ada jarak dikiri dan kanan.
Sedangkan kode berikut ini mempunyai nilai HSPACE sebesar 70.
Halo kawan <marquee hspace=70 width=25% bgcolor=yellow>
jadipintar.com <br />
Tempat dimana kamu bisa belajar segalanya !!
</marquee> Halo kawan..
8. VSPACE. Atribut ini berguna untuk memberikan jarak antara tampilan bergerak dengan tulisan yang ada diatas dan dibawah tulisan.
Contoh
Halo kawan <br /><marquee width=25% bgcolor=yellow>
jadipintar.com <br />
Tempat dimana kamu bisa belajar segalanya !!
</marquee><br />Halo kawan..
Kode diatas mempunyai nilai HSPACE default yaitu 0.
Sedangkan dibawah ini kode untuk memberikan jarak sebesar 50 px diatas dan dibawah marquee.
Halo kawan <br /><marquee vspace=50 width=25% bgcolor=yellow>
jadipintar.com <br />
Tempat dimana kamu bisa belajar segalanya !!
</marquee><br />Halo kawan..
Hasilnya dapat anda lihat sendiri setelah mencobanya... :)
9. LOOP. Pengulangan dari tampilan bergerak dengan tag MARQUEE dapat diatur jumlahnya dengan atribut ini. Jika kamu tidak mengatur jumlah pengulangan dengan atribut loop maka secara otomatis akan diartikan bahwa tampilan itu akan bergerak terus menerus tanpa batas.
Contoh penggunaan :
<marquee loop=2> jadipintar.com </marquee>
Tag diatas mengkombinasikan atribut LOOP dengan atribut BEHAVIOR sehingga akan menghasilkan pengulangan sebanyak empat kali lalu setelah itu teks tersebut akan berhenti pada titik akhir.
Selamat berkreasi.
Sumber:
http://semogaberkah2010.blogspot.com/2011/03/tag-marquee-dan-atributnya.html
Jazzakumullah khair kang haji....... ilmu baru kye..., bisa dipake buat bikin tulisan yg bermanfaat, hadist, ayat2 Al-Qur'an dsb..
BalasHapusWa iyyaakum, apa saja yang bisa diambil dan dimanfaatkan dari blog E TA'LIM ini silakan ambil, sy ikhlas. Pangggilan "haji" antum insyaallah sebagai do'a, amin.....
BalasHapusJazakalloh khaer katsir .... supaya tulisan berada di bawah atau diatas judul blog bagaimana pak...???
BalasHapusWa iyyaakum,
HapusTergantung dari model template yang antum pilih untuk blog, jika ada kotak "Tambahkan gadged" di atas / di bawah judul blog antum, di situlah skrip bisa dimasukkan, silakan anda cek di "Tata letak"
sangat bermanfaat jazakalloh
BalasHapusTerima kasih, wa iyyaakum
Hapusgan mau nanya kalo semisal buat kaya gitu tapi yang di tampilkan per postingan punya kodenya gak bos?
BalasHapus