a:hover {
transform: rotate(7deg);
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
a:hover {
transform: rotate(7deg);
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
a:link {
transition: transform .5s ease-in;
-moz-transition: -moz-transform .5s ease-in;
-o-transition: -o-transform .5s ease-in;
-webkit-transition: -webkit-transform .5s ease-in;
a:link {
transition: transform .5s ease-in;
-moz-transition: -moz-transform .5s ease-in;
-o-transition: -o-transform .5s ease-in;
-webkit-transition: -webkit-transform .5s ease-in;
]]></b:skin>4) Kemudian copy paste kod di bawah sebelum kod ]]></b:skin> yang korang cari tadi:
.post img{
transition: transform .5s ease-in;
-moz-transition: -moz-transform .5s ease-in;
-o-transition: -o-transform .5s ease-in;
-webkit-transition: -webkit-transform .5s ease-in;
}
.post img:hover{
transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
.post img{
transition: transform .5s ease-in;
-moz-transition: -moz-transform .5s ease-in;
-o-transition: -o-transform .5s ease-in;
-webkit-transition: -webkit-transform .5s ease-in;
}
.post img:hover{
transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
]]></b:skin>
Preview:
Tutorial kali ini akan menunjukkan cara macam mana nak buat efek senget pada Bloquote
apabila di sentuh cursor, seperti dalam preview di atas. Ikuti tutorial
di bawah step by step. Sebelum itu, kepada sesiapa yang tak tahu cara
nak pasang kotak pada petikan blockquote, sila rujuk tutorial ini atau untuk pengguna simple template, rujuk tutorial ini.
1) Sign in akaun blogger
2) Dashboard > Design > Edit HTML
3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod
.post blockquote {atau kod di bawah
blockquote:hover {
blockquote:hover {
-webkit-border-radius: 36px 12px;
-moz-border-radius: 36px 12px;
-webkit-transform: skew(1.deg,1.5deg);
-moz-transform: rotate(3deg);
-webkit-transform: rotate(3deg); }
border:2px dashed #000000;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
}
Untuk membuat kesan khas pada gambar seperti preview di atas, sila ikuti tutorial di bawah:
1) Login akaun blogger anda
2) Dashboard > Design > Edit HTML > Backup template terlebih dahulu (untuk lagkah berjaga-jaga)
3) Tekan ctrl + F serentak, cari kod
/* Headingsatau
/* Header
a img {
-webkit-transition-duration:.4s;}
img:hover {filter: alpha(opacity=60);
opacity: .9.9;
border-radius:50px;
border: 1px #FF66CC;
-webkit-box-shadow: 0px 0px 20px #FF66CC;
-moz-box-shadow: 0px 0px 20px #FF66CC;
}
a img {
-webkit-transition-duration:.4s;}
img:hover {filter: alpha(opacity=60);
opacity: .9.9;
border-radius:50px;
border: 1px #FF66CC;
-webkit-box-shadow: 0px 0px 20px #FF66CC;
-moz-box-shadow: 0px 0px 20px #FF66CC;
}
/*Header
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script><script type='text/javascript'> $(document).ready(function() { $('a').hover(function() { $(this).animate({ marginLeft: '10px' }, 400); }, function() { $(this).animate({ marginLeft: 0 }, 400); }); });</script>400 - speed / laju efek nudging. Korang boleh adjust nilai ni untuk kelajuan efek, lagi kecik nilai, lagi laju efek goyang.
0 komentar