Membuat Pengaruh Animasi Otomatis Pada Semua Gambar Lightbox Blogger

Bermain dengan kode animasi murni CSS3 selama satu jam kesudahannya saya sanggup mengimplementasikannya kedalam salah satu fitur yang ada di dalam template blogger. Kali ini sasaran saya yakni semua gambar di posting blog yang ditampilkan di Lightbox resmi bawaan dari blogger. Saya bikin pengaruh yang sanggup bikin hadirin blog anda tidak merasa jenuh saat melihat-lihat kepada gambar yang ada di blog anda dan pengaruh ini sungguh sesuai untuk blogger yang memperlihatkan banyak gambar hiburan maupun yang lainnya.

Efek ini akan melakukan pekerjaan saat hadirin blog menjalankan klik kepada gambar didalam posting blog yang di tampilkan di lightbox maka pengaruh ini akan mengikutinya sebelum gambar tersebut timbul secara keseluruhan. Efek ini akan melakukan pekerjaan secara otomatis tanpa perlu ada markup komplemen didalam posting.

Lihat Demo

Persiapan :

Anda mesti mengaktifkan fitur lightbox resmi dari blogger.

1). Masuk ke Blogger lalu klik Pengaturan.

2). Klik Kiriman dan Komentar.

3). Klik Tampilkan gambar dengan Lightbox lalu klik Ya.

4). Terakhir klik Simpan Pengaturan.

Langkah-langkah :

1). Masuk ke akun blogger anda lalu klik Template

2). Klik Back up lalu klik Edit HTML.

3). Salin kode dibawah lalu letakkan tepat diatas kode ]]></b:skin>

Klik ganda untuk menyalin

 .CSS_LIGHTBOX_SCALED_IMAGE_IMG{  animation: punten;  -webkit-animation: punten;    animation-duration: 1s;   -webkit-animation-duration: 3s;   animation-timing-function: easeIn;   -webkit-animation-timing-function: ease;    visibility: visible !important;       } @keyframes punten {  0% {   transform: translateY(-100%);  }  50%{   transform: translateY(12%);  }  65%{   transform: translateY(-8%);  }  80%{   transform: translateY(8%);  }  95%{   transform: translateY(-4%);  }     100% {   transform: translateY(0%);  }   } @-webkit-keyframes punten {  0% {   -webkit-transform: translateY(-100%);  }  50%{   -webkit-transform: translateY(12%);  }  65%{   -webkit-transform: translateY(-8%);  }  80%{   -webkit-transform: translateY(8%);  }  95%{   -webkit-transform: translateY(-4%);  }     100% {   -webkit-transform: translateY(0%);  }  } .CSS_LIGHTBOX_SCALED_IMAGE_IMG { outline: 0px solid !important;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;-webkit-box-shadow: 0px 0px 5px ##333333;-moz-box-shadow: 0px 0px 15px #333333;box-shadow: 0px 0px 15px #333333; } .CSS_LIGHTBOX_BG_MASK { background-color: #ffffff !important;opacity: 0.8 !important; filter: alpha(opacity=90) !important; }

4). Jika anda belum mempunyai jQuery model modern silahkan salin model ini lalu tempatkan tepat di atas kode </head>

Klik ganda untuk menyalin

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'></script>

5). Ada 2 kode JavaScript yakni untuk template bawaan Blogger dan untuk template dari pihak ketiga atau kostum template. Salin kode sesuai dengan template yang anda pakai sekarang ini lalu pastekan tepat di atas </body>

(1). Template bawaan dari blogger

Klik ganda untuk menyalin

<script style="text/javascript"> $(&#39;#Blog1&#39;).click(function(){{$(&#39;.punten&#39;).addClass(&quot;CSS_LIGHTBOX_SCALED_IMAGE_IMG&quot;);}}); </script>

(2). Template dari pihak Ketiga

Klik ganda untuk menyalin

<script style="text/javascript"> $(&#39;#main-wrapper&#39;).click(function(){{$(&#39;.punten&#39;).addClass(&quot;CSS_LIGHTBOX_SCALED_IMAGE_IMG&quot;);}}); </script>

6). Klik Simpan Template.

Sekarang coba anda lihat, semua gambar yang ada diblog secara otomatis akan mempunyai animasi pengaruh ini pada saat hadirin menjalankan lightbox di blog anda. Kudos and Happy Coding!

Sumber https://8tutorialandroid.blogspot.com

Blogger