Membuat Efek Animasi Otomatis Pada Semua Gambar Lightbox Blogger

Bermain dengan arahan animasi murni CSS3 selama satu jam alhasil saya mampu 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 membuat imbas yang mampu membuat pengunjung blog anda tidak merasa bosan saat  melihat-lihat terhadap gambar yang ada di blog anda dan imbas ini sangat cocok untuk blogger yang menampilkan banyak gambar hiburan maupun yang lainnya.

Efek ini akan bekerja saat pengunjung blog melakukan klik terhadap gambar didalam posting blog yang di tampilkan di lightbox maka imbas ini akan mengikutinya sebelum gambar tersebut muncul secara keseluruhan. Efek ini akan bekerja secara otomatis tanpa perlu ada markup aksesori didalam posting.

Lihat Demo

---

Persiapan :

---

Anda harus 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 arahan dibawah lalu letakkan tepat diatas arahan ]]></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 memiliki jQuery versi terbaru silahkan salin versi ini lalu tempatkan tepat di atas arahan </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 arahan JavaScript yaitu untuk template bawaan Blogger dan untuk template dari pihak ketiga atau kostum template. Salin arahan sesuai dengan template yang anda gunakan saat 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 memiliki animasi imbas ini pada saat pengunjung melakukan lightbox di blog anda. Kudos and Happy Coding!

Sumber https://8tutorialandroid.blogspot.com/

Share this post