Cara Menunda Kemunculan Gambar di Dalam Postingan

Dengan menunda kemunculan gambar yang ada di dalam postingan akan membuat loading blog anda semakin cepat, terutama pada halaman postingam. Jadi disini gambar postingan akan muncul ketika pengunjung sudah menscroll halaman tersebut. Atau bisa di sebut juga dengan membuat 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 ketika pengunjung mulai menggulir halaman kebawah. Dengan kata lain gambar di dalam postingan akan di tunda kemunculannya sampai pengunjung mulai mengscroll halaman kebawah.

Memberikan Efek Pada Gambar Postingan

Pertama Masuk ke menu edit HTML di dalam akun blogger anda, tambahkan css berikut sebelum kode </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 kode </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 membuat efek pada gambar postingan.