Bermain dengan arahan animasi murni CSS3 selama satu jam balasannya 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 mengerjakan 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 pemanis didalam posting.
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 arahan dibawah lalu letakkan tepat diatas arahan ]]></b:skin>
4). Jika anda belum mempunyai jQuery model modern silahkan salin model ini lalu tempatkan tepat di atas arahan </head>
5). Ada 2 arahan JavaScript yakni untuk template bawaan Blogger dan untuk template dari pihak ketiga atau kostum template. Salin arahan sesuai dengan template yang anda pakai sekarang ini lalu pastekan tepat di atas </body>
(1). Template bawaan dari blogger
(2). Template dari pihak Ketiga
6). Klik Simpan Template.
Sekarang coba anda lihat, semua gambar yang ada diblog secara otomatis akan mempunyai animasi pengaruh ini pada saat hadirin mengerjakan lightbox di blog anda. Kudos and Happy Coding!
Efek ini akan melakukan pekerjaan saat hadirin blog mengerjakan 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 pemanis didalam posting.
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 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 mempunyai jQuery model modern silahkan salin model 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 yakni untuk template bawaan Blogger dan untuk template dari pihak ketiga atau kostum template. Salin arahan 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"> $('#Blog1').click(function(){{$('.punten').addClass("CSS_LIGHTBOX_SCALED_IMAGE_IMG");}}); </script> (2). Template dari pihak Ketiga
Klik ganda untuk menyalin
<script style="text/javascript"> $('#main-wrapper').click(function(){{$('.punten').addClass("CSS_LIGHTBOX_SCALED_IMAGE_IMG");}}); </script> 6). Klik Simpan Template.
Sekarang coba anda lihat, semua gambar yang ada diblog secara otomatis akan mempunyai animasi pengaruh ini pada saat hadirin mengerjakan lightbox di blog anda. Kudos and Happy Coding!