Cara Memberi Efek Transisi Gambar Pada Postingan Blog

cara memberi efek transisi gambar pada blog


Memberikan Efek Transisi Pada Sebuah postingan blog memang akan membuat blog menjadi lebih berwarna,Karena dengan adanya Transisi ini Setiap gambar yang akan dilihat oleh Visitor akan memberikan sedikit Efek.

Maka itulah ini bisa jadi salah satu trik untuk membuat visitor lebih terkesan dan nyaman di sebuah artikel yang kita buat. 

Nah langsung saja Saya akan membagikan Tutorial Memberikan Efek Transisi Pada Sebuah Postingan. Begini Caranya


Memberikan Efek Transisi Gambar


1. Masuk Ke Halaman Blogger > Kemudian klik Menu Tema >dan Klik Tulisan Edit HTML > Setelah itu Masukkan kode CSS dibawah ini 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>

2. Setelah itu masukkan kode dibawah ini sebelum </body>

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<script type='text/javascript'>
//<![CDATA[
// Image Transition
var scroll="yes",Fscroll=scroll.replace(/(rn|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>
3. Kemudian jika sudah selesai klik tombol Simpan Tema


Sekian Yang bisa saya sampaikan tentang Cara Memberi Efek Transisi Gambar Pada Posingan Blog. Semoga bermanfaat dan berguna. [putarmuter]

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel