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.
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.
Langkah selanjutnya tambahkan kode berikut ini di atas kode </body> template blog anda.
Jika sudah diterapkan kode diatas tinggal klik Simpan / Save template anda Selesai.
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
![]() |
Panduan Membuat Efek Transisi Pada Gambar Postingan di blogspot |
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 != "index"'>
<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 != "index"'>
<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.
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
0 Response to "Panduan Membuat Efek Transisi Pada Gambar Postingan di blogspot"
Post a Comment