Membuat Banner Animasi dengan Mudah di Blog

Kita semua tentunya mempunyai gambar kesayangan masing-masing, untuk itu bagi yang ingin menghiasi Blog dengan gambar kesayangannya bisa dengan menggunakan Banner Animasi 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,
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://i51.tinypic.com/2cdk1ap.jpg"
"http://i55.tinypic.com/2re442g.jpg"
"http://i56.tinypic.com/x255qf.jpg"    
(sebaiknya gambar diatur dulu ukuran dan besarnya yg sama, agar tampilannya lebih bagus)

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

<marquee behavior="scroll" direction="left" scrollamount="3" width="290" height="255">

        <img src="http://i51.tinypic.com/2cdk1ap.jpg"/>  <span style="padding: 5px;">

       <img src="http://i55.tinypic.com/2re442g.jpg"/> </span> <span style="padding: 5px;">

        <img src="http://i56.tinypic.com/x255qf.jpg"/> </span> 

</marquee>

Jika gambarnya bergerak secara vertikal , untuk mengubah bergerak dari atas ke bawah , ganti direction="up" menjadi direction="down"

<marquee behavior="scroll" direction="up" scrollamount="3" width="490" height="360"><img            

       <img src="http://i51.tinypic.com/2cdk1ap.jpg"/>  <span style="padding: 5px;">

       <img src="http://i55.tinypic.com/2re442g.jpg"/> </span> <span style="padding: 5px;">

        <img src="http://i56.tinypic.com/x255qf.jpg"/> </span> 

</marquee>

Silahkan dicoba...masukkan kode di atas ke dalam teks editor blogger atau ke gadget html, sesuaikan lebar dan tinggi sesuai dengan gambar/banner anda.Agar saat gambar banner di klik dapat membuka halaman tertentu maka perlu ditambahkan script ke dalam kode htmlnya bisa dilihat di bawah ini :

Maka scriptnya bisa diubah menjadi :
 

<marquee behavior="scroll" direction="left" scrollamount="3" width="290" height="255">

          <a href="http://www.inter.it/" target="_blank">

          <img src="http://i51.tinypic.com/2cdk1ap.jpg"/>  <span style="padding: 5px;">

          <img src="http://i55.tinypic.com/2re442g.jpg"/> </span> <span style="padding: 5px;">

          <img src="http://i56.tinypic.com/x255qf.jpg"/> </span> 

          </a>

</marquee>

Keterangan :
Ganti : http://www.inter.it/ dengan url target yang diinginkan

Contoh Banner :  dapat dilihat di bagian bawah Blog ini

Saya hanya seorang Blogger Pemula, yang selalu ingin sharing dan berbagi dengan yang lainnya...

Download FileDokumenInya  DISINI

SUMBER