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 :
hasilnya seperti ini :
Atau sobat bisa memperbesar atau memperkecil animasi ini dengan mengatur tinggi serta lebar gambar, contoh di perbesar :
hasilnya akan seperti ini :
contoh di perkecil :
hasilnya akan seperti ini :
Langkah selanjutnya adalah membuat variasi perintah marquee, saya
berikan contoh perintahnya seperti ini :
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 :
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 :
- Sign in di blogger
- Klik menu Template
- Klim menu Edit HTML
- Copy seluruh kode HTML yang ada lalu paste pada notepad kemudian
save, ini sebagai backup data apabila kita melakukan kesalahan dalam
proses edtitting template
- Simpan kode berikut antara kode ........ :
- Klik tombol Pratinjau untuk melihat perubahan
- Jika sudah OK, klik tombol Simpan Perubahan Template
- Selesai.
Untuk template baru :
- Sig in di blogger dengan id sobat
- Klik menu layout
- Klik menu Elemen Halaman
- Klik tulisan Tambahkan sebuah Elemen Halaman
- Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/JavaScript
- Copy kode di bawah lalu paste pada kotak yg tersedia, jangan lupa ganti alamat gambarnya dengan yang sobat miliki
- Klik tulisan Lihat Blog untuk melihat hasilnya
- 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 !
0 komentar:
Posting Komentar
Jangan lupa kasih komennya : }