TopBottom

Blog Tutorial

About Me

Add your donation here for a better of our service. Thanks!

Berlangganan

Anda Suka Tips Blogger Zacky?
Temukan Kami Di:
Ingin Dapat Artikel Terbaru?
rss Klik disini untuk berlangganan melalui RSS atau terima artikel di email anda dengan cara mengisi form berikut:

Cara Membuat Marquee Dengan Javascript

Original by IFX Adrian | 21 Desember 2009 5 Comments

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:
<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 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...

Label: ,

Bagikan Artikel Ini!

<a href="http://instaforex.com/forexcopy_system.php?x=DVXF">InstaForex</a>
Facebook Delicious Digg! Twitter Linkedin StumbleUpon Lintas Berita
Technorati Google Bookmarks Mixx Yahoo! Newsvine Reddit

Artikel Lain Yang Mungkin Anda Baca

5 komentar:

tsalman 21 April 2010 pukul 18.31  
Komentar ini telah dihapus oleh pengarang.
fadil kodze 25 Desember 2010 pukul 23.50  

Thx Gan Smua POstingan nYa Sangat bagus

follow me back

John 14 Juli 2011 pukul 21.48  

tips nya bagus-bagus, gan.
gw cobain dulu ya!

Artis H0T 3 April 2016 pukul 00.48  

Makasih om ilmu nya, bermanfaat banget buat ane

Posting Komentar