Friday, July 5, 2013

Tiện ích tìm kiếm thông minh cho blogspot-kiểu 2

, Edit This
Đây là hộp tìm kiếm nội tuyến-tìm kiếm trong phạm vi blog.Tuy về hình thức không được bắt mắt lắm nhưng nó phù hợp với blog có nền tối.Mình cứ post lên đây có lẽ sẽ có người cần chẳng đến nỗi ế ^^
Cách tạo tiện ích tìm kiếm này
Để khỏi phải can thiệp vào template ta gộp 2 phần là CSS và HTML làm một và tiến hành thêm 1 tiện ích và đặt tiện ích tại vị trí phù hợp với blog của bạn
Code:
<style type='text/css'>
#search {
height:34px;
width:auto;
margin-top:10px;
padding:17px 5px 10px 15px;
width:311px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZxkOVv66Tgb-KV0M62qE1irTUIzlRdig4PCOs0TWWcvz3nicgEK2RmAd99yKtSfWDBViid-exlnuiY8ywGO7nxs8FTpCAUZ8lvyFkknp1ytzLLkBLwoBHZSoNoggtuX7692RRL53EuHE/s1600/search.png);
}
#search form {
margin: 0;
padding: 0;
}

#search fieldset {
margin: 0;
padding: 0;
border: none;
}

#search p {
margin: 0;
font-size: 85%;
}

#s {
margin-left:0px;
float: left;
width:231px;
padding: 6px 2px 6px 5px;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUucwG_kI4cwcH_YTnQY5HPDfLQqtax9TLnN1IuqqrI_F6hwg9Zdrq08zE-mg6gDJ1FJPEcU-BEJxGTE5szlf2-ruJ2s8LvhW4BOH_p1jKzsyCFXRJlAEhofYSsB9B8w-QKFyQ_UsDUqE/s1600/sform.png) no-repeat;
border:none;
font: normal 100% &quot;Tahoma&quot;, Arial, Helvetica, sans-serif;
color:#C6C6C6;
}

#searchsubmit {
width:57px;
float: left;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif3Q2ofDBBgoV2oU8gj_15qIUB8QXXAYGiFkv-_TgvgPD_egCDMOU2WaL6PbH6g-3sYwK1vD8bvmSHhXAzmOONbNNGgB2FKQ9Zzbu5KSKhM75zwid65uQgnBhz4nuw3-McJk4fTYOIqfU/s1600/sbutton.png);
border:none;
font: bold 100% &quot;century gothic&quot;, Arial, Helvetica, sans-serif;
color: #FFFFFF;
height:28px;
margin-left:5px;
}

</style>
<div id='search'>
<form id="searchform" action="http://kartriderdautocrazy01.blogspot.com/search" style="display:inline;" method="get">
<input id="s" name="q" type="text" value=""/>
<input id="searchsubmit" value="" type="submit"/>
</form>
</div>
Thay đoạn bôi đỏ thành URL blog của bạn