Panduan Membuat Efek Transisi Pada Gambar Postingan di blogspot

Efek transisi pada gambar postingan blog mungkin hanya beberapa orang yang mengetahui dan menggunakannya, nah di artikel ini saya akan membagikan tutorial tersebut.

Panduan Membuat Efek Transisi Pada Gambar Postingan di blogspot

Contoh efeknya transisi pada gambar seperti di blog saya ini, Penasaran dengan bagaimana cara menerapkannya di blog anda? tanpa basa-basi simak saja langsung tutorialnya berijut ini.

Panduan Membuat Efek Transisi Pada Gambar Postingan di blogspot

Seperti biasa anda perlu login terlebih dahulu ke blogger.com sesuai akun blog anda masing-masing, dan masuk ke menu Tema > Edit HTML lalu tambahkan kode CSS berikut ini di atas kode  </head> template blog anda.

  <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>

Langkah selanjutnya tambahkan kode berikut  ini di atas kode </body> template blog anda.

  <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>

Jika sudah diterapkan kode diatas tinggal klik Simpan / Save template anda Selesai.

Demo Click here

Itulah Panduan Membuat Efek Transisi Pada Gambar. Postingan bagaimana mudah bukan? hal positif jika menerapkan efek ini di blog terasa sangat elegan dan keren pastinya semoga bermanfaat see you next time.

kalo ada pertanyaan silahkan di kolom komentar ya terimakasih

Share this post