Cara Menunda Kemunculan Gambar Di Dalam Postingan

Dengan menunda kemunculan gambar yang ada di dalam postingan akan menciptakan loading blog anda semakin cepat, terutama pada halaman postingam. Makara disini gambar postingan akan muncul saat pengunjung sudah menscroll halaman tersebut. Atau dapat di sebut juga dengan menciptakan efek transisi pada gambar postingan.


Cara kerja efek transisi pada gambar ini sama dengan cara kerja pada postingan mempercepat loading blog dengan Lazy load adsense. Yaitu konten akan muncul saat pengunjung mulai menggulir halaman kebawah. Dengan kata lain gambar di dalam postingan akan di tunda kemunculannya hingga pengunjung mulai mengscroll halaman kebawah.

Memberikan Efek Pada Gambar Postingan

Pertama Masuk ke hidangan edit HTML di dalam akun blogger anda, tambahkan css berikut sebelum arahan </head>

<b:if cond='data:blog.pageType != &quot;index&quot;'>
 <style type='text/css'>
 .imgani .post-body img{opacity:0;transition:all .6s ease;transform:scale(.95) translateY(20px)}.imgani .post-body img.anime{opacity:1;transform:scale(1) translateY(0)}
 </style>
 </b:if>

Selanjutnya Tambahkan CSS dibawah ini sebelum arahan </body>

<b:if cond='data:blog.pageType != &quot;index&quot;'>
 <script type='text/javascript'>
 //<![CDATA[
 // Image Transition
 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>
 </b:if>

Terakhir klik simpan tema. Nah cukup simple bukan menciptakan efek pada gambar postingan.
Sumber https://www.masigun.com/

Berbagi :