search-button
» » Membuat Efek Animasi Otomatis Pada Semua Gambar Lightbox Blogger

Nov 16, 2013

Membuat Efek Animasi Otomatis Pada Semua Gambar Lightbox Blogger

   
Advertisements
Advertisements
Bermain dengan kode animasi murni CSS3 selama satu jam akhirnya saya dapat mengimplementasikannya kedalam salah satu fitur yang ada di dalam template blogger. Kali ini target saya adalah semua gambar di posting blog yang ditampilkan di Lightbox resmi bawaan dari blogger. Saya membuat efek yang bisa membuat pengunjung blog anda tidak merasa bosan ketika  melihat-lihat terhadap gambar yang ada di blog anda dan efek ini sangat cocok untuk blogger yang menampilkan banyak gambar hiburan maupun yang lainnya.

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


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 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 memiliki jQuery versi terbaru silahkan salin versi 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 yaitu untuk template bawaan Blogger dan untuk template dari pihak ketiga atau kostum template. Salin kode 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 efek ini pada saat pengunjung melakukan lightbox di blog anda. Kudos and Happy Coding!
Share :

Komentar