Cara membuat Animasi berjalan di Blog ~ Gudang Ilmu IT

Membuat Animasi Berjalan Di Blogspot untuk menambah kesan menarik , bagus dan unik Jadi silahkan simak penjelasan saya untuk mengisi Animasi di Blog anda.

Langkahnya :
1. Login akun blogger anda.
2. Klik Template » Edit HTML » Cari kode </body>
3. Lalu paste Kode ini diatas kode </body>

Contoh nya seperti ini :

Keterangan :

direction='right' : untuk arah Animasi berjalan dari kiri ke kanan.

       left : untuk arah Animasi berjalan dari kanan ke kiri.
       up   : untuk arah Animasi berjalan dari Atas ke Bawah.
   down : untuk arah Animasi berjalan dari Atas ke Bawah.

behavior='alternate' : Untuk arah Animasi berjalan Bolak-balik.

       scroll : sama seperti direction dari kanan ke kiri atau sebaliknya
       slide : animasi berjalan dari kanan dan berhenti di kiri atau     sebaliknya

scrolldelay='260' : kecepatan berjalan Animasi

bottom:10px; left:0; width:100%; : letak Animasi pada layar monitor

Okee segitu aja panduan nya skarang kita masuk di bagian Coding Animasi nya :

1.Burung Terbang

<marquee direction='left' scrolldelay='160' style='position:fixed; bottom:10px; left:0; width:100%;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixJIdP5EMCmIgO0Z_QEIbtP4f1QBE01yOpHo20uMrDt101Vwqx8WoTmaeKLGUuZSQXAGPT408PLlihk1HMwSFPIyZR6g01qUE0atmg3JSymzE9yo0OM7V3EZ6Zn53ud4BB4MM1F-td81ee/s1600/58.gif' style='border:0; background:none; padding:0; box-shadow: none; width:80px;'/></marquee>

2.Motor Berjalan

<marquee direction='right' scrolldelay='160' style='position:fixed; bottom:10px; left:0; width:100%;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_JYliERriACEgaFFhOCbYSgj2s6Xk6O9u1ZJyAphVBe_EM8T2_KEGx2S-HNKw0-jbXMrMHARgniklKN8uY2lNXM90jRlXGeXq63hSHNXOyPKUakQRPL_GtcVLsjixpDaPO6iMCk31B3am/s320/animasi-bergerak-sepeda-motor-0015.gif' style='border:0; background:none; padding:0; box-shadow: none; width:80px;'/></marquee>

3.Kelelawar Terbang

<marquee direction='right' scrolldelay='160' style='position:fixed; bottom:10px; left:0; width:100%;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMfDI7OQGLpKKkA5NHYWIEKHlqb-KJC3PO-uIR01Yfj39EV6xYWRizme8jYTNPtatciJ-fcsDqiA1jkaT080xqIdFJBr0SfWUL8Y2bMe44C-LkehCCHPZW1cvi6b_sDdNKT7-ofQ3bHdJj/s320/Animasi-kelelawar-vampire.gif' style='border:0; background:none; padding:0; box-shadow: none; width:80px;'/></marquee>

4.Buaya Berjalan

<marquee direction='right' scrolldelay='160' style='position:fixed; bottom:10px; left:0; width:100%;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3SWrcMPw0oTsVAB26DyYVS5xIuIwBC4VD9bteg5Kd2_gZerQyYI18YvdX4RKhDYm6FzgouRzCBA0LcgERXhZ0GAPGdTjATzf0mPHi5mrFmhAyYYrGFRe_YoNQ_c5dWbXyNzZLaTKJoNtr/s1600/animiertes-krokodil-bild-0008.gif' style='border:0; background:none; padding:0; box-shadow: none; width:80px;'/></marquee>

5.Kakek-kakek

<marquee direction='right' scrolldelay='160' style='position:fixed; bottom:10px; left:0; width:100%;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheXCH823zOuc2E2BmSniAS0yL_jp_wzgUQsXpb66L0bm-uJus0MDFUxCNOp3_8nIIphKimoOn0aUYn9s4lHbtKM3Sy7yoQ3ZBusNDb8qCt2rrUw_LDh6h6aM7W0mirlrY4zCUrk96mwQE0/s1600/bigbiker.gif' style='border:0; background:none; padding:0; box-shadow: none; width:80px;'/></marquee>

6.Naik Becak

<marquee direction='right' scrolldelay='160' style='position:fixed; bottom:10px; left:0; width:100%;'> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW-kUumDOpMLzCvS3TNR65yyER9U2yJai2SlpgNW5fb-lWL3-omtNSgmEULeJWyKExXTF3-kjwiihVsNDUBj9kvdIAt86UqE5us1bf9g-R8In0zyPyO_KbNPhCVsqQZG2g7SPdnUf6hAIq/s1600/Gambar+Lucu+Kartun+Terbaru.gif' style='border:0; background:none; padding:0; box-shadow: none; width:80px;'/></marquee>

7.Kodok Loncat

<marquee direction='right' scrolldelay='160' style='position:fixed; bottom:10px; left:0; width:100%;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvRMlpohDPwLh9681-OOeGMRokwfzEOIWS9qVKK5B0Alr1nJU-ly69G0j32PdoqcWInkHePx_kBbQcDbi4ATLmj7ayE8EgMKwLBGjYnfzHO7iT1hK7jRraO0R6xOlbfW4pwJYrat2ONTSM/s1600/Jumping_frog_2.gif' style='border:0; background:none; padding:0; box-shadow: none; width:80px;'/></marquee>

8.Naga Merah

<marquee direction='right' scrolldelay='160' style='position:fixed; bottom:10px; left:0; width:100%;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_5CdCg_eAeDLiCtYpNMKUgtDBvIrcccwpW3kjexc6JdP2U4bDD7V_Yv5D3XiYcVfIgVN_fGJeVicz1xrI_dEZ00kq4QVi0TT_xAh-Baj9_uufPbk6doJFFuOoEe3PQVyvgd2CxERbZ0U_/s320/dragon-animated-gif-60.gif' style='border:0; background:none; padding:0; box-shadow: none; width:80px;'/></marquee>

9.Zombie

<marquee direction='leftt' scrolldelay='160' style='position:fixed; bottom:10px; left:0; width:100%;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR2P4V2mSlkRE1M6ZkY3_uQV8ZYu5JKgv7VXxkPM-0IM6jkMo1p3YCBo1Nc00wwjXIixosu4u76lOBKhSjQb6ue0TkKSFNOJd_UIBq9ho9HKnbY9UiL7sN9z84yRXgJzCHK7VaD8wCOS3c/s1600/zombie_walk.gif' style='border:0; background:none; padding:0; box-shadow: none; width:80px;'/></marquee>

10.Zombie lagi

<marquee direction='right' scrolldelay='160' style='position:fixed; bottom:10px; left:0; width:100%;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxj7NRkNLZP0bnAzYIPfKs-m3BHzViM4OaDfCHnID9q47fU9fFTWxcANE5viZAzmi_5JVDOVEpWwWrDfA62CN3voHGvKEhuO6SDPNZxYgBP8AGbeGJilI-JORKrzkCuNqMGrshJXzWE0Ux/s1600/Gambar-animasi-zombie-berjalan.gif' style='border:0; background:none; padding:0; box-shadow: none; width:80px;'/></marquee>

11.Kupu-kupu

<marquee direction='right' scrolldelay='160' style='position:fixed; bottom:10px; left:0; width:100%;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigeZGCjhPdsVL7Q9dL2KpDAFi5tavgHfmTTzxf9Q29JMhS8eNBMBZAhht1FGkgOS4eQXXRwCJpVOLmBiyjy6o3fjbogRT9y_8l90AWtNDl7hWQ4JU8ckodV66Z27ab3y1AkKvWvvqI5xG6/s320/Gambar-Gif-Animasi-Bergerak-Lucu-Terbaru-39.gif' style='border:0; background:none; padding:0; box-shadow: none; width:80px;'/></marquee>

12.Naga Berjalan

<marquee direction='left' scrolldelay='160' style='position:fixed; bottom:10px; left:0; width:100%;'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifaMnc2FqWUOe-5BcTa4i0xZ7T5PfDGD924u2slOd5MNg_S2XEvgwFmyuIFH4LJUeIag2hqNtRKNi4PKROFPr5JYXdo-e47qFaS-vn2V1Uzauwe9Lryl2Bjnp6AiCVXWcc1tPMeCNT6Q0v/s1600/iaprfoyw.gif' style='border:0; background:none; padding:0; box-shadow: none; width:80px;'/></marquee>

13.Hantu

<marquee direction='left' scrolldelay='160' style='position:fixed; bottom:10px; left:0; width:100%;'>
<img src='http://www.animatedimages.org/data/media/77/animated-ghost-image-0075.gif' style='border:0; background:none; padding:0; box-shadow: none; width:80px;'/></marquee>

14.Gak ada nama :v

<marquee direction='left' scrolldelay='160' style='position:fixed; bottom:10px; left:0; width:100%;'>
<img src='https://s-media-cache-ak0.pinimg.com/originals/19/e9/01/19e9016cd1b0d385ddfa2d9e9672e02e.gif' style='border:0; background:none; padding:0; box-shadow: none; width:80px;'/></marquee>

15.Pocong loncat

<marquee direction='left' scrolldelay='160' style='position:fixed; bottom:10px; left:0; width:100%;'>
<img src='http://gambargambar.co/wp-content/uploads/2013/09/gambar-dp-bergerak-pocong-lucu1.gif' style='border:0; background:none; padding:0; box-shadow: none; width:80px;'/></marquee>

16.Naga Hitam

<marquee direction='left' scrolldelay='160' style='position:fixed; bottom:10px; left:0; width:100%;'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzgyBfVydU-nSRzAEEWqUf9mxiq2fy4ynvZCnlgRYdp56wq3egHUfbw5VbazhR202jfZloYzezSpYsKrNSlNjtlUuyfzcNYVGJh4G7ToCF0UUS-rPdU5dbGXpaZ43IWEFMrN2t31Hmzocg/s320/Dragon1.gif' style='border:0; background:none; padding:0; box-shadow: none; width:80px;'/></marquee>

17.Zombie ane punya :v

<marquee direction='left' scrolldelay='160' style='position:fixed; bottom:10px; left:0; width:100%;'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxYB-d2OAFpo7eJEOLrQ1EwmyxaOQC4Q_xf-H42e4PQMWWsz3b1tFGLsqsWQ8BoarP35_NcZzx48KHp2OqHnfdgC4DD5jjAHxjA_KA2OCSVnpRpcxSDy_PwgcHf1OEMHNEQ2iIcZeQCGf_/s1600/zombie-4.gif' style='border:0; background:none; padding:0; box-shadow: none; width:80px;'/></marquee>

Okee Sekian Tutorial yang saya buat untuk Animasi berjalan nya jika ada saran dan kritik silahkan tulis di kolom komentar ya :)

Btw ada yang komen gini nih tadi Gan nyari gambar gift yg transparan dimana ya ? Saya punya blog sih buat nyimpen Gambar gift , post nya baru satu sih tapi klo mau di liat silahkan >>>Klik disini<<<