Cara Membuat Efek Transisi Pada Postingan Blogspot

Hai sahabat kampung design apa kabar ? Kali saya ingin berbagi sedikit tentang Cara Membuat Efek Transisi Di Blogspot.

Mungkin sudah banyak Blogger yang sudah membuat postingan tentang Cara Membuat Efek Transisi Di Blogspot ini namun apa salah nya saya juga membuat nya agar tidak tenggelam hehehe.

Baik lah langsung saja kita ke tahap pembuatan nya.

DEMO
Cara Membuat Efek Transisi Pada Postingan Blogspot.

1. Silahkan sahabat Login ke Dasbord Blogger.
2. Klik Menu Tema Dan Klik Edit HTML
3. Silahkan copy CSS di bawah ini dan pasang tepat di atas 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>

4. Selanjutnya tambahkan kode di bawah 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>

5. Setelah itu klik Tombol Simpan.
Sumber : arlina design
Bagaimana Cara Membuat Efek Transisi Di Blogspot cukup mudah bukan, Sekian tutorial Kali ini dan semoga bermanfaat bagi sahabat semua nya.