Aneka Ragam Bentuk Jenis Teks Berjalan (Marquee)

Sebelumnya sudah saya posting Cara Membuat Teks Berjalan Di Blog (marquee) atau sobat bisa langsung menjumpai postingan nya DISINI.melanjutkan postingan kemarin sobat bisa melihat Aneka Ragam Bentuk Jenis Teks Berjalan (Marquee) yang lain nya.


tulisan ini berjalan ke bawah

Kodenya di bawah ini

<marquee align="center" direction="down">tulisan ini berjalan ke bawah</marquee>

tulisan ini berjalan ke atas

Kodenya di bawah ini

<marquee align="center" direction="up">tulisan ini berjalan ke atas</marquee>

tulisan ini ber-link

Kodenya di bawah ini

<marquee>
<a href="http://jeniusngeblog.blogspot.com/" target="_blank">tulisan ini ber-link</a>
</marquee>

Teks dengan warna background

Kodenya di bawah ini

<marquee behavior="scrollamount="6" bgcolor="Darkgreen" width="200px">Teks dengan warna background</marquee>

Teks berlink dengan warna background hitam

Kodenya di bawah ini

<marquee behavior="scrollamount="6" bgcolor="Black" width="200px"><a href="http://jeniusngeblog.blogspot.com/" target="_blank">Teks berlink dengan warna background hitam</a></marquee>

Teks warna dengan border tanpa background

Kodenya di bawah ini

<marquee behavior="scrollamount="6" style="border:4px solid #eee;font-size:14px;color:#008000">Teks warna dengan border tanpa background</marquee>

Tulisan akan stop bila dibayangi cursor

Kodenya di bawah ini

<marquee onMouseOver=this.stop() onMouseOut=this.start()>Tulisan akan stop bila dibayangi cursor</marquee>

Tulisan memantul kiri kanan

Kodenya di bawah ini

<marquee width="200" behavior="alternate">Tulisan memantul kiri kanan</marquee>

Zig-zag

Kodenya di bawah ini

<marquee behavior="alternate" direction="up" height="50px"><br /><marquee direction="right">Zig-zag</marquee><br /></marquee>

Bouncing (memantul)

Kodenya di bawah ini

<marquee behavior="alternate" direction="up" width="300" height="100"><br /><marquee direction="right" behavior="alternate">Bouncing (memantul)</marquee><br /></marquee>

Bouncing tembus

Kodenya di bawah ini

<center><marquee direction="up" scrollamount="5" align="center" behavior="alternate" width="90%"><marquee direction="right"> Bouncing (memantul) tembus</marquee></marquee></center>

Kodenya di bawah ini

<script language="JavaScript">
var text="ketikan teks atau tulisan disini";
var delay=20;
var currentChar=1;
var destination="[none]";
function type()
{
//if (document.all)
{
var dest=document.getElementById(destination);
if (dest)// && dest.innerHTML)
{
dest.innerHTML=text.substr(0, currentChar)+"<blink>_</blink>";
currentChar++;
if (currentChar>text.length)
{
currentChar=1;
setTimeout("type()", 5000);
}
else
{
setTimeout("type()", delay);
}
}
}
}
function startTyping(textParam, delayParam, destinationParam)
{
text=textParam;
delay=delayParam;
currentChar=1;
destination=destinationParam;
type();
}
</script> <b><div 0px="" 12px="" arial="" color:="" ff0000="" font:="" id="textDestination" margin:="" style="background-color: none;">
</div>
</b> <script language="JavaScript">
javascript:startTyping(text, 50, "textDestination");
</script>

Gambar akan berhenti bila di bayangi cursor

Kodenya di bawah ini

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="3" direction="up" width="100%" height="200" align="center"><img src="ganti url alamat gambar disini" height="110" width="90" />
<img src="ganti url alamat gambar disini" height="110" width="90" />
<img src="ganti url alamat gambar disini" height="110" width="90" />
<img src="ganti url alamat gambar disini" height="110" width="90" /></marquee>

Gambar dengan border akan berhenti bila di bayangi cursor

Kodenya di bawah ini

<table border="10" cellpadding="2" height="130" width="110" bgcolor="#FF00FF" />
<tr> <td>
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="3" direction="down" width="110" height="130" align="center">
<img src="ganti url alamat gambar disini" height="110" width="90" />
<img src="ganti url alamat gambar disini" height="110" width="90" />
<img src="ganti url alamat gambar disini" height="110" width="90" />
</marquee>
</td> </tr>
</table>

Gambar dengan border tanpa background akan berhenti bila di bayangi cursor

Kodenya di bawah ini

<table border="10" cellpadding="3" height="130" width="110"/>
<tr> <td>
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="110" height="130" align="center">
<img src="ganti url alamat gambar disini" height="110" width="90" />
<img src="ganti url alamat gambar disini" height="110" width="90" />
</marquee>
</td> </tr>
</table>

Gambar di atas mempunyai link,silahkan klik salah satu gambar di atas sebagai contoh

Kodenya di bawah ini

<marquee direction="up" width="100%" scrollamount="3" height="210" align="center">
<a href="link atau alamat url yang dituju" target="new"><img border="0" style="width: 180px; height: 25px;" alt="nama gambar" src="link alamat url gambar" alt="nama gambar" border="3" /></a>
<a href="link atau alamat url yang dituju" target="new"><img border="3" style="width: 180px; height: 25px;" src="link alamat url gambar" alt="nama gambar" border="3" /></a>
<a href="link atau alamat url yang dituju" target="new"><img border="3" style="width: 180px; height: 25px;" src="link alamat url gambar" alt="nama gambar" border="3" /></a>
<a href="link atau alamat url yang dituju" target="new"><img border="3" style="width: 180px; height: 25px;" src="link alamat url gambar" alt="nama gambar" border="3" /></a>
<a href="link atau alamat url yang dituju" target="new"><img border="3" style="width: 180px; height: 25px;" src="link alamat url gambar" alt="nama gambar" border="3" /></a>
<a href="link atau alamat url yang dituju" target="new"><img border="3" style="width: 180px; height: 25px;" src="link alamat url gambar" alt="nama gambar" border="3" /></a>
<a href="link atau alamat url yang dituju" target="new"><img border="3" style="width: 180px; height: 25px;" src="link alamat url gambar" alt="nama gambar" border="3" /></a>
</marquee>

Mau tulisan berjalan dengan gambar

Kodenya di bawah ini

<marquee direction="right" scrollamount="7" scrolldelay="7"><img border="0" height="100" src="http://th217.photobucket.com/albums/cc54/ivandra79/Naruto/th_SASUKE_GIF.gif" />Mau tulisan berjalan dengan gambar<img alt=" border="0" height="100" src="http://onepieceindo.files.wordpress.com/2009/10/1_19.gif?w=150&amp;h=150" title=" width="100" /></marquee>

tulisan ini berjalan dan beranimasi

Kodenya di bawah ini

<marquee><img border="0" height="100" src="http://onepieceindo.files.wordpress.com/2009/10/1_19.gif?w=150&amp;h=150" width="100" /></img>tulisan ini berjalan dan beranimasi<img border="0" height="100" src="http://onepieceindo.files.wordpress.com/2009/10/1_19.gif?w=150&amp;h=150" width="100" /></img></marquee>

Dengan gambar

Kodenya di bawah ini

<marquee behavior="scroll"><br />
<img src="http://tioa7x.pun.bz/files/th-gif.gif" height="80" width="80" /><br />
Dengan gambar<br />
</marquee>

Selamat mencoba,dan semoga berhasil.