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>
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
0 comments:
Post a Comment
If you have any suggestions, please comment. Thanks ;)