Cara Membuat Teks Bergerak ~ GuruGoBlog

Paling tidak ada dua cara membuat teks bergerak. Yang pertama adalah menggunakan kode html marquee. Dan yang kedua adalah menggunakan javascript. Kedua cara ini mempunyai kekurangan dan kelebihan.
Membuat teks bergerak dengan html marquee, lebih ringan daripada menggunakan javascript, jadi blog anda akan lebih mudah dibuka pada saat loading. Inilah kelebihannya. Tetapi kekurangannya, kode html ini tidak bisa dibaca oleh browser tertentu. Artinya teks ini tidak bisa bergerak (diam) di beberapa browser. Membuat teks bergerak dengan javascript keunggulannya, teks ini bergerak di semua browser utama. Kekurangannya adalah, script ini lebih berat dari cara html membuat teks bergerak. Jadi pilihannya tergantung anda.

Pertama, Cara membuat teks bergerak dengan javascrpt. Contohnya anda bisa lihat di Di Sini

Untuk membuatnya silahkan kopi paste kode di bawah ini:

<script
 language="JavaScript1.2">

//Specify the marquee's width (in pixels)
var marqueewidth="490px"
//Specify the marquee's height
var marqueeheight="25px"
//Specify the marquee's marquee speed (larger is faster 1-10)
var marqueespeed=2
//configure background color:
var marqueebgcolor=""
//Pause marquee onMousever (0=no. 1=yes)?
var pauseit=1

//Specify the marquee's content (don't delete <nobr> tag)
//Keep all content on ONE line, and backslash any single quotations (ie:
 that\'s great):

var marqueecontent='<nobr><font face="Arial, Verdana, 
Sans-serif" color="#fff", text-shadow:"0 1px 0 #aa8600">Sinondang 
Maroban Torang, Torang Mambaen Sonang... Horas Tondi Madingin, Sayur 
Matua Bulung.</nobr>'


////NO NEED TO EDIT BELOW THIS LINE////////////
marqueespeed=(document.all)? marqueespeed : Math.max(1, marqueespeed-1) 
//slow speed down by 1 for NS
var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" 
style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+marqueecontent+'</span>')
var
 actualwidth=''
var cross_marquee, ns_marquee

function populate(){
if (iedom){
cross_marquee=document.getElementById? 
document.getElementById("iemarquee") : document.all.iemarquee
cross_marquee.style.left=parseInt(marqueewidth)+8+"px"
cross_marquee.innerHTML=marqueecontent
actualwidth=document.all? temp.offsetWidth : 
document.getElementById("temp").offsetWidth
}
else if (document.layers){
ns_marquee=document.ns_marquee.document.ns_marquee2
ns_marquee.left=parseInt(marqueewidth)+8
ns_marquee.document.write(marqueecontent)
ns_marquee.document.close()
actualwidth=ns_marquee.document.width
}
lefttime=setInterval("scrollmarquee()",20)
}
window.onload=populate

function scrollmarquee(){
if (iedom){
if (parseInt(cross_marquee.style.left)>(actualwidth*(-1)+8))
cross_marquee.style.left=parseInt(cross_marquee.style.left)-copyspeed+"px"
else
cross_marquee.style.left=parseInt(marqueewidth)+8+"px"

}
else
 if (document.layers){
if (ns_marquee.left>(actualwidth*(-1)+8))
ns_marquee.left-=copyspeed
else
ns_marquee.left=parseInt(marqueewidth)+8
}
}

if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" 
cellpadding="0"><td>')
if (iedom){
write('<div 
style="position:relative;width:'+marqueewidth+';height:'+marqueeheight+';overflow:hidden">')
write('<div
 
style="position:absolute;width:'+marqueewidth+';height:'+marqueeheight+';background-color:'+marqueebgcolor+'"
 onMouseover="copyspeed=pausespeed" 
onMouseout="copyspeed=marqueespeed">')
write('<div id="iemarquee" 
style="position:absolute;left:0px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+marqueewidth+' height='+marqueeheight+' 
name="ns_marquee" bgColor='+marqueebgcolor+'>')
write('<layer name="ns_marquee2" left=0 top=0 
onMouseover="copyspeed=pausespeed" 
onMouseout="copyspeed=marqueespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>

Kedua, Cara membuat teks bergerak dengan html.

Contoh:

<marquee>Selamat di http://wisencare.blogspot.com</marquee>

Hasilnya akan terlihat seperti ini.

Selamat Datang di http://wisencare.blogspot.com

Untuk membuat latar belakang berwarna, kita bisa membuat kode warna HTML.

<marquee bgcolor="#000033">Selamat Datang ke Maribinablog.blogspot.com</marquee>

Hasilnya akan kelihatan seperti ini.

Selamat Datang di http://wisencare.blogspot.com

<marquee bgcolor="#000033">Selamat Datang http://wisencare.blogspot.com</marquee>

Jika anda ingin mengubah arah pergerakan teks, ke kiri, kanan, atas atau bawah, penambahan teks direction dan kode arah pergerakan perlu dibuat.

Kode arah pergerakan:

left= ke kiri
right= ke kanan
up= ke atas
down= ke bawah

<marquee direction="right" bgcolor="#000033">Selamat Datang di http://wisencare.blogspot.com</marquee>

Hasilnya akan kelihatan seperti di bawah ini.

Selamat Datang di http://wisencare.blogspot.com

Untuk menjadikan teks bergerak secara bolak balik, kanan ke kiri perlu penambahan teks behavior.

Kode behavior= alternate

Contoh:

<marquee
 behavior="alternate" direction="right" bgcolor="#000033">Selamat 
Datang di http://wisencare.blogspot.com</marquee>

Hasilnya akan kelihatan seperti ini.

Selamat Datang Ke Maribinablog.blogspot.com

Cara membuat scrolling text yang bisa di hentikan dengan cursor mouse, penambahan teks onmouseover, onmouseout dan scrollamount perlu dibuat. Kode this.stop(), this.start () dan kecepatan pergerakan scrolling text juga perlu di masukkan.

Kode scrollamount = 1- 5 (anda dapat mengubah kecepatan sesuai angka pilihan anda, tetapi semakin tinggi nilainya semakin laju pergerakan teks tersebut.)

<marquee
 behavior="alternate" direction="left" bgcolor="#000033" 
onmouseover="this.stop()" onmouseout="this.start()" 
scrollamount="2">Selamat Datang 
http://wisencare.blogspot.com</marquee>

Hasilnya akan kelihatan seperti ini.

Selamat di http://wisencare.blogspot.com

Anda juga boleh mengubah pergerakan teks secara variasi dalam satu kotak. Penambahan teks height dan size perlu dibuat.

Contoh:

<marquee
 behavior="alternate" direction="up" onmouseover="this.stop()" 
onmouseout="this.start()" scrollamount="2" 
bgcolor="#000033"><marquee direction="right" 
behavior="alternate">Selamat Datang 
http://wisencare.blogspot.com</marquee></marquee><br 
/>

Hasilnya akan kelihatan seperti ini.

Selamat Datang http://wisencare.blogspot.com

Cara membuat scrolling text yang dengan background gambar terdapat perlu kode tambahan lagi. Untuk mengganti background berwarna kepada background bergambar gantikan teks bgcolour kepada background beserta link gambar tersebut. Ukuran background juga perlu di tambah.

Contoh:

<center><table
 style="border-collapse: collapse; width: 338px; height: 75px;" 
background="http://i593.photobucket.com/albums/tt12/Maribinablog/retro_blue_background.jpg"
 border="1" bordercolor="white"><tbody>
<tr><td><span style="color: rgb(255, 0, 0); font-family: 
arial black;"><marquee><img style="width: 30px; height: 
30px;" src="http://www.uptownshelby.biz/blogger_logo.png"> Selamat 
Datang ke Wisencare.blogspot.com Semoga Ada yang manfaat buat anda. 
</marquee></span></td></tr>
</tbody></table></center>;

Hasilnya akan kelihatan seperti ini:

Selamat Datang ke Wisencare.blogspot.com Semoga Ada yang manfaat buat anda.