Membuat Halaman Blog Bertaburan Bintang dengan Efek Marquee

Pernahkah Anda mengunjungi blog yang terdapat efek banner animasi yang bertaburan di halaman blog? Jika ya dan ingin mengetahui cara membuat silahkan lanjutkan membaca tutorial yang aku tuliskan kembali dari blognya Kang Rohman.

Sebagai blogger newbie yang lagi senang utak atik blog dengan kode script, maka tips ini sudah aku terapkan di blog Anak Bangsa. Untuk membuat banner animasi bertaburan dihalaman blog dengan memanfaatkan efek Marquee.

Tentang apa itu marquee aku pernah posting sebelumnya, terlebih pada atribut dari perintah marquee ini. Seperti atribut behaviour, atribut direction, atribut scrollamount dan lain sebagainya. Untuk detailnya, silakan BACA DISINI

Lanjut gan...

Agar efek animasi lebih menarik lagi untuk dilihat, maka sebaiknya sobat blogger menggunakan banner animasi dengan ekstention GIF. Yakni animasi-animasi yang bergerak berputar, bounce atau terbang. Sobat dapat menggunakan berbagai software pembuat animasi semisal Ulead cool 3D ataupun program yang lainnya. Jika tidak memiliki skill dalam mengedit animasi, silakan cari animasinya di situs penyedia animasi gratis dengan kata kunci: free animation, animasi gratis, Free banner animation.

Untuk kode HTML marquee yang digunakan sebagai berikut:

<marquee behavior="scroll" direction="down" style="position: absolute; right: 1100px; top: 52px; width: 100px; height: 900px;" scrollamount="14">

LINK GAMBAR ANIMASI

</marquee>

Nah, kode ini kita perbanyak sesuai kebutuhan animasi yang akan ditampilkan. Lalu kita setting atribut yang menyertai Marquee. Atribut dimaksud sebagai berikut:

• Behavior="scroll" : Atribut untuk mengatur perilaku gerakan. Pilihan efek perilaku Scroll yang dipilih agar gambar animasi bergerak berputar/berulang-ulang;
• Direction="down": Atribut untuk mengatur arah gerakan animasi. Pilihan efek down agar arah yang dipilih adalah dari atas ke bawah;
• Position: absolute; pada style yakni posisi yang dipilih adalah absolut atau tersendiri. Dilengkapi pengaturan right: 1100px; yakni 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. Angka-angka ini tentu akan berbeda di tiap kode animasi, terutama pada elemen style: right;
• Scrollamount merupakan atribut untuk mengatur kecepatan gerakan. Nilai 14 adalah kecepatan yang dipilih, silahkan ganti nilainya, semakin kecil nilai maka gerakan semakin lambat, semakin besar nilainya maka gerakannya semakin cepat.

Cara memasang kode Marquee untuk efek Blog Bertaburan Bintang, silahkan ikuti langkah berikut ini:

1. Sign in di blogger;
2. Klik menu Layout >> Elemen Halaman;
3. Klik Tambahkan sebuah Elemen Halaman, lalu pilih HTML/JavaScript;
4. Copy kode berikut lalu paste pada kotak yang tersedia, jangan lupa ganti tulisan "URL-ANIMASI" dengan URL gambar animasi yang Anda miliki;
   
   

     
   <marquee behavior="scroll" direction="down" style="position: absolute; right: 1100px; top: 52px; width: 100px; height: 900px;" scrollamount="14"><br />
   <img src="URL-ANIMASI" 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="URL-ANIMASI" 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="URL-ANIMASI" 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="URL-ANIMASI" width="50" height="50"/><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="URL-ANIMASI" width="60" height="60"/><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="URL-ANIMASI" width="45" height="45"/><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="URL-ANIMASI" width="40" height="40"/><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="URL-ANIMASI" width="65" height="65"/><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="URL-ANIMASI" width="60" height="60" /><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="URL-ANIMASI" width="60" height="60"/><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="URL-ANIMASI" width="55" height="55"/><br /></marquee>  
   



5. Klik tulisan Lihat Blog untuk melihat hasilnya;
6. Selesai

Hasilnya dapat dilihat langaung pada halaman Blog Anak Bangsa. Semoga bermanfaat.

Referensi: Kang Rohman, kolom-tutorial.blogspot.com

---

UPDATE ARTIKEL

Diupdate tanggal 28 Januari 2019.

1. Update pada halaman Demo, yang sebelumnya dapat dilihat langsung di Blog ini, sudah dipindahkan ke Codepen. Silakan klik tombol Demo berikut:



2. Animasi yang digunakan sebelumnya sudah tidak aktif lagi di situs photobucket. Animasi bintangnya sudah diganti dengan animasi yang lebih keren sebagai berikut: