Membuat Efek Transisi Gambar di Dalam Postingan Blog
February 02, 2020
•
1 Comment
Pada kesempatan kali ini saya ingin membagikan sebuah tutorial blogger kepada teman teman, yaitu Membuat Efek Transisi Gambar diDalam Postingan Blog. Tutorial ini saya buatkan atas permintaan salah satu visitor blog saya, oleh karena itu saya akan membagikan tutorial ini kepada teman teman. Efek Transisi Gambar ini cara kerjanya sama seperti memasang Lazy Load, mengapa ? Karna gambar akan muncul setelah kita melakukan aktivitas atau scrolling dipostingan tersebut.
Jika kamu penasaran dengan Efek Transisi Gambar di Dalam Postingan Blog kamu dapat melihatnya di blog ini, kamu cukup cari artikel yang berisi gambar lebih dari satu dan kau akan melihat efek transisi tersebut. Dengan memasang fitur ini juga gambar pada postingan blog kamu akan terlihat keren karna muncul dengan mulus.
Nah langsung saja kita ke Tutorialnya, yuk ikuti tutorial ini sampai selesai.
Cara Membuat Efek Transisi Gambar di Dalam Postingan Blog
- Pertama login dulu ke Blogger,
- Kemudian, pada dashboard Blogger pilih TEMA ⇒ Edit HTML,
- Lalu, copy kode CSS dibawah ini dan letakkan tepat dibawah kode <head>, atau diatas kode <head>,
<style type='text/css'> /* Image Transition By Anirocksite.com */ .imgani #body-post-it img{ opacity:0; transition:all .6s ease; transform:scale(.95) translateY(20px) } .imgani #body-post-it img.anime{ opacity:1; transform:scale(1) translateY(0) } </style> - Setelah meletakkan kode CSS tersebut, kemudian copy kode Javascript dibawah ini dan letakkan tepat diatas </body>,
<script type='text/javascript'> //<![CDATA[ // Image Transition By Anirocksite var scroll="yes",Fscroll=scroll.replace(/(\r\n|\n|\r)/gm," ");"yes"===Fscroll&&($(document).ready(function(){$("body").addClass("imgani")}),$(window).bind("load resize scroll",function(){var o=$(this).height();$(".post-body img").each(function(){var s=.1*$(this).height()-o+$(this).offset().top;$(document).scrollTop()>s&&$(this).addClass("anime")})})); //]]> </script> - Terakhir simpan atau save template.
Bagaimana, mudah bukan cara membuat efek transisi gambar di dalam postingan blog ?
Kamu juga dapat mengembangkannya lagi menjadi lebih menarik misalkan, menggunakan efek transisi pada homepage postingan, atau yang lainlah, pasti akan terlihat lebih keren.
Efek Transisi Gambar ini tinggal pasang ajakah script dan css nya min ?
ReplyDelete