Buka Tabungan Neo Bank & Dapatkan Hadiah Tunai 10Jt, Bisa Langsung Ambil!
Tanpa Syarat & Aman

Ambil

Cara Membuat Efek Transisi Pada Gambar Di Postingan Blog

Cara Membuat Efek Transisi Pada Gambar Di Postingan.Efek transisi pada gambar ini akan muncul atau berfungsi saat kita menggulirkan halaman ke bawah.
Gambar Cara Membuat Efek Transisi Pada Gambar Di Postingan Blog
Cara Membuat Dan Memasang Efek Transisi Yang Keren Pada Gambar Di Postingan Blog - Sebenarnya efek transisi pada gambar ini merupakan efek yang banyak digunakan dan diterapkan di berbagai blog atau website. Tapi tidak ada salahnya kalau saya membahas lagi tentang efek transisi pada gambar yang ada di postingan blog. Efek transisi pada gambar ini akan muncul atau berfungsi saat kita menggulirkan halaman ke bawah.

Efek transisi ini sangat unik dan keren banget dan wajib dicoba bagi kamu yang lebih mementingkan desain pada sebuah blog. Cara pemasangan efek ini juga sangatlah mudah dan tidak ribet. Cukup menambahkan beberapa baris kode ke dalam markup HTML diblog kamu. Kalau kamu masih asing banget sama efek transisi pada gambar diblog ini, kamu bisa lihat demo atau ilustrasinya di artikel saya yang lumayan banyak gambarnya.


Cara Memasang Atau Membuat Efek Transisi Pada Gambar Di Postingan Blog

1. Masuk ke dashboard blogger kamu.
2` Masuk ke menu Theme > Edit HTML.
3. Lalu cari tag </head> dan pastekan kode dibawah ini tepat berada diatas tag tersebut.
<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>
4. Kemudian pastekan kembali kode dibawah ini tepat berada diatas </body>
<script>
//<![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>
5. Jika semuanya sudah dipasang silakan simpan perubahannya dan lihat hasilnya.


Itulah tutorial cara memasang efek transisi pada gambar dipostingan blog pada artikel kali ini. Kalau masih mengalami gagal atau kesulitan saat menerapkan kodenya, silakan tanyakan dikolom komentar.
There are many unique things in the world that you haven't seen

Post a Comment

Tulislah komentar unik, jelas dan tidak mengandung LINK AKTIF atau PROMOSI.