Cara Membuat Teks Berjalan di Blog

Cara Membuat Teks Berjalan di Blog - Pernah tidak sobat melihat tulisan / teks yang mondar - mandir di suatu blog?? saya rasa pasti sudah pernah.. namanya marquee sob! fungsinya sebenarnya hanyalah sebagai hiasan di blog, hampir sama dengan headline news (baca : memasang headline news di blog) cuma yang ini lebih mudah ngaturnya, terutama dalam mengatur gerakan / prilaku teks yang di inginkan. Sobat yang tertarik membuat tulisan yang mondar - mandir ini, silahkan ikuti terus tutorialnya.

Cara Teks Tulisan Berjalan di Blog

1.  Tulisan bergerak dari kanan ke kiri
<marquee direction="left" scrollamount="2" align="center">http://rituelde.blogspot.com/</marquee>

 Seperti ini hasilnya bro...
http://rituelde.blogspot.com/

2.  Tulisan bergerak dari kiri ke kanan
<marquee direction="right" scrollamount="2" align="center">http://rituelde.blogspot.com/</marquee>

 begini hasilnya bro...
http://rituelde.blogspot.com/

3. Tulisan bergerak bolak balik (mondar-mandir) dari kanan ke kiri
<marquee direction="left" scrollamount="2" align="center" behavior="alternate">http://rituelde.blogspot.com/</marquee>

lihatlah hasilnya...
http://rituelde.blogspot.com/

4. Tulisan bergerak bolak balik (mondar-mandir) dari kiri ke kanan
<marquee direction="right" scrollamount="2" align="center" behavior="alternate">http://rituelde.blogspot.com/</marquee>

 hasilnya bro...
http://rituelde.blogspot.com/

5. Tulisan bergerak dari atas ke bawah
<marquee direction="down" scrollamount="2" align="center">http://rituelde.blogspot.com/</marquee>

lalu hasilnya seperti ini bro...
http://rituelde.blogspot.com/

6. Tulisan bergerak dari bawah ke atas
<marquee direction="up" scrollamount="2" align="center">http://rituelde.blogspot.com/</marquee>

seperti ini bro hasilnya...
http://rituelde.blogspot.com/

7. Tulisan bergerak mondar-mandir dari atas ke bawah
<marquee direction="up" scrollamount="2" align="center" behavior="alternate">http://rituelde.blogspot.com/</marquee>

lalu hasilnya seperti ini bro...
http://rituelde.blogspot.com/

8. Tulisan bergerak zig-zag (diagonal) memantul
<center><marquee direction="up" scrollamount="2" align="center" behavior="alternate" width="90%"><marquee direction="right" behavior="alternate">http://rituelde.blogspot.com/</marquee></marquee></center>

dan begini hasilnya bro...
http://rituelde.blogspot.com/

9. Tulisan bergerak zig-zag (diagonal) tembus
<center><marquee direction="up" scrollamount="2" align="center" behavior="alternate" width="90%"><marquee direction="right"> http://rituelde.blogspot.com/</marquee></marquee></center>

terus begini hasilnya bro...
http://rituelde.blogspot.com/

Cara memasang :

  1. Login ke akun blog sobat
  2. Masu ke Dashboard
  3. Klik Layout (Tata Letak --> Add  Gadget (Tambah gadget) --> HTML/Javascript
  4. Masukkan kode marquee dari salah satu tulisan berjalan diatas
  5. Klik save dan lihat hasilnya.

Catatan :
  • Direction : untuk mengatur pola gerakan teks (left, right, up dan down)
  • Scrollamount : untuk mengatur kecepatan gerakan teks. Naikkan angkanya (dari 2 menjadi 3 ) untuk mempercepat gerakan dan sebaliknya.
  • Behavior ( scroll/slide/alternate ): untuk mengatur prilaku gerakan.
  • Untuk menambahkan background, padding, border, color, dll pada marquee, silahkan sisipkan  kode marquee antara kode berikut
<div style="background: #EE1111; border: 2px solid #4FEE11; color: white; font-size: 20px; font-weight: bold; letter-spacing: 0.2em; padding: 15px;">
<marquee direction="left" scrollamount="6" align="center">http://rituelde.blogspot.com/</marquee>
</div>
    * Ganti tulisan warna Biru sesuai dengan yang sobat inginkan, pilih diantara 1-9 yang ada diatas...
    * Ganti tulisan warna Hijau dengan tulisan yang sobat inginkan...
Lalu hasilnya begini....
http://rituelde.blogspot.com/

 Untuk menyisipkan link pada marquee, gunakan kode berikut :
<div style="background: #EE1111; border: 2px solid #4FEE11; color:white ; font-size: 20px; font-weight: bold; letter-spacing: 0.2em; padding: 15px;">
<marquee direction="left" scrollamount="6" align="center"> <a href="http://rituelde.blogspot.com/2012/10/cara-membuat-teks-berjalan-di-blog.html"/>http://rituelde.blogspot.com/</a></marquee> </div>
    * Ganti tulisan yang berwana Merah dengan Url yang di inginkan.

hasilnya...


Contoh lain
Jika pointer diarahkan ke teks, maka teksnya berhenti

Berikut Kodenya
<div style="background: #000000; border: 2px solid #b08006; color: white; font-size: 16px; font-weight: no bold; letter-spacing: 0.1em; padding: 15px;">
<marquee align="center" direction="up" height="150" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="100%">Blogger Tutorials - Rituel<br />
<a href="http://rituelde.blogspot.com/2012/10/cara-membuatmemasang-burung-twitter.html/">1.  Cara Membuat Burung Twitter Terbang di Blog</a><br />
<a href="http://rituelde.blogspot.com/2012/10/cara-membuat-teks-berjalan-di-blog.html">2.  Cara Membuat Tulisan Berjalan di Blog</a><br />
<a href="http://rituelde.blogspot.com/2012/10/cara-membuat-contact-me-di-blog.html">3.  Cara Membuat 'Contact Me' di Blog </a><br />
<a href="http://rituelde.blogspot.com/2012/10/kode-html-warna.html">4.  Kode HTML Warna </a><br />
<a href="http://rituelde.blogspot.com/2012/10/cara-mengganti-template-blogspot.html">5. Cara Mengganti Template Blog</a><br />
</marquee>
</div>
 * Kode yang berwarna biru adalah perintah pada teks untuk terhenti ketika di lewati pointer

Selamat Mencoba & Good Luck ....

0 Comments

Follow Me On Instagram