Tạo hộp tìm kiếm chuyên nghiệp với Google Search cho Blogspot

Tweet

Với người thiết kế Blogspot, thì điểm hạn chế lớn nhất của chức năng tìm kiếm là chưa tìm kiếm từ khóa chính xác. Nếu bạn muốn tìm kiếm từ khóa trên Website với bộ Search mặc định do Google cung cấp. Thì bạn khó có thể đạt được như ý muốn với từ khóa là Tiếng Việt, Tôi ví dụ, bạn muốn Tìm kiếm nội dung là Thiết kế Web trên ThaiAiTi.com mà bạn gõ Thiet ke Web thì hoàn toàn không thể tìm kiếm được nội dung bạn cần. Hiểu được điều đó, ThaiAiTi.com xin chia sẻ với người dùng và cộng đồng Blogspot cách tích hợp trình tìm kiếm của Google có tên là Google Search Custom.





View Demo


Cách thực hiện như sau:
(Đối với người thiết kế Blogspot chuyên nghiệp)

- Bước 1: Bạn cần tạo 1 trang Page có đường dẫn là /p/thaiaiti-ang-tim-kiem-tu-khoa-ban-nhap.html
Ở trình soạn thảo bài viết của Blogspot, bạn chuyển sang chế độ HTML và chèn đoạn code bên dưới vào bên trong:

<div id="cse-search-results">
</div>
<script type="text/javascript">
var googleSearchIframeName = "cse-search-results";
var googleSearchFormName = "cse-search-box";
var googleSearchFrameWidth = 600;
var googleSearchDomain = "www.google.com";
var googleSearchPath = "/cse";
</script>
<script src="http://www.google.com/afsonline/show_afs_search.js" type="text/javascript">
</script>
- Bước 2: Chèn đoạn code sau vào nơi bạn cần hiển thị hộp Search:

<div class='search'>
<form action='/p/thaiaiti-ang-tim-kiem-tu-khoa-ban-nhap.html' id='searchform'>
<input name='cx' type='hidden' value='011399017997017716468:sv8nldeixuq'/>
<input name='cof' type='hidden' value='FORID:10'/>
<input name='ie' type='hidden' value='UTF-8'/>
<p><input class='tbsearch inputSearch' id='q' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onclick='var q = $(&quot;q&quot;);if (q.value == q.getAttribute(&quot;placeholder&quot;)) {q.focus(); return false;}' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' placeholder='' type='text' value='Nhập từ khóa để tìm kiếm...'/>
<input checked='checked' class='btnsearch' name='sitesearch' type='submit' value='http://www.thaiaiti.com/'/></p>
</form>  
</div> 
- Bước 3: Chèn đoạn CSS sau trên ]]></b:skin>

.search {
position: relative;
height: 35px;
overflow: hidden;
float: left;
margin-left: 10px;
border: 1px solid #ddd;
background: #fff;
border-radius: 3px;
margin-top: 10px;
margin-bottom: 10px;
}
.search p {margin: 0;padding: 0;}
.tbsearch {
display: block;
width: 220px;
height: 35px;
float: left;
background: transparent;
padding: 0 10px;
line-height: 26px;
color: #555;
font: 14px arial;
border: none;
border-right: none !Important;
}
.tbsearch:hover {
color: #000;
}
.btnsearch {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzIiFcDapt_ucaswidYduzSVwMBHBYgECVXg38bmwPalS-mbOaItcOYyP4KcDNTXtz6kvIV3TL9-iZVg9rt0mjFcSGQRaRF09uUhnibya3Tbmy-yloq0MWZpTrKoQ_vKL23Rv-wATiM4YI/s0/timkiem_01.png) no-repeat;
height: 35px;
width: 40px;
float: right;
background-position: 10px 5px;}
div#hoptimkiem-thaiaiti123 {
float: left;
}
.btnsearch{font-size: 0px;color: white;display: block;}
.btnsearch{border: none;}
.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úc bạn thực hiện thành công! Mọi thắc mắc vui lòng để lại comment phía dưới.
ThaiAiTi.com - Đơn vị Thiết kế Web chuyên nghiệp theo yêu cầu tại Hà Nội
- Cung cấp giải pháp thiết kế Web đám mây Google Blogspot
1 Lần thiết kế sử dụng Vĩnh viễn, không mất tiền thuế Host hàng tháng. Xem chi tiết.