Cara Memberi Efek Thumbnail Gambar Postingan Melayang Dari Bawah Ke Atas (SlideInUp)

Abdi Apr 03, 2018 Apr 03, 2018 3 min read

Cara Buat Efek Gambar Image Postingan Melayang Dari Bawah Ke Atas (SlideInUp) Saat pertama kali postingan dibuka – saya akan sedikit membagikan tutorial bagaimana cara membuat gambar pada postingan atau artikel melayang dari bawah keatas saat pertama kali postingan dibuka.

Untuk cara yang akan saya bagikan saat ini bisa di praktekan di template blogger biasa maupun yang sudah valid amp. Karena cara ini kita tidak menggunakan Js melainkan hanya menggunakan CSS saja. Sebenarnya css inipun tidak hanya untuk image atau gambar saja melainkan untuk semua <div> yang ingin kita buat melayang dari bawah ke atas. Css ini di sebut dengan SlideInUp. Penasaran bagaimana penampakan nya? Berikut dibawah ini Demo atau Resultnya.

Atau Demo lebih jelasnya silahkan anda lihat diblog saya disini.

Jika anda berminat silahkan ikuti cara step by step di bawah ini.

Pertama Masuk ke Blogger > Template > Edit HTML.

Kemudian Silahkan anda copy kode css dibawah ini dan letakan di bawah kode <style>.


.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes slideInUp {
  0% {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  }
  @keyframes slideInUp {
  0% {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  }

Jika sudah langkan selanjutnya adalah menambakan kode pemanggilnya slideinup di div yang ingin kita buat melayang. Sesuai judul diatas kita akan membuat efek melayang pada image postingan. Untuk penambahan kode pemanggil nya di template yang saya pakai adalah seperti dibawah ini.


<div class='image-wrapper'>
 <div class='post-firstimage slideInUp'>
  <b:if cond='data:blog.postImageUrl'>
            <div class='firstimage'>
                <amp-img expr:alt='data:post.title' expr:src='data:blog.postImageUrl' height='393' layout='responsive' width='769'/> 
                </div>
    <b:else/>
              <div class='firstimage'>
                <amp-img expr:alt='data:post.title' expr:title='data:post.title' height='393' layout='responsive' src='https://4.bp.blogspot.com/-iWBMw0dwhQk/WAQpURA0MnI/AAAAAAAAHvc/VQ4aISNqoSgHC7BWAJyjpn0oFjFOsApCACK4B/s1600/amphtml-thumbnail2.jpg' width='769'/>
                </div>
            </b:if>
        </div>
  </div>

diatas kode yang saya tandai adalah kode pemanggil yang harus ditambahkan di <div> image. Agar image atau gambar mempunyai efek melayang.

Tapi Perlu anda ketahui lagi cara ini bukan hanya untuk gambar saja melainkan untuk semua <div> yang ingin kita buat melayang.

Untuk template anda pakai bisa menyesuiakan sendiri.

Jika kode slideInUp sudah di pasang di <div> terakhir klik simpan template.

Dan silahkan anda lihat pada halaman artikel anda.

Mungkin hanya itu saja untuk artikel Cara Buat Efek Gambar Postingan Melayang Dari Bawah Ke Atas (SlideInUp) Semoga bermanfaat.

Sourch Kode : https://codepen.io/anujashukla/pen/yeyvpx