Tạo float search form cho blogger

Hôm nay 2/9 , Yolks có 1 thủ thuật ngon và mới lạ cho ae blogger của chúng ta xài , như bài viết trước

Tạo search form cơ bản

Thì 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é

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.

Demo

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/AVvXsEi63gI8jRRoTRYEG-3WGvpxRapZn1acutJ53-WKqdfhic3wrIqt9ehPxKHnHu-o7EHtj9g_Nsir6bBLYKAfGDR1dGHWMbc5YnJuYBdzJ2OlXagxYvyRztei4rlTLxtUVOwD5LnG-bgjzok/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;}

Ok con dê ! chúng ta tiếp tục với phần code thôi
2.Chèn code vào blog:
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 == &quot;&quot;) {this.value = &quot;Search my site...&quot;;}' onfocus='if (this.value == &quot;Search my site...&quot;) {this.value = &quot;&quot;}' 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ại
Lư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é