Nhân dịp lần này rảnh, mình đang bõ tách dần giao diện trang chủ của mình để share cho mọi người, Share mẫu hộp tìm kiếm giống thaiaiti.com đẹp,
Cách làm:
- Chèn đoạn CSS sau trên ]]></b:skin>
.search {position: relative;float:left;height: 0;margin-top: -14px;margin-left: -75px;}.search p {overflow:hidden;height:24px;margin-top:5px;float:left;margin-left:15px;margin:20px 0 0 75px;border:1px solid #ccc;background:#f5f5f5;border-radius:3px;}.tbsearch {display: block;width:250px;height:24px;background:transparent;border: none;float: left;padding: 0 10px;color: #999;}.btnsearch {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi40C4IhjVCXLpbzkuR02dEGKHLjZV459hCVtdw5Nn60IofOJ2LSPq8ITFqI10RkGfA3GpBTUa-0sgN7FwAPv9Nih_nsGYy4YeeyrPzqlZShsTBcA8HIdasOfqxlv2Om6eWzntmleRMoCzE/s31/search.PNG) no-repeat;height: 32px;width:30px;float: right;}.btnsearch{font-size: 0px;color: white;display: block;}.btnsearch{border: none;margin: 0;}.btnsearch:hover {cursor: pointer;}.search-autocomplete {position: absolute;top: 35px;left: 146px;z-index: 99999;width: 345px;border: 1px solid #B3B3B3;}.search-item h3 {padding: 10px 0 0 10px;float: left;}.search-item ul {float: right;width: 75%;border-left: 1px solid #dfdfdf;border-bottom: 1px solid #dfdfdf;background-color: #f2f2f2;}.search-for {border-bottom: 1px solid #dfdfdf;padding: 5px 15px;display: block;}.search-item a {padding: 5px;display: block;}.search-item a:hover {background-color: #8E59A9;}.search-item span {display: block;}.search-img {float: left;margin-right: 5px;padding: 2px;}- Chèn đoạn code bên dưới vào chỗ bạn cần hiển thị:
<div class='search'>
<form action='/search' id='searchwrapper form' method='get' style='font-family: "lucida grande",tahoma,verdana,arial,sans-serif; color: #333;font-size:11px;'><p>
<input class='tbsearch inputSearch' id='q' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onclick='var q = $("q");if (q.value == q.getAttribute("placeholder")) {q.focus(); return false;}' onfocus='if(this.value==this.defaultValue)this.value='';' placeholder='Gõ từ cần tìm rồi chờ tý nhé' type='text' value='Tìm kiếm...'/>
<input checked='checked' class='btnsearch' name='sitesearch' title='Tìm kiếm' type='submit' value='http://www.thaiaiti.com/'/></p>
</form>
</div>
- ThaiAiTi - chúc bạn thành công !, vui lòng để lại lời nhắn để tác giả có thêm động lực share
nhìn dòng code mà hoảng :@@
Trả lờiXóa