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
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
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
0 komentar:
Posting Komentar