JeritanBlog telah ditukar nama BelajarBlogs...
Home » , » Cara Membuat Jquery Marquee Banner Dengan Javascript.

Cara Membuat Jquery Marquee Banner Dengan Javascript.

Jika ingin meletakkan banner atau iklan yang menarik untuk diklik mestilah memiliki tampilan yang unik dan menarik. Jika ingin membuat banner yang bergerak , salah satu penyelesaian adalah menggunakan Jquery marquee banner. Javascript yang dikembangkan dinamicdrive.com ini boleh menampilkan iklan, logo mahupun gambar bergerak bergantian, sliding terus menerus sehingga tampilan iklan menjadi menarik untuk diklik pengunjung.

Cara membuat jquery marquee banner, tidak hanya digunakan untuk banner, tetapi bolehuntuk menampilkan album photo yang bergerak secara perlahan. Jquery marquee banner mampu membuat Album photo bergerak satu persatu sehingga photo anda tampil semuanya.




Jika anda tertarik membuat jquery marquee banner hanya perlu mengikuti langkah-langkah berikut:

Langkah 1

Gantikan kode url dengan link yang diperlukan http://URL BLOG disini/ misalnya: http://jeritanblog.blogspot.com. Lalu ganti url photo dengan url yang anda miliki: masukkan URL image disini. Misalnya: <img src="http://i552.photobucket.com/albums/Jeritanblog.jpg">

Inilah kodenya:

<script type="text/javascript" src="https://sites.google.com/site/jquery9/crawler.js">
/*
Text and/or Image Crawler Script ©2009 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/ username: jscheuer1
This Notice Must Remain for Legal Use
*/
</script>

<script type="text/javascript">
marqueeInit({
uniqueid: 'image-marquee',
style: {
'padding': '2px',
'width': '100%',
'height': 'auto'
},
inc: 9, //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: false
});
</script>

<div class="marquee" id="image-marquee">

<a href="http://URL BLOG disini/">
<img src="masukkan URL image disini" />
</a>

<a href="http://URL BLOG disini/">
<img src="masukkan URL image disini" />
</a>

<a href="http://URL BLOG disini/">
<img src="masukkan URL image disini" />
</a>

<a href="http://URL BLOG disini/">
<img src="masukkan URL image disini" />
</a>

<a href="http://URL BLOG disini/">
<img src="masukkan URL image disini" />
</a>

</div>



Langkah 2


Cara Pemasangan.

1. Login ke Blogger, Klik Design :

2. Pada Elemen Halaman, klik Add Gadget di lokasi yang Anda ingin letak;

3. Pilih HTML/Javascript;

4. Copy paste code HTML diatas ke dalam Content yang telah tersedia;


5. Akhir sekali klik save.
Semoga Berjaya :)

1 ulasan:

  1. BOS
    MHN SARANNYA SAYA DAH COBA TAPI HASILNYA FHOTO ITU TDK BERGERAK BAHKAN SEMUA FHOTO TAMPIL BERSAMAAN DAN TDK BERGERAK.

    splfspmi-pusat@blogspot.com

    ditunggu yah bos
    ty

    BalasPadam