
Cách tạo tiện ích tìm kiếm thông minh kiểu 2
Để 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/AVvXsEh2KoQju7UY1cP6_R0rdRk-1hIz_9avhwcPjPbF6Dpefw5b4-Lmhu63V9h7W_RcJ_vSjvY-KZ-9Kpaah-wDYmrhvRd-ZlD-T8Yq_YoHSCMNIlW2JJBA3kyL0gMgJGeCBui0vw8HUqg4TGU/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/AVvXsEj4x5HZtohq-HVAR6E5A_OLVZKAc0JRphaSJoqQEle3YT6tNZpnL-D9rrFpnf1Z3tRA7YnCwx5B15ldbU83mJcnR5fgxkLS6L0togyebVk-4sPZ2V7vT-SDasj-RSSfOf9QEJUZjRgrDAA/s1600/sform.png) no-repeat;
border:none;
font: normal 100% "Tahoma", Arial, Helvetica, sans-serif;
color:#C6C6C6;
}
#searchsubmit {
width:57px;
float: left;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEWRWBdpAvXcA8VTutOAmoKQkuHjPBddP27FeFpkQi_reJjgL9TNKDuXXgtU79YES7NtFrvBP4MJvBJ0TrRsU5T3K1BAvHGRawdUHiQJfxNdYspXMB0igqwY_-0r6p_dx-Ow3nA7HVGvM/s1600/sbutton.png);
border:none;
font: bold 100% "century gothic", 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