Marquee dengan Javascript

Membuat teks/gambar bergerak pada blog kita membutuhkan pemahaman tentang kode CSS yang sedikit rumit, tapi saya coba untuk membantu anda yang ingin membuat marquee, prinsip dasarnya adlaha kode CSS dengan javascript sebagai adaptornya agar semua browser dapat membacanya. berikut langkah yang harus di lakukan ... juz do it (baca: duit2mu sendiri ..)
pertama-tama saya bedakan antara TEMPLATE KLASIK dengan TEMPLATE BARU

Untuk TEMPLATE KLASIK :

1. Sign in dulu ke Blog anda
2. Klik Layout (tata letak) ===> Edit HTML (agar aman save dulu kode HTML template anda ke notepad , jgn lupa centang expand template wigate ya sebelum mengcopy)
3. Copy kode berikut di atas kode </style>
   
   
   #isi-marquee{<br />position: relative;<br />width: 200px; /*lebar marquee */<br />height: 200px; /*tinggi marquee */<br />background-color: white; /*warna background */<br />overflow: hidden;<br />padding: 2px;<br />padding-left: 4px;<br />}

4. Copy kode berikut, lalu paste di atas kode </head>
   
   
   <script type="text/javascript"><br /><br />/***********************************************<br />* Cross browser Marquee II- © Dynamic Drive (www.dynamicdrive.com)<br />* This notice MUST stay intact for legal use<br />* Visit http://www.dynamicdrive.com/ for this script and 100s more.<br />***********************************************/<br /><br />var delayb4scroll=2000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)<br />var marqueespeed=1 //angka 2 adalah nilai kecepatan marquee, ubah jika ingin mengubahnya<br />var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?<br /><br />////TIDAK ADA YANG PERLU DI UBAH PADA BAGIAN INI////////////<br /><br />var copyspeed=marqueespeed<br />var pausespeed=(pauseit==0)? copyspeed: 0<br />var actualheight=''<br /><br />function scrollmarquee(){<br />if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8))<br />cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"<br />else<br />cross_marquee.style.top=parseInt(marqueeheight)+8+"px"<br />}<br /><br />function initializemarquee(){<br />cross_marquee=document.getElementById("vmarquee")<br />cross_marquee.style.top=0<br />marqueeheight=document.getElementById("isi-marquee").offsetHeight<br />actualheight=cross_marquee.offsetHeight<br />if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit<br />cross_marquee.style.height=marqueeheight+"px"<br />cross_marquee.style.overflow="scroll"<br />return<br />}<br />setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)<br />}<br /><br />if (window.addEventListener)<br />window.addEventListener("load", initializemarquee, false)<br />else if (window.attachEvent)<br />window.attachEvent("onload", initializemarquee)<br />else if (document.getElementById)<br />window.onload=initializemarquee<br /></script><br />

5. Jika anda ingin menampilkan teks "selamat datang........"(saya ambil contoh) letakkan kode berikut sidebar atau di manapun anda inginkan (page element)
   
   
   <table border="3"><tr><td><table border="1"><tr><td><br /><div id="isi-marquee" onmouseover="copyspeed=pausespeed" onmouseout="copyspeed=marqueespeed"><br /><div id="vmarquee" style="position: absolute; width: 98%;"><br /><div align="center"><br />Selamat datang di kosidh's blog <br/><br/><br />Mari belajar blog bersama-sama , berbagi info adalah suatu hal yang sangat indah <br /><br/><br/>Terima kasih </div><br /></div><br /></div><br /></td></tr></table></td></tr></table><br />

6. Klik Simpan Template
7. Finish dan lihat hasilnya
   
   Untuk TEMPLATE BARU
   
   
   1. Sign in di blogger
   2. Klik Layout
   3. KLik HTML
   4. Centang kotak kecil pada expand advanced wigate ( copy paste ke notepad untuk jaga2 kalo editing anda gagal)
   5. Copy paste kode berikut di antara kode <b:skin><![CDATA[ dan kode ]]></b:skin> , atau letakkan saja persis di atas kode ]]></b:skin>
      
      
      #isi-marquee{<br />position: relative;<br />width: 200px; /*lebar marquee */<br />height: 200px; /*tinggi marquee */<br />background-color: white; /*warna background */<br />overflow: hidden;<br />padding: 2px;<br />padding-left: 4px;<br />}<br />

      
      
   6. Copy kode berikut lalu paste di atas kode </head>
      
      
      
      

      <script type="text/javascript"><br />//<![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))<br />cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"<br />else<br />cross_marquee.style.top=parseInt(marqueeheight)+8+"px"<br />}<br /><br />function initializemarquee(){<br />cross_marquee=document.getElementById("vmarquee")<br />cross_marquee.style.top=0<br />marqueeheight=document.getElementById("isi-marquee").offsetHeight<br />actualheight=cross_marquee.offsetHeight<br />if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit<br />cross_marquee.style.height=marqueeheight+"px"<br />cross_marquee.style.overflow="scroll"<br />return<br />}<br />setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)<br />}<br /><br />if (window.addEventListener)<br />window.addEventListener("load", initializemarquee, false)<br />else if (window.attachEvent)<br />window.attachEvent("onload", initializemarquee)<br />else if (document.getElementById)<br />window.onload=initializemarquee<br />//]]><br /></script><br />

   7. Klik Simpan Template
   8. klik Page Elemen
   9. klik Tambah widget ==> Add HTML/Javascript
   10. Ketikan dengan kode berikut :
       
       
       <table border="3"><tr><td><table border="1"><tr><td><br /><div id="isi-marquee" onmouseover="copyspeed=pausespeed" onmouseout="copyspeed=marqueespeed"><br /><div id="vmarquee" style="position: absolute; width: 98%;"><br /><div align="center"><br />Selamat datang di kosidh's blog <br/><br/><br />Mari belajar blog bersama-sama , berbagi info adalah suatu hal yang sangat indah <br /><br/><br/>Terima kasih </div><br /></div><br /></div><br /></td></tr></table></td></tr></table><br />

       
       
   11. klik Simpan pengaturan
   12. selesai dan lihat hasilnya , semoga berhasil bro!!