Cara Membuat Teks Bergerakdi Blog – Anda tentu sering melihat teks/tulisan yang bergerak dalam suatu blog (marquee). Nah, kali ini Tips SEO + Blog – PC 123 akan memberikan script teks bergerak ini. Fungsi dari teks/tulisan yang bergerak ini hanyalah sebagai hiasan agar blog terlihat lebih menarik dan terkesan unik. Oke, to the point saja. Berikut ini script teks/tulisan bergerak beserta variasinya.
Teks/Tulisan Bergerak dari Kiri ke Kanan:
<marquee direction="right" scrollamount="2" align="center"> Cara Membuat Teks/Tulisan Bergerak di Blog </marquee>
Preview :
Teks/Tulisan Bergerak dari Kanan ke Kiri:
<marquee direction="left" scrollamount="2" align="center"> Cara Membuat Teks/Tulisan Bergerak di Blog</marquee>
Preview :
Teks/Tulisan Bergerak Bolak Balik Kanan Kiri:
<marquee direction="right" scrollamount="2" align="center" behavior="alternate"> Cara Membuat Teks/Tulisan Bergerak Bolak Balik di Blog </marquee>
Preview :
Teks/Tulisan Bergerak dari Bawah ke Atas:
<marquee direction="up" scrollamount="2" align="center"> Teks/Tulisan Bergerak dari Bawah ke Atas di Blog </marquee>
Preview :
Teks/Tulisan Bergerak dari Atas ke Bawah:
<marquee direction="down" scrollamount="2" align="center"> Teks/Tulisan Bergerak dari Atas ke Bawah di Blog</marquee>
Preview :
Teks/Tulisan Bergerak Bolak Balik Atas Bawah:
<marquee direction="up" scrollamount="2" align="center" behavior="alternate"> Contoh Teks/Tulisan Bergerak Bolak Balik atas Bawah di Blog</marquee>
Preview :
Teks/Tulisan Bergerak Zig-Zag (Memantul)
<center><marquee direction="up" scrollamount="2" align="center" behavior="alternate" width="90%"><marquee direction="right" behavior="alternate"> Preview Teks/Tulisan Bergerak Memantul di Blog </marquee></marquee></center>
Preview :
Teks/Tulisan Bergerak dengan Background:
<div style="background: #FF0000; border: 2px solid #0000; color: white; font-size: 20px; font-weight: bold; letter-spacing: 0.5em; padding: 15px;">
<marquee direction="left" scrollamount="6" align="center">Contoh Teks/Tulisan Berjalan dengan Background </marquee>
</div>
Preview:
Teks/Tulisan Bergerak dengan Link:
<div style="background: #FFFFFF; border: 2px solid #FF0000; color: black; font-size: 20px; font-weight: bold; letter-spacing: 0.2em; padding: 15px;">
<marquee direction="right" scrollamount="4" align="center"><a href="http://xxpc123xx.blogspot.com"/>Tips SEO + Blog - PC 123</a></marquee>
</div>
Preview :
(Ganti tulisan berwarna merah dengan url Anda, dan yang berwarna biru dengan keterangannya)
Teks/Tulisan Bergerak dengan Link, dan Berhenti Ketika Pointer Diletakkan Diatasnya:
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="100" align="center">
<a href="http://xxpc123xx.blogspot.com/2013/05/cara-membuat-kotak-link-exchange-di-blog.html">Cara Membuat Kotak Link Exchange di Blog</a><br/>
<a href="http://xxpc123xx.blogspot.com/2013/05/compress-css-percepat-loading-blog.html">Cara Mempercepat Loading Blog dengan CSS Compressor</a><br/>
<a href="http://xxpc123xx.blogspot.com/2012/07/membuat-sitemap-blogger.html">Cara Membuat Sitemap di Blogger</a><br/>
</marquee>
Preview:
Catatan :
- Direction : Menentukan pola/arah gerakan teks (right, left, up, down)
- Scrollamount : Menentukan kecepatan gerak teks. Ubah angka 2 menjadi 3 untuk mempercepat gerakan teks, atau sebaliknya.
Cara Memasang Teks/Tulisan Bergerak di Blogger :
1. Buka Blogger dan blog Anda, lalu pilih Tata Letak.
2. Pilih Tambahkan Gadget -> HTML/Javascript.
3. Masukkan kode marquee/teks bergerak diatas (sesuai dengan keinginan Anda, pilih salah satu), dan klik Save/Simpan untuk melihat hasilnya.
Selamat mencoba, dan salam Blogger! Oh, iya! Jangan lupa untuk mengklik +1 dibawah ya! Thanks!
