CITC - Tạo float search form cho blogger. Hầu như các thủ thuật float đầu sử dụng .js (điều này ai cũng bỡ ngỡ) nhưng sự thật float có thể sử dụng vài mã css là xong. Hôm nay Yolks đã nghĩ ra được 1 thủ thuật mới lạ , không kém phần độc đáo.Chúc đã hãy xem tiếp nhé.
1.Tạo bố cục bằng css:
.timkiemvds{
position:fixed;
top:36px;
left:-210px;
transition: all 3s ease-out; -webkit-transition: all 3s ease-out; -moz-transition: all 3s ease-out;
transition-delay: 3s; -webkit-transition-delay: 3s; -moz-transition-delay: 3s;
}
.timkiemvds:hover{
left:0px;
transition: all 1s ease-out; -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out;
}
.timkiemvds div.timkiem_1{
padding:14px 0 0 29px;
width:276px;
height:50px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjINDIcUU_RH2AU0YnQ44Spm8_8jSi9n6lwBq33xYw_la_yaE-xSS2YEhG5apdgOh8853X2QxcV0GkOYfD-wmQUxmLalrtzAxL01NkuR8P14Ul39hHOQGCAOVgeCx5huhfFr5KV06hI_NU/s1600/find10.png) top left no-repeat;
}
.timkiemvds div.timkiem_congcu{
position:relative;
overflow:hidden;
padding:5px;
left:35px;
width:153px;
height:10px;
background-color:#ffa200;
color: #ffffff;
border:1px solid #8A8A8A;
box-shadow: 3px 3px 3px #8A8A8A;
transition: all 1s ease-out; -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out;
transition-delay: 1s; -webkit-transition-delay: 1s; -moz-transition-delay: 1s;
}
.timkiemvds:hover div.timkiem_congcu{
height:150px;
transition: all 1s ease-out; -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out;
transition-delay: 1s; -webkit-transition-delay: 1s; -moz-transition-delay: 1s;
}
.noidungtimkiem{background-color:transparent; border:0; width:178px; height:20px;}
.submittimkiem{width:50px; background-color:transparent; border:0; cursor:pointer;}
chúng ta tiếp tục với phần code thôi2.Chèn code vào blog:
Chèn sau thẻ :
Chèn sau thẻ :
<div class='gensmall'>
<form action='/search' id='searchform' method='get' target='_blank'>
<div class='timkiemvds'>
<div class='timkiem_1'>
<input class='noidungtimkiem' id='s' name='q' onblur='if (this.value == "") {this.value = "Search my site...";}' onfocus='if (this.value == "Search my site...") {this.value = ""}' type='text' value='Search my site...'/>
<input class='submittimkiem' type='submit' value=''/>
</div>
<div class='timkiem_congcu'>
<center><strong>CÔNG CỤ TÌM KIẾM</strong></center>
</div>
</div>
</form>
</div>3.Save lạiLưu ý chúng ta có thể chỉnh thời gian chậm hoặc nhanh ở css nhé chỗ nào có 1s hay 3s các bạn hãy chỉnh theo ý thích nhé
Story by Christian ICT
Tags: THỦ THẬT BLOGSPOT
