Memberikan Efek Transisi Pada Postingan Blog

Memberikan Efek Transisi Pada Postingan Blog

Sesuai Permintaan, pada kesempatan kali ini Cybertips akan berbagi tips Memberikan Efek Transisi Pada Gambar Postingan. cara kerjanya yaitu konten akan muncul ketika kita menggulirkan halaman kebawah.
Jika Kalian ingin memasangnya, cara nya cukup mudah dan mudah di mengerti. Silahkan Ikuti Macam-macam toturial di blog ini dan jangan lupa di share.

seperti biasa kalian login terdahulu di Blogger.com dan gunakan email kalian untuk login di blog tersebut. jika sudah, Silahkan Buka Halaman Blogger Dan Masuk Ke Menu Tema Lalu Klik Edit HTML Tambahkan Kode CSS dibawah ini sebelum tag penutup </head>

CSS

  <b:if cond='data:blog.pageType != &quot;index&quot;'>
<style>
.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 kode dibawah ini sebelum tag penutup </body>

Jquery

  <b:if cond='data:blog.pageType != &quot;index&quot;'>
<script>
//<![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, silahkan klik tombol Simpan Tema Dan Lihat Hasilnya.

tidak hanya untuk memberikan efek transisi pada gambar postingan, kalian juga bisa memodifikasikan dan memberikan efek pada bagian lain nya di template kalian masing-masing, tinggal di kreasikan sesuai selera kalian. Sekian Tips kali ini, silahkan digunakan jika kalian tertarik dan semoga bermanfaat.

source:arlinacode.com

Berkomentar Lah Dengan Sopan, Bijak Dan BerEtika, Karena Setiap Komentar Menjadi Tanggung Jawab Komentator

Post a Comment (0)
Previous Post Next Post