Anda di halaman 1dari 4

Membuat Banner Bertaburan

Pernah melihat blog yang terdapat banner bertaburan di halamannya? ingin mengetahui cara
membuatnya? jika tertarik silahkan baca artikel di bawah ini sampai selesai !. Untuk
membuat banner bertaburan, yang akan saya gunakan adalah memakai perintah marquee.
Tentang marquee sudah saya bahas pada postingan terdahulu dan kali ini akan saya bahas
variasi lain dari perintah marquee ini. Agar banner yang di gunakan lebih menarik untuk di
lihat, maka sebaiknya kita menggunakan banner yang berisifat animasi. Animasi ini bisa
berupa putaran, terbalik atau mungkin dalam bentuk terbang. Untuk membuat animasi, sobat
bisa menggunakan berbagai software pembuat animasi semisal Ulead cool 3D ataupun
program yang lainnya. Sedikit kabar gembira, bagi sobat yang belum mempunyai software
Ulead cool 3D sobat bisa mendowload secara gratis di blog miliknya bang iwan yaitu di
http://free7.blogspot.com. Bagi sobat yang sudah terbiasa dengan program-program animasi,
tentu tidak akan menemui masalah dalam hal membuat banner animasi, akan tetapi bagi sobat
yang sama seperti saya ini yakni masih banyak bingungnya kalau membuat animasi maka ada
jalan lain yakni kita bisa mencari situs-situs penyedia animasi. Bagaimana cara mencarinya?
ini hal yang mudah, pada akhir artikel ini saya sediakan search engine dari google. Tugas
sobat hanya mengisi kotak isian dengan keyword yang di inginkan, misal : free animation,
animasi gratis, Free banner animation atau keyword lain yang sekiranya bisa
memunculkan berbagai situs penyedia animasi gratis, kemudian setelah kotak isian di tulis
silahkan klik tombol search maka nanti akan keluar ratusan atau bahkan ribuan situs
penyedia animasi, silahkan sobat cari sendiri mana yang cocok. OK kita kembali ke.....topik
bahasan tentunya. Sebagai contoh saya telah mendapatkan sebuah file banner animasi, tugas
selanjutnya adalah mengupload file tersebut ke hosting penyimpan gambar. Ambil contoh,
saya telah mengupload banner animasi di google pages dan mempunyai alamat seperti ini :
http://amen24.googlepages.com/face5.gif Untuk membuat gambar ini bisa tampil kodenya
seperti ini : <img src="http://amen24.googlepages.com/face5.gif"> hasilnya seperti ini :

Atau sobat bisa memperbesar atau memperkecil animasi ini dengan mengatur tinggi
serta lebar gambar, contoh di perbesar : <img src="http://amen24.googlepages.com/face5.gif"

width="100" height="100"> hasilnya akan seperti ini : contoh di perkecil :


<img src="http://amen24.googlepages.com/face5.gif" width="30" height="30"> hasilnya

akan seperti ini : Langkah selanjutnya adalah membuat variasi perintah marquee, saya
berikan contoh perintahnya seperti ini : <marquee behavior="scroll" direction="down"
style="position: absolute; right: 1100px; top: 52px; width: 100px; height: 900px;"
scrollamount="14"> <img src="http://amen24.googlepages.com/face5.gif"> </marquee>
Agar lebih faham, saya bahas sedikit tentang fungsi-fungsi dari atribut yang saya berikan :
behavior="scroll" --> behavior atribut untuk mengatur perilaku gerakan. scroll perilaku yang
di pilih yaitu teks atau image bergerak berputar/berulang-ulang. direction="down" -->
direction atribut untuk mengatur arah gerakan teks/image. down arah yang di pilih adalah ke
bawah, sobat bisa merubah arah ini sesuai keinginan, tinggal ganti dengan Up untuk keatas,
Left untuk ke pinggir dan right untuk ke kanan. style="position: absolute; right: 1100px; top:
52px; width: 100px; height: 900px;" --> position: absolute; posisi yang di pilih adalah
absolut atau tersendiri. right: 1100px; posisi terletak sebesar 1100 pixel diukur dari sebelah
kanan layar. top: 52px; posisi juga terletak pada 52 pixel di ukur dari sebelah atas layar.
width: 100px; lebar untuk tempat gambar sebesar 100 pixel. height: 900px; tinggi untuk
tempat gambar sebesar 900 pixel. scrollamount="14" --> scrollamount atribut untuk
mengatur kecepatan gerakan. 14 adalah kecepatan yang dipilih, silahkan ganti nilainya,
semakin kecil nilai maka gerakan semakin lambat, semakin besar nilainya maka gerakannya
semakin cepat. Contoh di atas merupakan hanya untuk satu gambar animasi saja, biar lebih
menarik dan supaya gambarnya banyak bertebaran maka perintah yang di buat harus
beberapa perintah, akan tetapi posisinya harus di bedakan agar terlihat bertebaran. Dan ada
yang harus di ingat yaitu kita harus membuat posisi yang kira-kira tidak mengganggu
pembaca yakni tidak menutupi artikel yang kita posting. Contoh perintahnya seperti ini :
<marquee behavior="scroll" direction="down" style="position: absolute; right: 1100px; top:
52px; width: 100px; height: 900px;" scrollamount="14"> <img
src="http://amen24.googlepages.com/face5.gif" width="100" height="100"/> </marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 358px; top:
2px; width: 60px; height: 450px;" scrollamount="5"> <img
src="http://amen24.googlepages.com/face5.gif" width="30" height="30" /> </marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; right: 441px; top:
55px; width: 60px; height: 250px;" scrollamount="9"> <img
src="http://amen24.googlepages.com/face5.gif" width="30" height="30" /> </marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; right: 498px; top:
53px; width: 60px; height: 380px;" scrollamount="6"> <img
src="http://amen24.googlepages.com/face5.gif" /> </marquee> <marquee behavior="scroll"
direction="down" style="position: absolute; right: 800px; top: 51px; width: 60px; height:
350px;" scrollamount="7"> <img src="http://amen24.googlepages.com/face5.gif" />
</marquee> <marquee behavior="scroll" direction="down" style="position: absolute; right:
390px; top: 55px; width: 60px; height: 450px;" scrollamount="5"> <img
src="http://amen24.googlepages.com/face5.gif" /> </marquee> <marquee behavior="scroll"
direction="down" style="position: absolute; right: 749px; top: 54px; width: 60px; height:
250px;" scrollamount="5"> <img src="http://amen24.googlepages.com/face5.gif" />
</marquee> <marquee behavior="scroll" direction="down" style="position: absolute; right:
325px; top: 52px; width: 60px; height: 300px;" scrollamount="10"> <img
src="http://amen24.googlepages.com/face5.gif" /> </marquee> <marquee behavior="scroll"
direction="down" style="position: absolute; right: 600px; top: 49px; width: 60px; height:
350px;" scrollamount="8"> <img src="http://amen24.googlepages.com/face5.gif" />
</marquee> <marquee behavior="scroll" direction="down" style="position: absolute; right:
873px; top: 52px; width: 60px; height: 400px;" scrollamount="3"> <img
src="http://amen24.googlepages.com/face5.gif" /> </marquee> <marquee behavior="scroll"
direction="down" style="position: absolute; right: 50px; top: 55px; width: 60px; height:
700px;" scrollamount="12"> <img src="http://amen24.googlepages.com/face5.gif" />
</marquee> Contoh gambar animasi diatas adalah memakai gambar milik saya, silahkan
sobat ganti dengan gambar yang sobat sukai. Cara memasang kode-kode diatas, silahkan ikuti
langkah berikut ini : Untuk template klasik :

1. Sign in di blogger
2. Klik menu Template
3. Klim menu Edit HTML
4. Copy seluruh kode HTML yang ada lalu paste pada notepad kemudian save, ini
sebagai backup data apabila kita melakukan kesalahan dalam proses edtitting template
5. Simpan kode berikut antara kode <body> ........ </body> :

<br /><br /><marquee behavior="scroll" direction="down" style="position: absolute;


right: 1100px; top: 52px; width: 100px; height: 900px;" scrollamount="14"><br
/><img src="http://amen24.googlepages.com/face5.gif" width="100"
height="100"/><br /></marquee><br /><br /><marquee behavior="scroll"
direction="down" style="position: absolute; left: 358px; top: 2px; width: 60px;
height: 450px;" scrollamount="5"><br /><img
src="http://amen24.googlepages.com/face5.gif" width="30" height="30" /><br
/></marquee><br /><br /><marquee behavior="scroll" direction="down"
style="position: absolute; right: 441px; top: 55px; width: 60px; height: 250px;"
scrollamount="9"><br /><img src="http://amen24.googlepages.com/face5.gif"
width="30" height="30" /><br /></marquee><br /><br /><marquee behavior="scroll"
direction="down" style="position: absolute; right: 498px; top: 53px; width: 60px;
height: 380px;" scrollamount="6"><br /><img
src="http://amen24.googlepages.com/face5.gif" /><br /></marquee><br /><br
/><marquee behavior="scroll" direction="down" style="position: absolute; right:
800px; top: 51px; width: 60px; height: 350px;" scrollamount="7"><br /><img
src="http://amen24.googlepages.com/face5.gif" /><br /></marquee><br /><br
/><marquee behavior="scroll" direction="down" style="position: absolute; right:
390px; top: 55px; width: 60px; height: 450px;" scrollamount="5"><br /><img
src="http://amen24.googlepages.com/face5.gif" /><br /></marquee><br /><br
/><marquee behavior="scroll" direction="down" style="position: absolute; right:
749px; top: 54px; width: 60px; height: 250px;" scrollamount="5"><br /><img
src="http://amen24.googlepages.com/face5.gif" /><br /></marquee><br /><br
/><marquee behavior="scroll" direction="down" style="position: absolute; right:
325px; top: 52px; width: 60px; height: 300px;" scrollamount="10"><br /><img
src="http://amen24.googlepages.com/face5.gif" /><br /></marquee><br /><br
/><marquee behavior="scroll" direction="down" style="position: absolute; right:
600px; top: 49px; width: 60px; height: 350px;" scrollamount="8"><br /><img
src="http://amen24.googlepages.com/face5.gif" /><br /></marquee><br /><br
/><marquee behavior="scroll" direction="down" style="position: absolute; right:
873px; top: 52px; width: 60px; height: 400px;" scrollamount="3"><br /><img
src="http://amen24.googlepages.com/face5.gif" /><br /></marquee><br /><br
/><marquee behavior="scroll" direction="down" style="position: absolute; right:
50px; top: 55px; width: 60px; height: 700px;" scrollamount="12"><br /><img
src="http://amen24.googlepages.com/face5.gif" /><br /></marquee><br />

6. Klik tombol Pratinjau untuk melihat perubahan


7. Jika sudah OK, klik tombol Simpan Perubahan Template
8. Selesai.

Untuk template baru :

1. Sig in di blogger dengan id sobat


2. Klik menu layout
3. Klik menu Elemen Halaman
4. Klik tulisan Tambahkan sebuah Elemen Halaman
5. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/JavaScript
6. Copy kode di bawah lalu paste pada kotak yg tersedia, jangan lupa ganti alamat
gambarnya dengan yang sobat miliki

<br /><br /><marquee behavior="scroll" direction="down" style="position: absolute;


right: 1100px; top: 52px; width: 100px; height: 900px;" scrollamount="14"><br
/><img src="http://amen24.googlepages.com/face5.gif" width="100"
height="100"/><br /></marquee><br /><br /><marquee behavior="scroll"
direction="down" style="position: absolute; left: 358px; top: 2px; width: 60px;
height: 450px;" scrollamount="5"><br /><img
src="http://amen24.googlepages.com/face5.gif" width="30" height="30" /><br
/></marquee><br /><br /><marquee behavior="scroll" direction="down"
style="position: absolute; right: 441px; top: 55px; width: 60px; height: 250px;"
scrollamount="9"><br /><img src="http://amen24.googlepages.com/face5.gif"
width="30" height="30" /><br /></marquee><br /><br /><marquee behavior="scroll"
direction="down" style="position: absolute; right: 498px; top: 53px; width: 60px;
height: 380px;" scrollamount="6"><br /><img
src="http://amen24.googlepages.com/face5.gif" /><br /></marquee><br /><br
/><marquee behavior="scroll" direction="down" style="position: absolute; right:
800px; top: 51px; width: 60px; height: 350px;" scrollamount="7"><br /><img
src="http://amen24.googlepages.com/face5.gif" /><br /></marquee><br /><br
/><marquee behavior="scroll" direction="down" style="position: absolute; right:
390px; top: 55px; width: 60px; height: 450px;" scrollamount="5"><br /><img
src="http://amen24.googlepages.com/face5.gif" /><br /></marquee><br /><br
/><marquee behavior="scroll" direction="down" style="position: absolute; right:
749px; top: 54px; width: 60px; height: 250px;" scrollamount="5"><br /><img
src="http://amen24.googlepages.com/face5.gif" /><br /></marquee><br /><br
/><marquee behavior="scroll" direction="down" style="position: absolute; right:
325px; top: 52px; width: 60px; height: 300px;" scrollamount="10"><br /><img
src="http://amen24.googlepages.com/face5.gif" /><br /></marquee><br /><br
/><marquee behavior="scroll" direction="down" style="position: absolute; right:
600px; top: 49px; width: 60px; height: 350px;" scrollamount="8"><br /><img
src="http://amen24.googlepages.com/face5.gif" /><br /></marquee><br /><br
/><marquee behavior="scroll" direction="down" style="position: absolute; right:
873px; top: 52px; width: 60px; height: 400px;" scrollamount="3"><br /><img
src="http://amen24.googlepages.com/face5.gif" /><br /></marquee><br /><br
/><marquee behavior="scroll" direction="down" style="position: absolute; right:
50px; top: 55px; width: 60px; height: 700px;" scrollamount="12"><br /><img
src="http://amen24.googlepages.com/face5.gif" /><br /></marquee><br />

7. Klik tulisan Lihat Blog untuk melihat hasilnya


8. Selesai.

Sebagai contoh saya sudah membuat blog dengan perintah ini, silahkan klik disini untuk
contoh yang arah ke bawah, dan klik di sini untuk contoh yang arah ke atas. Jangan lupa
sobat, untuk mencari situs penyedia animasi, silahkan gunakan search engine di bawah biar
saya dapet komisi dari google ya dan yang pasti sobat tidak usah repot-repot buka browser
baru bukan Selamat mencoba !