Tutorial : Post title Hover

Sebelum Hover

Selepas Hover

Nak buat tak post tittle cam tu? Kalau nak, ikut step step berikut ...

1) Log in > Dashboard > Design > Edit Html > Search code ni..

h3.post-title,.comments h4 { 

atau

h4 {

atau 

h3.post-title {

2) Kalau dah jumpa, copy pulak code bawah ni dan paste kan di bawah code yang korang cari tadi..


margin: 10px;
padding: 6px;
font-size: 16px;
font-color: #000000;
text-align: center;
background-image: url(http://www.drikoti.blogger.com.br/back02.gif);
border-top: 1px dashed #D0A9F5;
border-bottom: 1px dashed #D0A9F5;
border-right: 6px solid #D0A9F5;
border-left: 6px solid #D0A9F5;
-webkit-transition-duration: 0.5s;
}
h3.post-title:hover {
background: #ffffff;
border-left: 4px solid #D0A9F5;
border-right: 4px solid #D0A9F5;
-webkit-border-radius: 36px 12px;
-moz-border-radius: 36px / 12px;
-webkit-transform: skew(-1.deg,-1.5deg);
-webkit-transition: 0.5s;
}

3) Preview dulu, kalau tak ada error, terus save!

Merah : Kod warna post title
Pink : Url background post title
Orange : Warna border post title (sebelum hover)
Biru : Warna background post title selepas hover
Hijau : Border Post title (selepas hover)

#Boleh cari kod warna di sini!

2 comments:

  1. Macam mana nak buat macam sebelum hover tu?

    ReplyDelete
    Replies
    1. Kalau nak buat sebelum hover, copy code ni je >

      margin: 10px;
      padding: 6px;
      font-size: 16px;
      font-color: #000000;
      text-align: center;
      background-image: url(http://www.drikoti.blogger.com.br/back02.gif);
      border-top: 1px dashed #D0A9F5;
      border-bottom: 1px dashed #D0A9F5;
      border-right: 6px solid #D0A9F5;
      border-left: 6px solid #D0A9F5;
      -webkit-transition-duration: 0.5s;
      }

      Delete