Cara Mudah Membuat Banner Berjalan Di Blog (Gambar Berjalan)

Baiklah teman-teman.. Pada tips kali ini saya akan memberikan tips kepada anda bagaimana Cara Mudah Membuat Banner Berjalan Di Blog (Gambar Berjalan). Mungkin ada diantara teman-teman yang ingin membuat banner berjalan di blog atau jika punya gambar kesayangan mungkin bisa buat gambar berjalan di blog, bisa juga jika punya foto maka membuat foto berjalan di blog. Anda bisa menempatkan banner, gambar, atau foto tersebut di dalam postingan atau di disebar (gadget html/javascript). Baiklah langsung saja kita mulai, bisa anada lihat pada tahap-tahap berikut ini:

Ada beberapa tahap yang harus anda lakukan:

1. Upload gambar dari komputer ke situs layanan image hosting gratis seperti tinypic,photobucket,dll (dalam contoh ini kita menggunakan tinpyc)

2. Buat kode banner di blog

Langkah detail untuk membuat :

1. Buka situs tinypic image hosting , login dengan email dan password tinypic anda kemudian upload gambar dari komputer ke tinypic

(Jika belum punya account anda bisa daftar dengan klik tombol Sign up)

Klik Browse, pilih gambar di komputer , klik Upload Now

Anda akan mendapatkan link gambar yang sudah diupload (Gunakan link yang ada di : Direct link for layouts)

Dalam contoh ini kita menggunakan 3 banner dengan link berikut:

http://i49.tinypic.com/2n7pmwx.jpg
http://i46.tinypic.com/214umau.jpg
http://i48.tinypic.com/208vejc.jpg
 atau:
http://i46.tinypic.com/s2zbjr.jpg
http://i47.tinypic.com/2u4sheu.jpg
http://i48.tinypic.com/2502hjc.jpg


2. Login ke dasboard blogger, buat entri baru atau add gadget html/javascript
Masukkan kode berikut:

Contoh 1: Gambar 1 buah, bergerak dari kanan ke kiri,
Anda bisa mengatur tinggi dan lebar gambar , dalam contoh ini:
a. width="200" lebar gambar 490 sesuaikan dengan gambar anda
b. height="360" lebar gambar 360 sesuaikan dengan gambar anda

Kode:

<marquee behavior="scroll" direction="left" height="650" scrollamount="3" width="650"><img src="http://i46.tinypic.com/214umau.jpg" />

</marquee>

hasilnya




Contoh 2, jika gambarnya lebih dari satu, bergerak dari kanan ke kiri

Kode:

<marquee behavior="scroll" direction="left" scrollamount="3" width="490" height="650"><img src="http://i49.tinypic.com/2n7pmwx.jpg"/> <span style="padding: 5px;"> <img src="http://i46.tinypic.com/214umau.jpg"/> </span> <span style="padding: 5px;"> <img src="http://i48.tinypic.com/208vejc.jpg"/></span></marquee>

Hasilnya:
 
 


Contoh 3: jika gambarnya bergerak secara vertikal , untuk mengubah bergerak dari atas ke bawah , ganti direction="up" menjadi direction="down"

Kode:

<marquee behavior="scroll" direction="up" scrollamount="3" width="490" height="360"><img src="http://i49.tinypic.com/2n7pmwx.jpg"/> <br> <img src="http://i46.tinypic.com/214umau.jpg"/><br><img src="http://i48.tinypic.com/208vejc.jpg"/><br>

</marquee>

Hasilnya:






Agar saat gambar banner di klik dapat membuka halaman tertentu maka perlu ditambahkan script ke dalam kode htmlnya bisa dilihat di bawah ini :
Misalkan url gambar yang saya gunakan : http://i51.tinypic.com/2ujgzmh.jpg

Maka scriptnya bisa diubah menjadi :

<marquee behavior="scroll" direction="left" scrollamount="3" width="490" height="360"> <a href="http://rizalblogmaster.blogspot.com" target="_blank"> <img src="http://i51.tinypic.com/2ujgzmh.jpg" /></a></marquee>

Keterangan :
Ganti : http://rizalblogmaster.blogspot.com/ dengan url target yang diinginkan

hasilnya seperti di bawah ini, jika banner di klik akan membuka sebuah halaman baru :



catatan:

height="500" (ganti sesuai ukuran yang anda inginkan)
width="650" (ganti sesuai ukuran yang anda inginkan)


Gimana?? mudah bukan..! yupp. Mungkin sampai disini tips yang bisa saya berikan. Selamat Mencoba, semoga bermanfaat dan have a nice bloggin.:)