You Are Reading

0

Tips n Trick | Cara Membuat Marquee Dengan Javascript

Gie Morello Sunday, April 17, 2011
Pada postingan kemarin saya 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. Nah, 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 kamu
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>


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 kamu 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).

Semoga bermanfaat, salam Blogger Indonesia...!! :D 


Sumber : Cara Membuat Marquee Dengan Javascript Oleh Zacky Adrishayuni
author

Gie Morello

Hey, what's up peoples! I'm Gie, nice to meet you... ^_^

0 comments:

Post a Comment

If you have any suggestions, please comment. Thanks ;)

previous Next home
 
Copyright 2010 GieShare™
SELAMAT DATANG DI GieShare™ | SHARE BERBAGAI APLIKASI, MUSIK, GAME DAN TIPS N TRICK BLOGGER | Free Software - Free Music - Free Game - Tips n Trick Blogger | UNTUK KENYAMANAN MENDOWNLOAD GUNAKAN INTERNET DOWNLOAD MANAGER (IDM) ATAU DOWNLOAD ACCELERATOR PLUS (DAP) | TERIMA KASIH ATAS KUNJUNGANNYA --->