Membuat Efek Marquee Pada Blog (Tulisan Berjalan)

Membuat Efek Marquee Pada Blog (Tulisan Berjalan)
Deskripsi: efek marquee digunakan untuk membuat efek tulisan berjalan atau bisa juga digunakan untuk membuat efek gambar bergerak dari kiri ke kanan, atas-bawah, sesuai dengan perintah yang ditambahkan pada kode marquee. Cukup hanya dengan menggunakan kode HTML sederhana maka efek tulisan bergerak akan muncul pada blog Anda. Kode dasar perintah marque adalah seperti di bawah ini:

<marquee>Text Anda Di Sini</marquee>

Untuk menampilkan dan mengatur efek pada kode marquee, maka perlu ditambahkan kode lain yang  biasanya disebut atribut seperti di bawah ini:

• bgcolor="#006600" » untuk mengatur warna background (latar belakang) teks
• onmouseover="this.stop()" » text akan berhenti jika pointer diarahkan ke text yang sedang bergerak
• onmouseout="this.start()" » text akan kembali bergerak jika pointer ke tempat lain
• align="center" » text rata tengah
• direction="left/right/up/down" » mengatur arah gerakan teks
• behavior="scroll/slide/alternate" untuk mengatur perilaku gerakan
• scroll » teks bergerak berputar
• slide » teks bergerak sekali lalu berhenti
• alternate » teks bergerak dari kiri kekanan lalu balik lagi ( bolak-balik)
• title="masukkan text tanda" » pesan akan muncul saat mouse berada di atas teks
• scrollmount="4" » mengatur kecepatan gerakan, semakin besar angka semakin cepat gerakannya
• scrolldelay="4" » untuk mengatur waktu tunda gerakan dalam satuan mili detik
• width="200" » mengatur lebar blok teks dalam pixel atau persen
• height="100" » mengatur tinggi teks dalam pixel atau persen

Contoh Efek Marque Tulisan Bergerak

1. Dari kanan ke kiri

<marquee align="center" direction="left" height="50" scrollamount="2" width="30%"> marquee dari kanan ke kiri </marquee>

marquee dari kanan ke kiri

2. Dari kiri ke kanan

<marquee align="center" direction="right" height="50" scrollamount="2" width="30%"> marquee dari kanan ke kiri </marquee>

marquee dari kanan ke kiri

Anda bisa mengganti atribut left/right/up/down sesuai dengan keinginan Anda

3. Marquee dengan variasi huruf dan warna belakang

<div align="left">
<span style="color: white; font-family: georgia; margin: 20px 0px;">
<b>
<marquee behavior="alternate" bgcolor="red" scrollamount="3" width="80%">
Marquee dengan variasi huruf dan warna latar belakang
</marquee>
</b>
</span>
</div>

Marquee dengan variasi huruf dan warna latar belakang

4. Marquee menggunakan tambahan kode JavaScript

Agar lebih menarik, kode marquee juga bisa dipadukan dengan javascript sederhana, seperti onmouseover="this.stop()"  dan onmouseout="this.start()". Fungsi dari onmouseover="this.stop()" adalah ketika pointer diarahkan ke tulisan yang berjalan, maka tulisan akan segera berhenti, sebaliknya fungsi dari onmouseout="this.start()" adalah tulisan akan kembali berjalan atau bergerak ketika pointer yang sebelumnya mengarah pada tulisan yang bergerak dipindah ke tempat lain.

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="50%" height="100" align="center">Arahkan mouse Anda ke sini </marquee> 

Arahkan mouse Anda ke sini

5. Marquee dengan kode link

<marquee align="center" direction="up" height="200" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="50%">
<a href="http://dynamicscript.blogspot.com/2012/11/customize-blogger-popular-post-widget.html">Customize Blogger Popular Post widget with Multicolored</a>
<a href="http://dynamicscript.blogspot.com/2012/11/windows-8-secrets-books.html">Windows 8 Secrets - Books</a>
<a href="http://dynamicscript.blogspot.com/2012/11/microsoft-windows-8-pro.html">Microsoft Windows 8 Pro</a>
<a href="http://dynamicscript.blogspot.com/2012/10/dynamicscript-jquery-scroll-to-top-control-v-1-1.html">jQuery Scroll to Top Control v1.1 </a>
</marquee> 

<marquee align="center" direction="down" height="200" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="50%">
<a href="http://dynamicscript.blogspot.com/2012/10/dynamicscript-jquery-scroll-to-top-control-v-1-1.html">jQuery Scroll to Top Control v1.1 </a>
<a href="http://dynamicscript.blogspot.com/2012/11/microsoft-windows-8-pro.html">Microsoft Windows 8 Pro</a>
<a href="http://dynamicscript.blogspot.com/2012/11/windows-8-secrets-books.html">Windows 8 Secrets - Books</a>
<a href="http://dynamicscript.blogspot.com/2012/11/customize-blogger-popular-post-widget.html">Customize Blogger Popular Post widget with Multicolored</a>
</marquee> 

6. Marquee dengan gambar

<marquee direction="up" height="350" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="4">

<a href="http://tutorial-beta.blogspot.com/"><img height="350" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK80jmDZNqWqzNmAO_VM0i7OMO_TAyXxVus0B66sueJ5kgvBO5A-0MhAn0iSu-VI4_SmPd-lxAeowyC0Kfrae85-l44T2-uJdTEHRFrzMw8_XBmegh_NTgjNtBgvVHvHpirY1Y1tL8n7U/s1600/Pink+Rose+Gloria+Betsy+Alfatina.jpg" width="450" /></a>

<a href="http://tutorial-beta.blogspot.com/"><img height="350" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhZMHYwCImd_ue-m3JXz5pJ8RpiZ2PsoTXtPVkNTHGi5njA09k8OtFaULw_7EXhnZBRkWVBUEwlE77JLSb6-WuNkMENWGBq7jN6e7hoaMJxZJOvnBQSaPh5z-noIlZvICONpkIcZJ08Qs/s1600/Yellow+Rose+Gloria+Betsy.jpg" width="450" /></a>

<a href="http://tutorial-beta.blogspot.com/"><img height="350" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4CWKhWGf8836uAiAnraBZqLBGxB_IInzNtvZCj95BMDtkU5mva3iRy5KuNTu7M-2MEoOt72sgPK1GVfWBWByi6OAhIG9wTFQT1Z4MWyT3FocGuX5tz3L0X0LHUKIDOprlPtz3I9wMBTs/s1600/Red+Roses+Flower+Goresan+Memori.jpg" width="450" /></a>

<a href="http://tutorial-beta.blogspot.com/"><img height="350" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKkavnX46OSheDm59ZyRl9qm6Bxn2c3Ct63WZ6yKDPczfzxnwe4wlZaD0owIHiUH5kpp3ZKW8fKtOfiO4-oJ-MSUg30OiENuEIoRdd55f2gRjcRanGuKEMmUUYV5waT9h-rSVocTlgYn4/s1600/Lotus+8.jpg" width="450" /></a>

</marquee>

Cara Install Marque di Blog

Anda bisa menampilkan efek marque di mana saja sesuai dengan keinginan Anda. Di bawah akan saya berikan sedikit gambaran tentang cara memasang efek marquee di blog.

1. Log In di Blogger
2. Pilih Blog Anda
3. Pilih menu Tata Letak



4. Klik Tambah Gadget



5. Pilih widget HTML/JavaScript



6. Paste kode marquee



7. Klik tombol Simpan
8. Selesai

Semoga bermanfaat.
scr:tutorial-beta.blogspot.com