Tạo 1 Search Form bằng css cho blogger

Trong 1 blog, khung tìm kiếm là 1 phần quan trọng để khách có thể tìm kiếm 1 bài viết mình thích hoặc 1 bài viết không dễ dàng tìm thấy.Nhưng có vẻ khung tìm kiếm lại nhiều người gạc bỏ qua 1 bên chẳng thèm nhìn tới nữa, lại 1 sai lầm không đáng có cho blog ấy,còn nếu chúng ta add nó vào blog sự việc lại trở nên dễ dàng, và có 1 lượng khách ổn định không tăng không giảm.


Trước tiên chúng ta cần tìm hiểu nó để có thể dễ dàng sử dụng.
Có thể nói Search Form là 1 thứ dễ dàng tạo ra trong blog, nhưng nó không được bắt mắt và đẹp, để có thể ngay ấn tượng với khách viết thăm chúng ta cần phải có gì đó làm cho khách phải ngạc nhiên.Hôm nay Yolks giới thiệu Search Form chỉ cần 1 hình ảnh và chút css là chúng ta có thể làm được ^^.
Với sự chỉnh sửa này Yolks quyết định không dùng hình ảnh nhiều mà ngược lại nên sử dụng thẻ <button>
,và tạo css để làm nền cho khung tìm kiếm . Chúng ta hãy làm thử nhé.

Demo chính là blog này ^^

Bước 1: Thêm css

Đầu tiên chúng ta vào phần chỉnh sửa html

 

 Sau đó tìm :

]]></b:skin>

rồi copy đoạn code sau đây vào trước nó:

fieldset.search{border:none;width:243px;margin:0 auto;background:#fff}.search input,.search button{border:none;float:left}.search input.box{color:#fff;font-size:1.2em;width:190px;height:30px;padding:8px 5px 0;background:#616161 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglDafWqPS4TfemVXnTC86VsiI_BJYKUlaadcqmpewoLcCrg4dy0MyL4RKyObPE9HjUS09qAScqeHMFD3thQ_95Tsjygh7BHCHU4LqBA7BYvk9UR7Aoww8Sd0fDghC7qahhBuY2_BMrO3A/s1600/search_bg.gif) no-repeat;margin-right:5px}.search input.box:focus{background:#616161 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglDafWqPS4TfemVXnTC86VsiI_BJYKUlaadcqmpewoLcCrg4dy0MyL4RKyObPE9HjUS09qAScqeHMFD3thQ_95Tsjygh7BHCHU4LqBA7BYvk9UR7Aoww8Sd0fDghC7qahhBuY2_BMrO3A/s1600/search_bg.gif) no-repeat left -38px;outline:none}.search button.btn{width:38px;height:38px;cursor:pointer;text-indent:-9999px;background:#fbc900 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglDafWqPS4TfemVXnTC86VsiI_BJYKUlaadcqmpewoLcCrg4dy0MyL4RKyObPE9HjUS09qAScqeHMFD3thQ_95Tsjygh7BHCHU4LqBA7BYvk9UR7Aoww8Sd0fDghC7qahhBuY2_BMrO3A/s1600/search_bg.gif) no-repeat top right}.search button.btn:hover{background:#fbc900 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglDafWqPS4TfemVXnTC86VsiI_BJYKUlaadcqmpewoLcCrg4dy0MyL4RKyObPE9HjUS09qAScqeHMFD3thQ_95Tsjygh7BHCHU4LqBA7BYvk9UR7Aoww8Sd0fDghC7qahhBuY2_BMrO3A/s1600/search_bg.gif) no-repeat bottom right}

Đề nghị không nên chỉnh độ rông, có thể nó sẽ rất khó chịu,mình canh thế là chuẩn rồi.Đoạn mã màu được bôi đậm ý nghĩa là; nếu như blog bạn màu đen thì chuyển #fff qua thành #000 chẳng hạn.Nói chung để ở đâu nên đặt mã màu cho trùng hợp với temp của bạn

Bước 2: Add code

Tiếp tục trong temp chúng ta tìm:

<div id='sidebar-wrapper'>

Add đoạn sau đây vào trước nó:

<form action='/search' id='searchform' method='get'>
<fieldset class='search'>
    <input class='box' id='s' name='q' type='text' value=''/>
    <button class='btn' title='Submit Search'>Tìm kiếm</button>
</fieldset>
</form>    

Ngoài ra chúng ta có thể tạo 1 tiện ích html để add code trên vào nơi nào cũng được
Lưu ý: Chúng ta sẽ bị lỗi ở ie nên chúng ta nên add thêm code sau vào 1 file .css riêng trên host:

<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

Trong file .css chúng ta add đoạn code sau:

.search input.box {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8bCEcDHatqPsVxAREBGJ99E0kYxJ7lfvYons0r95sfQnZAzfdz12kAqp20VlDAK5Aci-srDuBc1eeBILganIDzTgSf9mbzGJL_Jy8njupwKpviTl00eHMdbsWXgItYyZZfshR4byBb-U/s1600/search_bg_ie.gif) no-repeat right bottom;
}

Chúng ta có thể yên tâm rồi vì khi cài máy sẽ tự nâng cấp lên ie8 thôi ^^ code trên sẽ hỗ trợ cho ie 6+7