Membuat Marquee Dengan “Javascript”


Selamat malam semuanya…. Nha, di tips kali ini saya akan menjelaskan cara lain untuk membuat marquee dengan menggunakan javascript dan akan berjalan dengan biak pada semua browser. Mau?

Berikut Cara Membuat Marquee Dengan Javascript:

1. Login ke akun Blogger anda

2. Plih Layout > Edit HTML, lalu centang Expand Widget Template

3. Cari kode ]]></b:skin>, lalu paste kode css berikut di atasnya:

#jsmarquee{
position: relative;
width: 300px; /*lebar marquee */
height: 150px; /*tinggi marquee */
background-color: white; /*warna background marquee */
overflow: hidden;
padding: 2px;
padding-left: 4px;
}

4. Cari kode </head>, lalu paste kode berikut diatasnya:

<script type=”text/javascript”>

var delayb4scroll=2000 //Menunjukkan waktu marquee mulai berjalan (2000=2 detik)
var marqueespeed=2 //Angka 2 menunjukkan kecepatan marquee (1-10)
var pauseit=1 //Marquee berhenti jika mouse diarahkan (0=no. 1=yes)?

var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var actualheight=”

function scrollmarquee(){
if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8))
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+”px”
else
cross_marquee.style.top=parseInt(marqueeheight)+8+”px”
}

function initializemarquee(){
cross_marquee=document.getElementById(“vmarquee”)
cross_marquee.style.top=0
marqueeheight=document.getElementById(“jsmarquee”).offsetHeight
actualheight=cross_marquee.offsetHeight
if (window.opera || navigator.userAgent.indexOf(“Netscape/7”)!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
cross_marquee.style.height=marqueeheight+”px”
cross_marquee.style.overflow=”scroll”
return
}
setTimeout(‘lefttime=setInterval(“scrollmarquee()”,30)’, delayb4scroll)
}

if (window.addEventListener)
window.addEventListener(“load”, initializemarquee, false)
else if (window.attachEvent)
window.attachEvent(“onload”, initializemarquee)
else if (document.getElementById)
window.onload=initializemarquee

</script>

5. Klik Save Template.

Selesai untuk proses pemasangan script.
Untuk menampilkannya di postingan atau widget, gunakan kode berikut:

<div id=”jsmarquee” onMouseover=”copyspeed=pausespeed” onMouseout=”copyspeed=marqueespeed”>
<div id=”vmarquee” style=”position: absolute; width: 98%;”>

ISI MARQUEE ANDA DISINI (text, gambar, iklan, widget, dll)

</div>
</div>

Note: Dengan tips ini gerakan marquee yang bisa kita buat hanya satu arah, yaitu dari bawah ke atas, tidak seperti marquee yang telah saya jelaskan disini. JIka anda ingin arahnya berubah, silakan cari kode cross_marquee.style.top, lalu ganti kode top dengan bottom (atas ke bawah), right (kiri ke kanan), left (kanan ke kiri).

Selamat mencoba…

Jangan lupa kasih komentar ya…

 

<a href="http://www.aku-disini-untukmu.co.cc&quot; title="Selalu Ada Untukmu | http://www.aku-disini-untukmu.co.cc” target=”_blank”>Rizky Meyansyah Johan

Iklan