Cara membuat efek gambar berjalan pada blog – gambar pada postingan atau widget bisa berjalan ketika kursor sedang mendekat, pastinya efek gambar berjalan pada blog ini sangat menarik dan layak untuk dicoba. Apalagi anda yang mungkin sedang baru belajar tentang cara membuat blog, sepertinya anda musti mempraktekkan tutorial efek gambar berjalan yang satu ini.
Untuk contohnya anda bisa dekatkan kursor anda pada gambar dibawah ini :
Untuk membuat efek animasi semacam ini anda membutuhkan code yang dinamakan CSS sehingga membuat gambar tersebut mampu untuk bisa bergerak. Nah salah satu syarat agar gambar tersebut bisa bergerak kesana kemari adalah anda / ada sebuah cursor yang mendekat, jadi ketika ada kursor yang mendekati gambar tersebut maka efek animasi css3 pada gambar ini baru bisa bekerja.
Anda bisa menaruh efek ini dimanapun sesuka anda, baik dipostingan, widget blog atau bagian lainnya. Jadi jika suatu saat anda membuat postingan dan anda ingin memberikan efek tersebut maka anda tinggal menaruh codenya didalamnya, nah sama juga jika anda ingin menaruh code tersebut di widget atau bahkan header. Nampaknya keren juga untuk memasukkanna di header, menarik juga.
Code css3 animasi gambar yang anda butuhkan adalah :
<style type="text/css">#timings_demo {margin:0 auto;border:0px #aaa solid;padding:10px;}.abstrak_box{width:280px;height:200px;margin-bottom:10px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq5EinTCfON05KwOAwpKqyO1EaXBHOpLfMr2CGT_0u6JecyDP_bM4VXKuJnsnJm7Iurw3BR70ujyXdPc_t28FykwpOwRzUaKZ5ZoN_8k1_RyG39bopb97jdnBS4Qkm8SgBU_GOu3hOleY/s320/Cara+Mengganti+Nama+Blog+agar+lebih+bagus.jpg)}#ease.abstrak_box{-webkit-transition: all 4s ease;-moz-transition: all 4s ease;-o-transition: all 4s ease;-webkit-transition: all 4s ease;transition: all 4s ease;border:1px #f00 solid;}#timings_demo:hover .abstrak_box, #timings_demo.hover_effect .abstrak_box{margin-left:440px;-webkit-border-radius:40px 40px;-moz-border-radius:40px 40px;-o-border-radius:25px;-webkit-transform: rotate(360deg);-moz-transform:rotate(360deg);transform:rotate(360deg);background-color:#fff;</style><div id="timings_demo"><div class="abstrak_box" id="ease"><div class="center"></div></div></div>
Yang perlu anda lakukan hanya mengganti url : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq5EinTCfON05KwOAwpKqyO1EaXBHOpLfMr2CGT_0u6JecyDP_bM4VXKuJnsnJm7Iurw3BR70ujyXdPc_t28FykwpOwRzUaKZ5ZoN_8k1_RyG39bopb97jdnBS4Qkm8SgBU_GOu3hOleY/s320/Cara+Mengganti+Nama+Blog+agar+lebih+bagus.jpg
Dengan url gambar yang ingin anda tampilkan dan save
Singkat banget kan caranya, ngga habis berjam-jam untuk membuatnya
Nah sekarang anda bisa menaruh code tersebut ditempat yang anda inginkan dan lihatlah perubahan yang ada di blog anda. Menarik bukan.
Untuk contohnya anda bisa dekatkan kursor anda pada gambar dibawah ini :
Bagaimana cara membuat gambar berjalan pada blog
Untuk membuat efek animasi semacam ini anda membutuhkan code yang dinamakan CSS sehingga membuat gambar tersebut mampu untuk bisa bergerak. Nah salah satu syarat agar gambar tersebut bisa bergerak kesana kemari adalah anda / ada sebuah cursor yang mendekat, jadi ketika ada kursor yang mendekati gambar tersebut maka efek animasi css3 pada gambar ini baru bisa bekerja.
Anda bisa menaruh efek ini dimanapun sesuka anda, baik dipostingan, widget blog atau bagian lainnya. Jadi jika suatu saat anda membuat postingan dan anda ingin memberikan efek tersebut maka anda tinggal menaruh codenya didalamnya, nah sama juga jika anda ingin menaruh code tersebut di widget atau bahkan header. Nampaknya keren juga untuk memasukkanna di header, menarik juga.
Code css3 animasi gambar yang anda butuhkan adalah :
<style type="text/css">#timings_demo {margin:0 auto;border:0px #aaa solid;padding:10px;}.abstrak_box{width:280px;height:200px;margin-bottom:10px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq5EinTCfON05KwOAwpKqyO1EaXBHOpLfMr2CGT_0u6JecyDP_bM4VXKuJnsnJm7Iurw3BR70ujyXdPc_t28FykwpOwRzUaKZ5ZoN_8k1_RyG39bopb97jdnBS4Qkm8SgBU_GOu3hOleY/s320/Cara+Mengganti+Nama+Blog+agar+lebih+bagus.jpg)}#ease.abstrak_box{-webkit-transition: all 4s ease;-moz-transition: all 4s ease;-o-transition: all 4s ease;-webkit-transition: all 4s ease;transition: all 4s ease;border:1px #f00 solid;}#timings_demo:hover .abstrak_box, #timings_demo.hover_effect .abstrak_box{margin-left:440px;-webkit-border-radius:40px 40px;-moz-border-radius:40px 40px;-o-border-radius:25px;-webkit-transform: rotate(360deg);-moz-transform:rotate(360deg);transform:rotate(360deg);background-color:#fff;</style><div id="timings_demo"><div class="abstrak_box" id="ease"><div class="center"></div></div></div>
Yang perlu anda lakukan hanya mengganti url : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq5EinTCfON05KwOAwpKqyO1EaXBHOpLfMr2CGT_0u6JecyDP_bM4VXKuJnsnJm7Iurw3BR70ujyXdPc_t28FykwpOwRzUaKZ5ZoN_8k1_RyG39bopb97jdnBS4Qkm8SgBU_GOu3hOleY/s320/Cara+Mengganti+Nama+Blog+agar+lebih+bagus.jpg
Dengan url gambar yang ingin anda tampilkan dan save
Singkat banget kan caranya, ngga habis berjam-jam untuk membuatnya
Nah sekarang anda bisa menaruh code tersebut ditempat yang anda inginkan dan lihatlah perubahan yang ada di blog anda. Menarik bukan.
0 Komentar untuk "Membuat efek gambar berjalan pada blog"