20 December 2011

Tutorial buat gambar, link, header bergerak senget

Assalamualaikum w.b.t ,
I'm back after years(xsampai pun) xbukak blog ni..
Hrmm, hari ni nak kongsi tutorial dgn korg pasal cara2 buat link,header dan gambar2 dlm blog korang menyenget apabila disentuh oleh cursor(On Mouse Hover)....
(try la kat letak cursor kat header aku tu and gambar kat bwh ni)
Ok suka??? Jom lah try buat
Bahan2nya ialah, sebuah blog, sebuah header bergambar, seorang penulis blog yg rajin edit blog, dan sedikit kesabaran... :P

Ok cara2 membuatnya pula ialah..

  1. Buka blog kesayangan anda.
  2. Klik Design >> Edit HTML >> Tick Expand Widget Template . [ DOWNLOAD FULL TEMPLATE DAHULU BAGI BACKUP]
  3. cari kod " a:link { "  ~~click CTRL dan F utk cari kod tu dgn senang~~~
  4. masukkan kod kat bwah ni dibawah kod " a:link{ " tu.
transition: transform 1.6s ease-in;
-moz-transition: -moz-transform 1.6s ease-in;
-o-transition: -o-transform 1.6s ease-in;
-webkit-transition: -webkit-transform 1.6s ease-in;
 
 tukar kod  warna kuning tu dengan angka2 yg korang suka utk kelambatan perubahan menyenget tu
semakin tinggi nilai kuning tu, semakin lambat la die menyenget..

      5. lepas tu cari kod " a:hover { " 
      6. masukkan kod kat bawah ni dibwh kod "a:hover {" tu.


transform: rotate(6deg);
-moz-transform: rotate(6deg);
-o-transform: rotate(6deg);
-webkit-transform: rotate(6deg);
tukar kod warna biru, dengan angka2 yg korg suka untuk tahap kesengetan link korang,,, semakin tinggi nilai angka tu semakin btambah senget link korg,,  Try and error lah ye..

     7. utk hover gambar dlm post pulak .. cari kod " .post img{ "
     8. masukkan kod2 kat bawah ni dibawah kod ".post img{ " tadi..
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;
tukar angka .5 warna biru tu dengan 1.0 ker, 1.5 ker, .6 ker .. ikut suka korg la,, semakin besar nilai angka tu,, semakin lama lah perubahan menyenget tu berlaku.. 

     9. Selepas kod ".post img{" tu, korg tambah kod kat bwh ni...
.post img:hover{
transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
}
tukar kod warna biru kat atas ni dengan angka2 yg korg suka untuk tahap kesengetan gambar korg.. cth : 20, 15, 30..... 


Korang akan dapat kod .post img{ korg mcm kat dlm gambar bwh ni..



       10.Selepas tu "Save Template" and biew blog korang.. jadi x????

Ok tu shj ,,, bye,, :D

Syukran 'ala kulli haal. From your friend, moha_mohu

0 ,581 mengulas:

Post a Comment