Membuat Dampak Animasi Otomatis Pada Semua Gambar Lightbox Blogger

Bermain dengan aba-aba animasi murni CSS3 selama satu jam hasilnya saya sanggup mengimplementasikannya kedalam salah satu fitur yang ada di dalam template blogger. Kali ini sasaran saya ialah semua gambar di posting blog yang ditampilkan di Lightbox resmi bawaan dari blogger. Saya menciptakan dampak yang sanggup menciptakan pengunjung blog anda tidak merasa bosan ketika  melihat-lihat terhadap gambar yang ada di blog anda dan dampak ini sangat cocok untuk blogger yang menampilkan banyak gambar hiburan maupun yang lainnya.

Efek ini akan bekerja ketika pengunjung blog melaksanakan klik terhadap gambar didalam posting blog yang di tampilkan di lightbox maka dampak ini akan mengikutinya sebelum gambar tersebut muncul secara keseluruhan. Efek ini akan bekerja secara otomatis tanpa perlu ada markup pelengkap didalam posting.

Lihat Demo

---

Persiapan :

---

Anda harus mengaktifkan fitur lightbox resmi dari blogger.

1). Masuk ke Blogger kemudian klik Pengaturan.

2). Klik Kiriman dan Komentar.

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

4). Terakhir klik Simpan Pengaturan.

---

Langkah-langkah :

---

1). Masuk ke akun blogger anda kemudian klik Template

2). Klik Back up kemudian klik Edit HTML.

3). Salin aba-aba dibawah kemudian letakkan sempurna diatas aba-aba ]]></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 versi terbaru silahkan salin versi ini kemudian tempatkan sempurna di atas aba-aba </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 aba-aba JavaScript yaitu untuk template bawaan Blogger dan untuk template dari pihak ketiga atau kostum template. Salin aba-aba sesuai dengan template yang anda gunakan ketika ini kemudian pastekan sempurna 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 dampak ini pada ketika pengunjung melaksanakan lightbox di blog anda. Kudos and Happy Coding!

Share this post