Cara Membuat Marquee Dengan Javascript
Selamat malam semuanya... Di postingan sebelumnya saya telah menjelaskan cara membuat efek marquee. Disana terpampang jelas berbagai tipe dan variasi untuk marquee. Tapi marquee di tips tersebut tidak berjalan baik pada Mozilla Firefox. Misalnya gerakannya tidak mulus alias tersendat-sendat (ugh, manisnya bahasa qyuu... hehehe..). 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:
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>
Klik disini untuk melihat contohnya.
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...
5 komentar:
Thx Gan Smua POstingan nYa Sangat bagus
follow me back
tips nya bagus-bagus, gan.
gw cobain dulu ya!
Work gans :) thaanks
Makasih om ilmu nya, bermanfaat banget buat ane