Marquee dengan Javascript

Save to Delicious (0)

FacebookAdd Facebook Bahtiar.AS, anda bisa sharing tentang blog dll.

Click on more Feeds rss Tips-Trik Blog Pemula

More ?This is about me section. Click on the icons below profile, to check my social profiles.

Click on moreAbout Me

More ?These are the Recommended websites by NItesh Kothari.

Click on moreRecommended

Marquee dengan Javascript

Posted by Tiar Bahtiar at Senin, 06 Juli 2009

Share this post:

Ma.gnolia

DiggIt!

Del.icio.us

Yahoo

Furl

Technorati

Reddit

Buzz It

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

Copy kode berikut, lalu paste di atas kode

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

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 dan kode ]]> , atau jika bingung simpan saja persis di atas kode ]]>

#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

<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

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.

Share

Label: Tutorial Blogger

0 komentar:

:a: :b: :c: :d: :e: :f: :g: :h: :i: :j: :k: :l:

Posting Komentar

Posting Komentar

Semakin banyak anda berkomentar, semakin banyak backlink yang anda dapatkan dan tentu saja Search Engine akan semakin cinta terhadap blog anda.

Langganan: Posting Komentar (Atom)

(Pasang Sekarang) Sponsored links

Buku Tamu