Tutorial Cara Membuat Animasi Mobil dan Sepeda Berjalan di Footer Blog
Andrie Kristianto - Tutorial Cara Membuat Animasi Mobil dan Sepeda Berjalan di Footer Blog. Pada saat berselancar di website codepen saya terlintas melihat widget animasi ini, dan tertarik untuk menerapkannya diblog yang saya miliki terutama untuk blog andrie.id.

Untuk demo animasinya bisa Anda lihat di halaman website saya: www.andrie.id. Dengan menambahkan animasi CSS3 ini menurut saya jadi terlihat lebih cantik dan millenial banget, dan animasi ini pun tidak memberatkan loading blog, seperti tidak ada pengaruh yang besar terhadap blog. 


Apa itu CSS 3 ?

CSS 3 adalah versi css terbaru yang dikembangkan oleh W3C, dari beberapa browser yang ada sudah support atau mendukung untuk versi CSS terbaru ini. Sebenarnya CSS 2 dan CSS 3 hampir terlihat sama saja, namun untuk di CSS 3 hanya ada perubahan sedikit terkait penambahan beberapa elemen. 

Cara Membuat Animasi Mobil dan Sepeda Berjalan Diblog

Untuk membuat animasi mobil dan sepeda berjalan diblog ini hanya 2 langkah mudah saja, yaitu:
1. Langkah Pertama, tambahkan css dibawah ini diatas kode
]]></b:skin> pada tampilan EDIT HTML yang Anda miliki.
/* New Footer by Blog Andrie Kristianto */
.footer_bg {
position: relative;
background: url(&quot;https://lh4.googleusercontent.com/proxy/FuAeU5mr6jOHXAjFFtwZn1Dv9DPnSFg4AgVUpk7niCOt_e92hoj40waUnATxQP2uFd35kx0w_um8pNSbo-wnTz0GoZVgF-gBDFtaKAF_=s0-d&quot;) no-repeat scroll center 0;
width: 100%;
height: 266px;
border-top:1px solid #ddd;
display: block;
}
.footer_bg .footer_bg_one {
background: url(&quot;https://1.bp.blogspot.com/-mvKUJFGEc-k/XclCOUSvCnI/AAAAAAAAUAE/jnBSf6Fe5_8tjjlKrunLBXwceSNvPcp3wCLcBGAsYHQ/s1600/volks.gif&quot;) no-repeat center center;
width: 330px;
height: 105px;
background-size:100%;
position: absolute;
bottom: 0;
left: 30%;
overflow: hidden;
-webkit-animation: myfirst 22s linear infinite;
animation: myfirst 22s linear infinite;
}
.footer_bg .footer_bg_two {
background: url(&quot;https://1.bp.blogspot.com/-hjgfxUW1o1g/Xck--XOdlxI/AAAAAAAAT_4/JWYFJl83usgRFMvRfoKkSDGd--_Sv04UQCLcBGAsYHQ/s1600/cyclist.gif&quot;)/*footer link.andrie.id*/ no-repeat center center;
width: 88px;
height: 100px;
background-size:100%;
bottom: 0;
left: 38%;
position: absolute;
overflow: hidden;
-webkit-animation: myfirst 30s linear infinite;
animation: myfirst 30s linear infinite;
}
@-moz-keyframes myfirst {
0% {
left: -25%;
}
100% {
left: 100%;
}
}
@-webkit-keyframes myfirst {
0% {
left: -25%;
}
100% {
left: 100%;
}
}
@keyframes myfirst {
0% {
left: -25%;
}
100% {
left: 100%;
}
}
2. Langkah kedua, cari kode <footer class="container" , lalu letakkan kode html dibawah ini tepat dibawahnya.
<div style='background:#f5f6f7'>
<div class='footer_bg'>
<div class='footer_bg_one'/>
<div class='footer_bg_two'/>
</div></div>
3. Untuk yang saya tandai warna  biru  tersebut adalah warna background dari animasi mobil tersebut, bisa Anda biarkan saja atau bisa Anda ubah sesuai dengan background blog yang Anda miliki. Dan Selesai.

Dengan memasang animasi ini kemungkinan bisa menjadi daya tarik pengunjung untuk bisa kembali lagi ke blog yang kita miliki. Hal ini bisa menjadi peluang cara mendapatkan sitelink di blog muncul lebih cepat dari google. Nah bagi blog Anda yang sudah melakukan perubahan template sedemikian rupa (biasanya sudah dimodifikasi) dan belum berhasil, bisa komentar dibawah agar bisa saya bantu letak footer yang ada di blog Anda.

Demikianlah Tutorial Cara Membuat Animasi Mobil dan Sepeda Berjalalan di blog ini, ohiya terkait perekaman animasi diatas saya menggunakan aplikasi perekam pc salah satunya di artikel ini: Aplikasi Perekam Layar PC Gratis Tanpa Watermark.

Terima kasih, semoga bermanfaat.

Related Posts

Postingan Lebih Baru Postingan Lama
  1. arenapublik.com
    arenapublik.com

    makin berat ga mas kalau pakai ini ya? hehe tapi lucu sih

    Balas Hapus

  2. Andrie Kristianto

    Aman mas, dijamin jadi mantap :D

    Balas Hapus

  3. Agus Warteg

    Pengin tambahin juga nih animasi mobil dan sepeda bergerak, tapi template bawaan blogger aku kadang gagal terus kalo mau tambah kode. Kenapa begitu ya kang?

    Balas Hapus

  4. Andrie Kristianto