✔ 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 dikala pengunjung sudah menscroll halaman tersebut. Atau dapat di sebut juga dengan menciptakan dampak transisi pada gambar postingan.


Cara kerja dampak transisi pada gambar ini sama dengan cara kerja pada postingan mempercepat loading blog dengan Lazy load adsense. Yaitu konten akan muncul dikala 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 instruksi </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 instruksi </body>

<b:if cond='data:blog.pageType != &quot;index&quot;'>
 <script type='text/j4vascript'>
 //<![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 dampak pada gambar postingan.
Sumber http://www.masigun.com

Share this post

Berlangganan update artikel terbaru via email: