Cara Buat Banner Berjalan Di Blog


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). Prosedur atau cara buat banner berjalan hampir sama dengan cara buat teks berjalan (marquee)

Ada beberapa tahap yang harus anda lakukan,
Upload gambar dari komputer ke situs layanan image hosting gratis seperti tinypic,photobucket,dll

Contoh 1, jika gambarnya satu, bergerak dari kanan ke kiri.


Codenya dibawah ini:
<marquee behavior="scroll" direction="left" height="200" scrollamount="3" width="800"><img src="http://i1200.photobucket.com/albums/bb337/fitzfreedom/GarudaIndonesia.jpg" />
</marquee>

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




Codenya dibawah ini:
<marquee behavior="scroll" direction="left" height="200" scrollamount="3" width="800"><img src="http://i1200.photobucket.com/albums/bb337/fitzfreedom/GarudaIndonesia.jpg" /> <span style="padding: 2px;"><img src="http://i1200.photobucket.com/albums/bb337/fitzfreedom/FitzFreedom3Poto-1.jpg" /> </span> <span style="padding: 2px;"><img src="http://i1200.photobucket.com/albums/bb337/fitzfreedom/FFCs-1.jpg" /></span></marquee>


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







Codenya dibawah ini:
<marquee behavior="scroll" direction="up" height="200" scrollamount="3" width="400"><img src="http://i1200.photobucket.com/albums/bb337/fitzfreedom/GarudaIndonesia.jpg" /><br><img src="http://i1200.photobucket.com/albums/bb337/fitzfreedom/FitzFreedom3Poto-1.jpg" /><br>
<img src="http://i1200.photobucket.com/albums/bb337/fitzfreedom/FFCs-1.jpg" /></marquee><br>

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://i1200.photobucket.com/albums/bb337/fitzfreedom/FFCs-1.jpg
Maka scriptnya bisa diubah menjadi :

"
Codenya dibawah ini:
<marquee behavior="scroll" direction="left" height="200" scrollamount="3" width="500"><a href="http://fitzfreedomnet.blogspot.com/" target="_blank"><img src="http://i1200.photobucket.com/albums/bb337/fitzfreedom/FFCs-1.jpg" />"</a> </marquee>

Semoga Bermanfaat.

Source: ArtikelKomputer
Share on :
 
© Copyright Collection Blog 2011 - Some rights reserved | Powered by Blogger.com.
Template Design by Herdiansyah Hamzah | Published by Borneo Templates and Theme4all