Searchbox đẹp giống Google cho blog

Stylish Search Box like Google for Blogger - Blogspot

Hôm nay mình xin giới thiệu một style searchbox (hộp tìm kiếm) đẹp, đơn giản giống style Google dành cho Blogger (xem hình trên).

Sau đây là các bước đưa searchbox vào blog của bạn:

Bước 1: Tại trang quản trị blog, các bạn vào Mẫu > Chỉnh sửa HTML, chèn đoạn code sau vào trước thẻ ]]></b:skin>:

#searchContainer {
margin:20px;
}
#field {
float:left;
width:200px;
height:27px;
line-height:27px;
text-indent:10px;
font-family:arial, sans-serif;
font-size:1em;
color:#333;
background: #fff;
border:solid 1px #d9d9d9;
border-top:solid 1px #c0c0c0;
border-right:none;
}
#delete {
float:left;
width:16px;
height:29px;
line-height:27px;
margin-right:15px;
padding:0 10px 0 10px;
font-family: "Lucida Sans", "Lucida Sans Unicode",sans-serif;
font-size:22px;
background: #fff;
border:solid 1px #d9d9d9;
border-top:solid 1px #c0c0c0;
border-left:none;
}
#delete #x {
color:#A1B9ED;
cursor:pointer;
display:none;
}
#delete #x:hover {
color:#36c;
}
#submit {
cursor:pointer;
width:70px;
height: 31px;
line-height:0;
font-size:0;
text-indent:-999px;
color: transparent;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj31XvtoWyd797GICOeELL9-dkXE9-HXRE4YiIbfOXml2eubeSQyT-ucB09IGMnFmSA9q23Ww4-G9bRJ6XVrEkmjDT7g-_wk6Y_oUaktMuiYwYqk4ncpQhcwDvt8-Z_5Mc98WFanW_Q4nc/s1600/ico-search.png) no-repeat #4d90fe center;
border: 1px solid #3079ED;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
#submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj31XvtoWyd797GICOeELL9-dkXE9-HXRE4YiIbfOXml2eubeSQyT-ucB09IGMnFmSA9q23Ww4-G9bRJ6XVrEkmjDT7g-_wk6Y_oUaktMuiYwYqk4ncpQhcwDvt8-Z_5Mc98WFanW_Q4nc/s1600/ico-search.png) no-repeat center #357AE8;
border: 1px solid #2F5BB7;
}
.fclear {clear:both}

Bước 2: Chèn đoạn code sau vào trước thẻ đóng </head>:

<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>
<script type='text/javascript'>
$().ready(function() {
// if text input field value is not empty show the "X" button
$("#field").keyup(function() {
$("#x").fadeIn();
if ($.trim($("#field").val()) == "") {
$("#x").fadeOut();
}
});
// on click of "X", delete input field value and hide "X"
$("#x").click(function() {
$("#field").val("");
$(this).hide();
});
});
</script>

Bước 3: Chèn đoạn code sau vào vị trí bạn muốn hiển thị searchbox và lưu template:

<div id="searchContainer">
<form name="SUYB" action="/search" method="get">
<input type="text" id="field" id="s" name="q"/>
<div id="delete"><span id="x">x</span></div>
<input type="submit" name="submit" id="submit" value="Search" />
</form>
</div>

Chúc các bạn thành công !