Home » » Cara Membuat Marquee With Javascript

Cara Membuat Marquee With Javascript

Written By RACHMAT SR on Senin, 22 Agustus 2011 | 03.50

Marquee With Javascript

OK pada kesempatan kali ini saya mau membicarakan tentang pembuatan fungsi teks berjalan yang sering menggunakan perintah marquee, akan tetapi tentu saja bukan memakai fungsi marquee biasa seperti yang saya terangkan di sini, karena sama-sama kita ketahui bahwa fungsi marquee tidak bekerja dengan baik pada browser Mozilla atau firefox. Artikel ini saya tulis di sebabkan ada beberapa sobat yang komplain akibat perintah marquee tidak berjalan dengan baik pada Mozilla
Untuk membuat sebuah fungsi marquee agar terlihat bekerja dengan baik pada banyak browser, kali ini saya menggunakan javascript sebagai adaptor nya. Prinsip dasar dari yang akan saya terangkan adalah seperti ini :
·  Kode CSS untuk patokan kode marquee yang ingin di tampilkan
·  Javascript sebagai adaptor agar fungsi marquee dapat bekerja dengan baik pada berbagai browser
·  isi yang ingin di tampilkan
Nah kira-kira seperti itu deh kalau menurut saya sih. Bentuk variasi dari marquee ini tentunya bisa berbagai macam bentuk serta ragam yang dapat di ciptakan, akan tetapi kali ini akan saya terangkan satu contoh saja sebagai acuan dasar.
·  Untuk Template klasik
Sign in di blogger
Klik menu Template
Klik menu Edit HTML
Copy seluruh kode HTML yang ada, kemudian paste notepad lalu save sebagai backup
Copy paste kode berikut di atas kode </style>

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

Copy kode berikut, lalu paste di atas kode </head>

<script type="text/javascript">
/***********************************************
* Cross browser Marquee II- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
var delayb4scroll=2000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed=1 //angka 2 adalah nilai kecepatan marquee, ubah jika ingin mengubahnya
var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?
////TIDAK ADA YANG PERLU DI UBAH PADA BAGIAN INI////////////
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("isi-marquee").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>

Copy kode berikut lalu paste pada tempat yang sobat inginkan (biasanya di simpan di sidebar)

<table border="3"><tr><td><table border="1"><tr><td>
<div id="isi-marquee" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">
<div id="vmarquee" style="position: absolute; width: 98%;">

<div align="center">
Apabila sobat mempunyai pertanyaan atau kritik tentang blog ini, tulis aja tulis pada shoutbox, atau jika ingin langgeng tulis di kotak komentar. Atau jika ingin puas langsung kirim via email  <br/><br/>
Jika ada sobat yang sudah pasang link blog ini dan belum saya linkback, tolong di kasih tahu pada shoutbox atau email saja langsung ke saya.
<br/><br/>Terima kasih </div>

</div>
</div>
</td></tr></table></td></tr></table>

Klik tombol Simpan Perubahan template
Selesai.

·  Untuk Template baru
Sign in di blogger
Klik menu Layout
KLik menu Edit HTML
Klik tulisan Download Full Template, silahkan save dulu untuk berjaga-jaga apabila terjadi kesalahan editting
Copy paste kode berikut di antara kode <b:skin><![CDATA[ dan kode ]]></b:skin> , atau jika bingung simpan saja persis di atas kode ]]></b:skin>

#isi-marquee{
position: relative;
width: 200px; /*lebar marquee  */
height: 200px; /*tinggi marquee */
background-color: white; /*warna background */
overflow: hidden;
padding: 2px;
padding-left: 4px;
}
Copy kode berikut lalu paste di atas kode </head>

<script type="text/javascript">
//<![CDATA[
/***********************************************
* Cross browser Marquee II- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
var delayb4scroll=2000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed=1 //angka 2 adalah nilai kecepatan marquee, ubah jika ingin mengubahnya
var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?
////TIDAK ADA YANG PERLU DI UBAH PADA BAGIAN INI////////////
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("isi-marquee").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>

Klik tombol SIMPAN TEMPLATE
Klik menu Elemen Halaman
Klik tulisan Tambah sebuah Elemen Halaman
Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/JavaScript
Copy paste kode berikut pada elemen yang muncul

<table border="3"><tr><td><table border="1"><tr><td>
<div id="isi-marquee" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">
<div id="vmarquee" style="position: absolute; width: 98%;">
<div align="center">
Apabila sobat mempunyai pertanyaan atau kritik tentang blog ini, tulis aja tulis pada shoutbox,
atau jika ingin langgeng tulis di kotak komentar. Atau jika ingin puas langsung kirim via email  <br/><br/>
Jika ada sobat yang sudah pasang link blog ini dan belum saya linkback, tolong di kasih tahu pada shoutbox atau email saja langsung ke saya.
<br/><br/>Terima kasih </div>
</div>
</div>
</td></tr></table></td></tr></table>

Klik tombol SIMPAN PERUBAHAN
Sorot elemen yang baru di buat, klik lalu tahan dan kemudian pindahkan pada tempat yang sobat inginkan (di drag and drop)
Klik tombol SIMPAN
Selesai.

Pada kode marquee yang di terangkan di atas adalah memuat contoh kata-kata yang saya buat, silahkan sobat ganti sendiri sesuai dengan keinginan sobat. Karena fungsi ini adalah mirip dengan kode marquee biasa, maka untuk menciptakan variasi lainnya maka silahkan sobat bandingkan dengan artikel saya lainnya yang memuat pembuatan kode marquee.

Untuk melihat contoh hasil dari yang saya terangkan di atas, silahkan sobat klik di sini !

Selamat mencoba !
Tinggalkan Saran dan komentar Anda
Share this article :

0 komentar:

Poskan Komentar

Thank for your visit, leave your suggestions and comments in the fields below ...

Silahkan meninggalkan komentar anda sehingga kita dapat berbagi pemikiran Anda dengan pengunjung lainnya.



 
Support : Al Islam | Paalem 3 | Mushola
Copyright © 2013. Panduan Blogger - All Rights Reserved
Template Created by Creating Website Modified by CaraGampang.Com
Proudly powered by Blogger