Cara Membuat Gambar Berjalan Di Bawah Blog

Artikel blog badaikagaku kali ini akan membahas tentang menghias blog sobat kembali, setelah kemarin sempat posting Memberi animasi Spiderman kali ini saya akan mencoba membahas bagaimana cara membuat gambar berjalan di bawah blog.

Dengan cara ini gambar yang sobat inginkan berjalan di bawah blog tidak akan berpengaruh terhadap scroll mouse, jadi akan tetap di bawah blog sobat sampai pengunjung menutup blog sobat. Untuk menggunakan cara ini sobat hanya perlu menyiapkan URL gambar, entah dari gambar yang sudah tersebar di internet atau sobat mengupload nya sendiri. Dan tentu sedikit otak-atik html template blog sobat.

Untuk demonya silahkan lihat saja gambar di bawah ini:

  

Sebenarnya gambar di atas aslinya diam, hanya saja dengan tambahan sedikit kode script gambar tersebut mempunyai efek berjalan.

Baiklah sob, mari kita masuk ke langkah-langkah cara membuat gambar berjalan di bawah blog. Silahkan di simak aja sob, cekidot;

• Masuk ke akun blogger sobat .
• Klik judul blog sobat atau klik opsi lainya.
• Pilih menu “Template”.
• Klik “Edit Html” à “Lanjutkan”
• Jangan lupa centang √ “Expand Template Widget”.
• Cari Kode ]]></b:skin> (Gunakan ctrl+f untuk mempermudah pencarian).
• Setelah menemukan kode ]]></b:skin>, copy-paste kode script di bawah ini dan letakan tepat diatas kode ]]></b:skin>.

#img_badaikagaku style {position:fixed; bottom:0px; right:0px; clip:inherit; width:100%;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft+document.documentElement.clientWidth - offsetWidth); } 

• Kemudian cari kode </body> (Gunakan ctrl+f).
• Lalu copas kode di bawah ini, tepat  Diatas kode </body>.

<div id='img_badaikagaku style' width='100%'><marquee onmouseover='this.stop()' onmouseout='this.start()' align='center' direction='left' scrollamount='5'><img src='URL GAMBAR'/></marquee></div>

• Selesai, silahkan “Simpan Template” dan lihat hasilnya.

*Keterangan:

1. Direction='left' adalah arah gambar berjalan ke kiri. Jika ingin gambar berjalan ke kanan, ganti left dengan right.
2. Scrollamount adalah tingkat kecepatan gambar berjalan, semakin besar nilai scrollamount maka semakin laju gambar berjalan.
3. URL GAMBAR ganti dengan url gambar sobat sendiri, contoh gambar animasi deidara akatsuki dengan url  http://2.bp.blogspot.com/-5wKa2fJpDt8/UMCGyumjYvI/AAAAAAAABFs/G8DLSeuZOmY/s1600/Deidara+Akatsuki.gif .

Akhirnya selesai juga tutorial saya kali ini, selamat mencoba ya sob dan semoga berhasil. Setelah membaca jangan lupa share ya sob dan jangan lupa komentarnya. Ya sudah sampai jumpa lagi sob, semoga artikel saya ini bermanfaat.

+Sumber : saya tidak tahu siapa pertama kali menemukan cara ini, karena saya sendiri tahu dari hasil pencarian di mbah Google dan hampir semua blogger mengakui cara ini adalah hasil tulisanya sendiri.