Tulisan Berjalan Dan Gambar Berjalan Dengan JavaScript

Demo

Kode CSS

.marquee0 a, .marquee0 a:visited{ color:#002C54; padding:0 0 0 13px; margin:0 5px; } .marquee0 a:hover{ color:#ee0000; } .marquee1 img{ width:187px; height:180px; }

Kode CSS diatas hanya untuk warna link.

Kode JavaScript

<script src='http://pagenano.googlecode.com/files/marquee.js' type='text/javascript'/>

Kode HTML Dan JavaScript

<div class='marquee' id='mycrawler' style='width:965px;margin:0 auto;padding:2px 7px;'> <b:section class='tulisan' id='tulisan' showaddelement='no'> <b:widget id='HTML2' locked='true' title='' type='HTML'/> </b:section> </div> <script type='text/javascript'> marqueeInit({ uniqueid: 'mycrawler', style: { 'font-size': '11px', 'font-weight': 'bold', 'font-family': 'arial', 'margin': '0 auto', }, inc: 5, //speed - pixel increment for each iteration of this marquee's movement mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false) moveatleast: 4, neutral: 150, savedirection: true }); </script> <div class='marquee' id='mycrawler2' style='background:#eee;width:965px;margin:0 auto 5px;padding:0 7px 5px;'> <b:section class='gambar' id='gambar' showaddelement='no'> <b:widget id='HTML3' locked='true' title='' type='HTML'/> </b:section> </div> <script type='text/javascript'> marqueeInit({ uniqueid: 'mycrawler2', inc: 5, //speed - pixel increment for each iteration of this marquee's movement mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false) moveatleast: 2, neutral: 150, savedirection: true }); </script>

Kalau sudah disesuaikan dan di Save Template, lalu masuk tab Page Elements disamping tab Edit HTML. Disitu ada 2 box atau widget dengan tulisan HTML/JavaScript, box atas untuk tulisan dan box bawah untuk gambar.

Box Tulisan

Latest Submissions: <a href='/' target='_blank' title='home'>Home Page</a><a href='/' target='_blank' title='home'>About Page</a>

Diatas hanya sekedar contoh untuk tes, selanjutnya terserah anda, bisa dimasukan kata-kata selamat datang atau yang lain...

Box Gambar

<img src="http://i44.tinypic.com/2419ul3.jpg" /> <img src="http://i43.tinypic.com/296nh3r.jpg" /> <img src="http://i40.tinypic.com/mk7ki.jpg" />

Diatas juga contoh, kalau ingin narsis silahkan dimasukan foto anda atau bisa juga gambar posting.

Semoga Berkesan...

Alhamdulillah