Dua Cara Membuat Teks Bergerak. ~ Ada Nggak

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:

<br /><script language="JavaScript1.2"><br /><br />//Specify the marquee's width (in pixels)<br />var marqueewidth="490px"<br />//Specify the marquee's height<br />var marqueeheight="25px"<br />//Specify the marquee's marquee speed (larger is faster 1-10)<br />var marqueespeed=2<br />//configure background color:<br />var marqueebgcolor=""<br />//Pause marquee onMousever (0=no. 1=yes)?<br />var pauseit=1<br /><br />//Specify the marquee's content (don't delete <nobr> tag)<br />//Keep all content on ONE line, and backslash any single quotations (ie: that\'s great):<br /><br />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>'<br /><br /><br />////NO NEED TO EDIT BELOW THIS LINE////////////<br />marqueespeed=(document.all)? marqueespeed : Math.max(1, marqueespeed-1) //slow speed down by 1 for NS<br />var copyspeed=marqueespeed<br />var pausespeed=(pauseit==0)? copyspeed: 0<br />var iedom=document.all||document.getElementById<br />if (iedom)<br />document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+marqueecontent+'</span>')<br />var actualwidth=''<br />var cross_marquee, ns_marquee<br /><br />function populate(){<br />if (iedom){<br />cross_marquee=document.getElementById? document.getElementById("iemarquee") : document.all.iemarquee<br />cross_marquee.style.left=parseInt(marqueewidth)+8+"px"<br />cross_marquee.innerHTML=marqueecontent<br />actualwidth=document.all? temp.offsetWidth : document.getElementById("temp").offsetWidth<br />}<br />else if (document.layers){<br />ns_marquee=document.ns_marquee.document.ns_marquee2<br />ns_marquee.left=parseInt(marqueewidth)+8<br />ns_marquee.document.write(marqueecontent)<br />ns_marquee.document.close()<br />actualwidth=ns_marquee.document.width<br />}<br />lefttime=setInterval("scrollmarquee()",20)<br />}<br />window.onload=populate<br /><br />function scrollmarquee(){<br />if (iedom){<br />if (parseInt(cross_marquee.style.left)>(actualwidth*(-1)+8))<br />cross_marquee.style.left=parseInt(cross_marquee.style.left)-copyspeed+"px"<br />else<br />cross_marquee.style.left=parseInt(marqueewidth)+8+"px"<br /><br />}<br />else if (document.layers){<br />if (ns_marquee.left>(actualwidth*(-1)+8))<br />ns_marquee.left-=copyspeed<br />else<br />ns_marquee.left=parseInt(marqueewidth)+8<br />}<br />}<br /><br />if (iedom||document.layers){<br />with (document){<br />document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')<br />if (iedom){<br />write('<div style="position:relative;width:'+marqueewidth+';height:'+marqueeheight+';overflow:hidden">')<br />write('<div style="position:absolute;width:'+marqueewidth+';height:'+marqueeheight+';background-color:'+marqueebgcolor+'" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">')<br />write('<div id="iemarquee" style="position:absolute;left:0px;top:0px"></div>')<br />write('</div></div>')<br />}<br />else if (document.layers){<br />write('<ilayer width='+marqueewidth+' height='+marqueeheight+' name="ns_marquee" bgColor='+marqueebgcolor+'>')<br />write('<layer name="ns_marquee2" left=0 top=0 onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed"></layer>')<br />write('</ilayer>')<br />}<br />document.write('</td></table>')<br />}<br />}<br /></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 /><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><br /><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><br /></tbody></table></center>;

Hasilnya akan kelihatan seperti ini:

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