CARA MEMBUAT TULISAN BERJALAN DIBLOGSPOT
Tutorial Lengkap Cara Membuat Text Berjalan (Marquee)
Cara
membuat teks berjalan html di notepad – Adanya tulisan berjalan
di blog mempercantik tampilan. Dengan alasan inilah banyak blog atau website
yang menaruh tulisan di blognya, baik itu di homepage ataupun di postingan.
Di sini
Saya akan menjelaskan secara singkat bagaimana cara membuat tulisan berjalan di
blog dengan berbagai variasi. Ada yang berjalan ke atas, ke bawah, ke kiri, ke
kanan. Ada yang berjalan zig-zag, ada yang berjalan memantul, ada yang jalannya
berhenti ketika disorot mouse dan lanin-lain.
Kalian
bisa mengeditnya sendiri untuk disesuaikan dengan blog atau website Sendiri.
Dengan sedikit kemampuan edit HTML akan mempercantik tampilan tulisan berjalan
Kalian.
Kode dasar untuk membuat marquee atau teks berjalan
<marquee>TULISAN
INI AKAN BERGERAK</marquee>
Kode di
atas akan terlihat seperti ini:
Tapi
selain kode di atas ada beberapa tambahan kode yang bisa anda berikan untuk
membuat variasi dari marquee. Di bawah ini kita akan berikan kodenya dan
sekaligus mempraktikkan marquee tersebut….
kode direction=”left/right/up/down” digunakan
untuk mengatur arah pergerakan running text
Contoh kode:
<marquee
direction=”right”>TULISAN INI AKAN BERGERAK KE
KANAN</marquee><marquee direction=”up”>TULISAN INI AKAN BERGERAK KE
ATAS</marquee>
Hasilnya
akan terlihat seperti ini:
kode behavior=”scroll/slide/alternate” digunakan
untuk mengatur type pergerakan
1.
Scroll jika ingin teks
bergerak terus ke suatu sisi dan muncul dari sisi lain
2.
Slide jika ingin teks
bergerak sekali kemudian berhenti dan diulangi lagi
3.
Alternate jika ingin teks
terlihat memantul/bouncing dari ujung kembali ke ujung. Contoh kode:
<marquee
behavior=”scroll”>MARQUEE BERGERAK SCROLL</marquee><marquee
behavior=”alternate”>MARQUEE BERGERAK BOLAK-BALIK</marquee>
Hasilnya
akan terlihat seperti ini:
kode scrollamount=”angka” digunakan
untuk mengatur kecepatan pergerakan tulisan semakin besar angkanya semakin
kencang
Contoh
kode:
<marquee
scrollamount=”20″>MARQUEE SPEED 20!!!</marquee>
Hasilnya
akan terlihat seperti ini:
kode bgcolor=”warna” digunakan
untuk memberikan warna latar pada marquee jika diperlukan
Contoh
kode marquee:
<marquee
bgcolor=”DarkCyan”>RUNNING TEXT LATAR DARK CYAN</marquee>
Hasilnya
akan terlihat seperti ini:
kode scrolldelay=”angka” digunakan
untuk mengatur jeda dalam milidetik, jadi untuk jeda 1 detik masukkan nilai
1000
Contoh
kode marquee:
<marquee
scrolldelay=”2000″>RUNNING TEKS DELAY 2 DETIK</marquee>
Hasilnya
akan terlihat seperti ini:
kode loop=”angka|-1|infinite” digunakan
untuk mengatur pengulangan atau repetisi dari marquee
Contoh
kode marquee:
<marquee
loop=”25″>MARQUEE BEROTASI HANYA 25 KALI</marquee>
Keterangan:
Setelah 25 kali teks akan hilang.
Hasilnya
akan terlihat ini:
kode title=”pesan” digunakan
untuk memunculkan pesan jika kursor mouse diletakkan di jalur teks berjalan
tersebut.
Contoh
kode:
<marquee
title=”INI PESANNYA”>MARQUEE DENGAN PESAN</marquee>
Hasilnya
akan terlihat seperti ini:
kode
MARQUEE DENGAN PESAN digunakan untuk mengatur lebar media teks berjalan, bisa
dalam satuan pixel atau persen dari bidang yang ada
Contoh
kode:
<marquee
width=”250px”>MARQUEE LEBAR 250 PIXEL</marquee>
Hasilnya
akan terlihat seperti ini:
kode onmouseover=”this.stop()”
onmouseout=”this.start()” digunakan untuk membuat tulisan marquee
berhenti jika dilintasi kursor mouse
Contoh
kode:
<marquee
behavior=”alternate” onmouseover=”this.stop()” onmouseout=”this.start()”>MARQUEE
BERGERAK BOLAK-BALIK</marquee>
Hasilnya
akan terlihat seperti ini:
Cara Membuat Marquee Bergerak Zig-zag
<marquee
behavior=”alternate” direction=”up” height=”50px”><marquee
direction=”right”>MARQUEE BERGERAK ZIG-ZAG</marquee></marquee>
Hasilnya
akan terlihat seperti ini:
Cara Memberi Link Pada Marquee
Kode yang
digunakan untuk memasukan link pada marquee
<marquee
behavior=”alternate” onmouseover=”this.stop()” onmouseout=”this.start()”
scrollamount=”10″><a href=”https://ridpir.com”>CARA MEMBUAT TULISAN
BERJALAN (MARQUEE)</a>
</marquee>
catatan :
ganti https://ridpir.com dengan Url yang di inginkan.
Hasilnya
akan terlihat seperti ini:
Cara Mengubah Huruf, Warna dan Ukuran Font Marquee
Untuk
mengubah jenis huruf dan ukuran bisa menambahkan kode css
style=”font-family: verdana; font-size:25px; color: #FFFFFF;”
font-family:
verdana; adalah kode untuk mengubah jenis huruf. Jika anda tidak suka dengan
font impact, silahkan diganti dengan Arial, Times New Roman, atau yang lainnya
font-size:25px;
adalah kode untuk mengatur ukuran huruf. Ubah nilai 24 sesuka hati anda.
Semakin besar nilainya, maka semakin besar juga hurufnya.
color:#FFFFFF;
adalah kode untuk mengatur warna huruf. Silahkan mengganti kode hex #FFFFFF
dengan nilai hex yang anda suka.
Contoh
kode:
<marquee
bgcolor=”#10BE73″ style=”font-family: impact; font-size:24px; color:
#FFFFFF;”>MARQUEE LATAR KEREN</marquee>
Dengan
Hasil:
Itulah Cara membuat teks berjalan (marquee) baik di notepad, di blog (website) ataupun ditempat coding lainnya yang bisa Anda praktikkan dengan sangat mudah
Jika MARQUEE Tidak Bergerak, Silakan Klik Tautan Berikut ini Untuk Melihat Tutorial Cara Membuat Marquee
<marquee
direction=”up” height=”100″>TULISAN BERGERAK KE ATAS</marquee>
<marquee
direction=”down” height=”100″>TULISAN BERGERAK KE BAWAH</marquee>
Membuat Text Warna Warni Berjalan
1. Buka Blogger.com
2. Klik Menu Tata
Letak
3. Tambah Widget Pilih
HTML/ JavaScript
4. Copas Kode Dibawah
ini ke Dalam Kotak Konten
5. Ganti Text Berwarna Merah Dengan Text Yang Anda Inginkan
<div style="border: 0px solid blue; font-family: "arial
black"; font-size: 25px; font-weight: bolder; padding: 1px
1px;">
<marquee behavior="scroll" direction="left"
onmouseout="run" onmouseover="stop"
scrollamount="8" width="900px">
<script type="text/javascript">
var message="Tip dan Trik Menyelesaikan
Segala Kendala Dengan Mudah "
var bgsGR1color="Red" /* Warna utama teks */
var bgsGR2color="Green" /* Warna teks flash pertama */
var bgsGR3color="Blue" /* Warna teks flash ke dua */
var flashspeed=20 // kec. ganti warna (1/1000 dt)
var flashingletters=50 // jumlah teks pertama
var flashingletters2=50 // jumlah berwarna teks ke dua
var flashpause=30 // waktu jeda pergantian warna (1/1000 dtk)
var n=0
if (document.all||document.getElementById){document.write('<font
color="'+bgsGR1color+'">')
for (m=0;m<message.length;m++)
document.write('<span
id="neonlight'+m+'">'+message.charAt(m)+'</span>')
document.write('</font>')}else
document.write(message)
function crossref(number){var crossobj=document.all?
eval("document.all.neonlight"+number) :
document.getElementById("neonlight"+number)
return crossobj}function neon(){if (n==0){for (m=0;m<message.length;m++)
crossref(m).style.color=bgsGR1color}
crossref(n).style.color=bgsGR2color
if (n>flashingletters-1) crossref(n-flashingletters).style.color=bgsGR3color
if (n>(flashingletters+flashingletters2)-1)
crossref(n-flashingletters-flashingletters2).style.color=bgsGR1color
if (n<message.length-1)
n++
else{n=0
clearInterval(flashing)
setTimeout("beginneon()",flashpause)
return}}
function beginneon(){if (document.all||document.getElementById)
flashing=setInterval("neon()",flashspeed)}
beginneon()
</script></marquee></div>
Komentar
Posting Komentar