Marquee with Javascript

# Untuk Template baru

1. Sign in di blogger

2. Klik menu Layout

3. KLik menu Edit HTML

4. Klik tulisan Download Full Template, silahkan save dulu untuk berjaga-jaga apabila terjadi kesalahan editting

5. 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; }

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

7. Klik tombol SIMPAN TEMPLATE

8. Klik menu Elemen Halaman

9. Klik tulisan Tambah sebuah Elemen Halaman

10. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/JavaScript

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

12. Klik tombol SIMPAN PERUBAHAN

13. Sorot elemen yang baru di buat, klik lalu tahan dan kemudian pindahkan pada tempat yang sobat inginkan (di drag and drop)

14. Klik tombol SIMPAN

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

Related Posts by Categories

Widget by Scrapur