×

Owner / Author / Admin / etc

    Rahman NM    

"Pada halaman web ini saya akan membagikan informasi informasi menarik seputar Anime, Manga, Game, Film, dan juga berbagai tips-tips menarik lainnya."

Membuat Efek Transisi Gambar di Dalam Postingan Blog

February 02, 2020   • 1 Comment

Pada kesempatan kali ini saya ingin membagikan sebuah tutorial blogger kepada teman teman, yaitu Membuat Efek Transisi Gambar diDalam Postingan Blog. Tutorial ini saya buatkan atas permintaan salah satu visitor blog saya, oleh karena itu saya akan membagikan tutorial ini kepada teman teman. Efek Transisi Gambar ini cara kerjanya sama seperti memasang Lazy Load, mengapa ? Karna gambar akan muncul setelah kita melakukan aktivitas atau scrolling dipostingan tersebut.

Jika kamu penasaran dengan Efek Transisi Gambar di Dalam Postingan Blog kamu dapat melihatnya di blog ini, kamu cukup cari artikel yang berisi gambar lebih dari satu dan kau akan melihat efek transisi tersebut. Dengan memasang fitur ini juga gambar pada postingan blog kamu akan terlihat keren karna muncul dengan mulus.

Nah langsung saja kita ke Tutorialnya, yuk ikuti tutorial ini sampai selesai.

Cara Membuat Efek Transisi Gambar di Dalam Postingan Blog
  1. Pertama login dulu ke Blogger,
  2. Kemudian, pada dashboard Blogger pilih TEMAEdit HTML,
  3. Lalu, copy kode CSS dibawah ini dan letakkan tepat dibawah kode <head>, atau diatas kode <head>,
    <style type='text/css'>
    /* Image Transition By Anirocksite.com */
    .imgani #body-post-it img{
    opacity:0;
    transition:all .6s ease;
    transform:scale(.95) translateY(20px)
    }
    .imgani #body-post-it img.anime{
    opacity:1;
    transform:scale(1) translateY(0)
    }
    </style>
  4. Setelah meletakkan kode CSS tersebut, kemudian copy kode Javascript dibawah ini dan letakkan tepat diatas </body>,
    <script type='text/javascript'>
    //<![CDATA[ 
    // Image Transition By Anirocksite
    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>
  5. Terakhir simpan atau save template.
Bagaimana, mudah bukan cara membuat efek transisi gambar di dalam postingan blog ?
Kamu juga dapat mengembangkannya lagi menjadi lebih menarik misalkan, menggunakan efek transisi pada homepage postingan, atau yang lainlah, pasti akan terlihat lebih keren.

Creativity of codes and exploiting, with code we can do something fun.
Facebook Instagram Twitter
Show Comments!
Hide comments

1 Response to "Membuat Efek Transisi Gambar di Dalam Postingan Blog"

Kebijakan berkomentar :

Berkomentarlah dengan tata bahasa yang baik, agar orang tau sebijak apa karakter anda melalui kata-kata,

Silahkan berkomentar apapun selagi masih berhubungan dengan halaman postingan ini,

Dilarang berkomentar menggunakan Link Aktif,

Centang Notife Me agar mendapatkan notifikasi balasan komentar admin melalui Email.

  1. Efek Transisi Gambar ini tinggal pasang ajakah script dan css nya min ?

    ReplyDelete

Iklan Atas Artikel

Iklan Tengah Artikel

Iklan Tengah Artikel 2

Iklan Bawah Artikel

© Copyright 2020 Anirock Site - All Rights Reserved Created With