Saturday, August 4, 2012

Tutorial : Header Hover (Kebawah)

Tumblr_m632957yi91r5evtyo1_500_large
Hari ni bosanlah . So atin nak share kat korang buat header hover .. Kali ni hover ke bawah .. Macam biasalah . bila cursor berada kat header . nnti vover ke bawah , like that? ><


BLOGSKIN

 Dashboard > Template > Edit HTML
 Press Ctrl + f (serentak) dan cari code <head>
 Then , cari code bahagian header korang. 
     Contoh :
 <center><img src="URL HEADER" /></center> 
 Jumpa?korang tukarkan code tu kepada code ni
<center><img class="header" src="URL HEADER" /></center> 
 Then tekan Ctrl + f dan cari code ni </style> pulak
 Copy code dekat bawah ni
.header {
text-align: center;
-webkit-transition: 1.0s;
}
.header: hover {
padding-top:40px;
-webkit-transition-duration: 2.5s;
}
 Paste di atas code </style> tadi 
 Preview & save
  

.......................................................................................................................................................


DESIGN

 Dashboard > Design > Edit HTML 
 Press Ctrl + f (serentak) dan cari code #header {
 Dah? tukar code tu kepada code bawah ni
#header {
text-align: center;
-webkit-transition: 1.0s;
}
#header:hover {
padding-top:40px;
-webkit-transition-duration: 2s;
}
 Kalau takda code #header { . Paste sebelum code h1.title { tau.
 Preview & save

credit : Yana


No comments: