28 November 2012

Tutorial : Shaking Header Hover


السّلا م عليکم ورحمةالله وبرکة | Salam Sejahtera :)

Ramai request di ask.fm dan di blog. So, here we go. Ohya. ni untuk Template Designer (denim, simple template dan lain-lain). Kalau korang pengguna blogskin/classic template sorry eh.

Sorry. No preview available

Template Designer :
1- Blogger > Dashboard > Template > Proceed
2. Search kod ni
h1.title {
Kalau tak jumpa kod tu, korang search code ni pulak
.Header h1 { 
*kalau korang dah ada kod header hover, boleh delete hover tu okay.

3. Paste kod ni kat atas h1.title { atau .Header h1 { ye

.header:hover {
-webkit-animation-name: shake;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
filter: none;
-webkit-filter: blur(0px);-moz-filter:blur(0px);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');}
@-moz-keyframes shake /* Firefox*/
{
{ -ms-transform:: translate(-1px, -2px) rotate(-1deg); }
 20% { -moz-transform: translate(-3px, 0px) rotate(1deg); }
 30% { -moz-transform:  translate(0px, 2px) rotate(0deg); }
 40% { -moz-transform:  translate(1px, -1px) rotate(1deg); }
 50% { -moz-transform:  translate(-1px, 2px) rotate(-1deg); }
 60% { -moz-transform:  translate(-3px, 1px) rotate(0deg); }
 70% { -moz-transform:  translate(2px, 1px) rotate(-1deg); }
 80% { -moz-transform:  translate(-1px, -1px) rotate(1deg); }
 90% { -moz-transform: translate(2px, 2px) rotate(0deg); }
 100% { -moz-transform:  translate(1px, -2px) rotate(-1deg); }
}
@-ms-keyframes shake /* IE9*/
{
10% { -ms-transform:: translate(-1px, -2px) rotate(-1deg); }
 20% { -ms-transform: translate(-3px, 0px) rotate(1deg); }
 30% { -ms-transform: translate(0px, 2px) rotate(0deg); }
 40% { -ms-transform: translate(1px, -1px) rotate(1deg); }
 50% { -ms-transform: translate(-1px, 2px) rotate(-1deg); }
 60% { -ms-transform: translate(-3px, 1px) rotate(0deg); }
 70% { -ms-transform: translate(2px, 1px) rotate(-1deg); }
 80% { -ms-transform: translate(-1px, -1px) rotate(1deg); }
 90% { -ms-transform: translate(2px, 2px) rotate(0deg); }
 100% { -ms-transform: translate(1px, -2px) rotate(-1deg); }
}
@-webkit-keyframes shake /* Safari and Chrome */
{
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
 10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
 20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
 30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
 40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
 50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
 60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
 70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
 80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
 90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
 100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}
4. Preview. kalau tak ada apa-apa error boleh Save.

Jadi tak? :)
DONT RE-POST. tq
author image

FAQIHAH HUSNI

Hi! I'm the writer and author of this webpage. Currently studying in SM Sains Kubang Pasu or know as KUPSIS in Kedah. A Kedahan girl for sure! 2017 is my senior year there and I'm fighting to 9A+ in SPM. Do pray the good result for me and others 1317 warriors. Thank you for your time :)

14 comments:

  1. Dah lama tunggu tuto ni. Thanxx Kihah :3

    ReplyDelete
  2. adik qihah.. thanks for this tuto. sy guna ye. lama dah cari :)

    ReplyDelete
  3. Terimakasih informasi nya gan, sangat bermanfaat :)
    nice post :)
    ditunggu kunjungan baliknya yaah ,

    ReplyDelete
  4. thank you qihah buat tutor ni dah lame dah michan tunggu :)

    ReplyDelete
  5. terima kasih kihah!! da lame cari tuto nih!! :D

    ReplyDelete
  6. Awesome gila tutorial ni! Thanks ;)

    ReplyDelete
  7. Terima kasih Kihah sebab buat tutorial ni ;)

    ReplyDelete
  8. Wahh.. thanks , dah jadi.. hii !

    ReplyDelete

Budi Bahasa Budaya Kita