Cara Membuat Gambar Berjalan di Bawah Blog

BantenXp - Cara mudah membuat gambar berjalan di bawah blog adalah tutorial kali ini. Setelah membahas tentang cara membuat teks berjalan sekarang kita akan membuat gambar berjalan di bawah blog. Untuk contoh gambar-gambarnya saya sudah menyiapkan di bawah. Jika ingin lebih kreatif silahkan membuat atau mencari gambar sendiri.

Cara Membuat Gambar Berjalan di Bawah Blog:
1. Login ke Blogger -> Template -> Edit HTML
2. Cari kode ]]></b:skin>
3. Simpan kode berikut ini di atas kode ]]></b:skin>

#running_img {
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); } 

4.Kemudian cari kode </body> dan pasang kode di bawah ini tepat di atas kode </body>

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

Ganti URL GAMBAR dengan link gambar anda misalnya https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy3xcHmXvdUcTTouYM2SZk8Ss8iGa4djoUG82YPzzVVL85ZHfNEu1LJeGOuI0gSOthrw_KSwUFEuzD1XrKar6jq2Ac4ZZx1ralpVnUY9rMqOd1KU1mwiBPW6wZnz39PttB9iueqLylGULI/s1600/Walk1.gif
5. Simpan Template dan lihat hasilnya.

Keterangan:

• Direction='left' adalah arah gambar berjalan ke kiri. Jika ingin gambar berjalan ke kanan, ganti left dengan right
• Scrollamount adalah tingkat kecepatan gambar berjalan, semakin besar nilai scrollamount maka semakin laju gambar berjalan

Berikut saya sertakan contoh gambar

URL Gambar: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbSE3i0PefB6TOI_nqA4jp7NWeJOEAvNAsKvM5_6sN_RR2D1DhPuDUh6jQZnwnazJRdxhGQDsumqr5lFSXWTx04qDm82xsBadEpEOdBY_xrrmpYCswu5HjggiVNi41RanNAN604CUr-mBQ/s1600/cooltext799652167.png

URL Gambar: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiHDDx2Ta0W10z5kibmZuQlRp4lnGpSMMLgXvJmFwQVgmvmVRdNBZqED7kkDO_V2oWjyDkNMRIdpalOU-pMbI4eSacIDc3SH0xN_qr3jtgBTjFZISOWCMo_M0EPlQkbAR-tSUY2brCOPPw/s1600/Run.gif

URL Gambar: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKJkORN3-pDBtzPNJqFLsmO5CdK_rpQNDhxk4dND7xeMxTptnem1wuZMZadNlo8vIb5-dJv2WwtFAguQ1qQKa63OzPEHDQrp6dRuJjLrm7Sh-EFewf3iMXILtS2FFfLhBIv6DnGhszbEIe/s1600/Run2.gif

URL Gambar: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy3xcHmXvdUcTTouYM2SZk8Ss8iGa4djoUG82YPzzVVL85ZHfNEu1LJeGOuI0gSOthrw_KSwUFEuzD1XrKar6jq2Ac4ZZx1ralpVnUY9rMqOd1KU1mwiBPW6wZnz39PttB9iueqLylGULI/s1600/Walk1.gif

URL Gambar: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK6ViQHmHudi0KWxRc7mE7KycM9VTvdEggowe8Gt2nbfSNbnRBI11joBuZ5aa_O_98KN5SisH6wCipGiMGWqZGuxupPSMMlWVIYiY9UiNZtdB0ijhIwvYZAfVWO1j3DmVvHDeSXtsvEqn_/s1600/Walk2.gif

URL Gambar: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuaBBErLUnqG4oB6EL_0ETlo3BnMp2ptDY8NtFyKtT2dzfCSc4TXyA8p3gBvZq4MxY3Ax7k-ao1jOO1qO2sLz7n7ge4Uj4PKb-LrHaxXXI_5GC8IXo0z5MqCT3bh7nuNnKLVXKcWTujJ6I/s1600/Walk3.gif

URL Gambar: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEDRR1TbjBCQheMvU_f87iQ9sgp5aWi6CZs8MycafW9ehPWK5KsvsgFyLYMiPSzXkip_8cnWcFY34gNX77H_Io_vgaI3_w3xLf6gaHjo1N908WY26UD4YhS3jgA0fpsSf7IiDYxnbJ5DXv/s1600/Fly.gif