Nhúng Google Custom Search vào Web/Blog

Search Engine (SE) là một tiện ích rất quan trọng và không thể thiếu đối với bất kỳ một Web/Blog nào, giúp người đọc dễ dàng tìm kiếm nội du...

Nhúng Google Custom Search vào Web/Blog
Search Engine (SE) là một tiện ích rất quan trọng và không thể thiếu đối với bất kỳ một Web/Blog nào, giúp người đọc dễ dàng tìm kiếm nội dung trên đó một cách nhanh chóng.
Mặc dù Google đã cung cấp ô tìm kiếm (Search Box) như một tiện ích bổ sung cho Blogspot, nhưng có những hạn chế như khó tùy biến (giao diện, vị trí hiển thị kết quả), dòng quảng cáo “được cung cấp bởi Google” nhìn rất “chướng mắt”.he...he...
Nhúng Google Custom Search vào Web/Blog
Trong khi các SE được tích hợp trong các template miễn phí thì dường như hoạt động không mấy hiệu quả, gây nhiều khó khăn cho người sử dụng.
Vậy làm thế nào để tạo một SE có thể khắc phục được tất cả những hạn chế trên ?
Trong bài viết dưới đây, iTechPlus sẽ từng bước hướng dẫn các bạn nhúng bộ máy tìm kiếm đầy mạnh mẽ của Google vào Web/Blog, sử dụng Google Custom Search Engine.
1. Tạo và cấu hình Google Custom Search Engine
Bước 1 : Chọn cách thức tìm kiếm
- Đầu tiên, các bạn truy cập vào địa chỉ sau : http://www.google.com/cse/ và nhấn vào Creat a Custom Search Engine.
Nhúng Google Custom Search vào Web/Blog
- Điền vào thông tin yêu cầu như hình dưới
Nhúng Google Custom Search vào Web/Blog
Trong đó, tại mục Define your search engine các bạn cần lưu ý các tùy chọn :
  • Individual pages (trang cá nhân): chỉ tìm kiếm trên một trang cụ thể, nhập vào liên kết có dạng  : www.mysite.com/mypage.html
  • Entire sites: tìm kiếm toàn bộ Web/Blog, nhập vào liên kết có dạng: www.mysite.com/*
  • Parts of sites: tìm kiếm chỉ một số phần của trang web, nhập vào liên kết có dạng :www.mysite.com/*keyword*
  • Entire domains: tìm kiếm toàn bộ miền (domain), nhập vào liên kết có dạng : *.mydomain.com
- Tiếp theo, đánh dấu (check) vào dòng I have read and agree to the Terms of Service và nhấn Next.
Bước 2 : Chọn Style và tùy biến việc hiển thị các kết quả tìm kiếm
Tại bước này bạn có thể tùy biến giao diện khung tìm kiếm, cũng như màu sắc, font chữ,… của các kết quả hiển thị bằng cách chọn Style và nhấn vào nút Customize để thay đổi.
Nhúng Google Custom Search vào Web/Blog
Nhúng Google Custom Search vào Web/Blog
Sau khi hoàn tất, nhấn Next để sang bước 3.
Bước 3 : Get Code
Tại bước này, Google cung cấp cho bạn một đoạn code để nhúng vào bất cứ đâu trên Web/Blog của bạn, bằng cách tạo một widget HTML/JavaScripts và dán vào đoạn code đó.
Nhúng Google Custom Search vào Web/Blog
* Lưu ý rằng vị trí chèn code cũng chính là vị trí hiển thị các kết quả tìm kiếm.
2. Tối ưu Google Custom Search Engine
Sau khi hoàn tất các bước trên, bạn đã có thể sử dụng Google Custom Search Engine với tất cả sức mạnh của tiện ích này thông qua một widget HTML/JavaScript.
Tuy nhiên, nếu bạn muốn tối ưu hơn nữa vị trí hiển thị các kết quả tìm kiếm, chọn giao thức website, nhúng Google Analytics Site Search,…thì thủ thuật bên dưới sẽ giúp bạn dễ dàng làm điều đó:
- Tại Bước 3 (Get Code), bạn nhấn vào liên kết Look and Feel để đến trang Control panel - Look and feel, hoặc truy cập vào địa chỉ http://www.google.com/cse/manage/all > Nhấn Control panel > Look and feel
Nhúng Google Custom Search vào Web/Blog
- Mục Choose a hosting option có 3 tùy chọn :
  • Search element : cung cấp hầu hết các thiết lập để tùy chỉnh CSE
  • Iframe: cung cấp giới hạn các thiết lập và yêu cầu một trang riêng biệt trên Web/Blog để hiển thị kết quả tìm kiếm.
  • Google-hosted page: hiển thị kết quả tìm kiếm trên host của Google.
Nhúng Google Custom Search vào Web/Blog
Ở đây chúng ta sẽ xét đến tùy chọn thứ 3 nhằm tạo một trang riêng biệt trên Web/Blog chứa các kết quả tìm kiếm. Đây là một tùy chọn rất hữu ích vì tất cả các thao tác của người đọc đều diễn ra bên trong website của bạn.
- Chọn Iframe và nhấn Save & Get Code…
Nhúng Google Custom Search vào Web/Blog
Một trang mới hiện ra, bạn làm theo hướng dẫn như hình dưới
Nhúng Google Custom Search vào Web/Blog
* Lưu ý : bạn phải tạo một trang Statics Page trước đó để get link đến trang này
Sau khi hoàn tất các bước trên, Search box của bạn sẽ có dạng như sau:
Nhúng Google Custom Search vào Web/Blog
còn đây là kết quả tìm kiếm được hiển thị trên trang Statics Page
Nhúng Google Custom Search vào Web/Blog
3. Tùy chỉnh giao diện Search Box và Search Iframe
Để tùy chỉnh giao diện Search Box và Search Iframe, các bạn làm như sau :
- Chèn đoạn code CSS bên dưới vào trước thẻ đóng </b:skin>
#cse-search-results iframe {
width:600px;
}
#cse-search-box{
background:#069;
display:inline;
float:right;
overflow:hidden;
padding:8px;
}
#cse-search-box input.box {
display:inline;
font-size:11px;
height:16px;
width:200px;
float:left;
margin:0;
padding-left:10px;
}
#cse-search-box input.btn {
line-height:1.8em;
display:inline;
float:right;
font-size:11px;
margin:0 0 0 8px;
border:none;
cursor:pointer;
color:#fff;
background:#d00;
}
- Tiếp tục, thay 2 dòng code trong widget HTML/JavaScript có dạng :
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="Search" />
thành
<input type="text" name="q" size="31" class="box"/>
<input type="submit" name="sa" value="Search" class="btn"/>
Và đây là kết quả :
Nhúng Google Custom Search vào Web/Blog
Chúc các bạn thành công !

COMMENTS

Name

Banner,2,Code,8,CSS,2,DNS cho Blogger,6,Favicon,1,HTML,6,JavaScript,2,Kiếm tiền với Youtube,1,Labels,1,Mật khẩu cho bài đăng,1,Nhãn,1,Search Google,1,Template Blogger,1,theme blogger,1,Thủ thuật Blogger,45,Thủ thuật Youtube,2,Tiệc ích Password,3,Tiện ích,9,Tiện ích bài viết liên quan,2,Trang,1,Wifi,1,Xóa bản quyền,1,
ltr
item
Khám Phá Blogger: Nhúng Google Custom Search vào Web/Blog
Nhúng Google Custom Search vào Web/Blog
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2eaU8KKVjun63WxmbgMDfeJ5Ic__GscCJV6Qko0rz0GzBB422eLP7jTpqEsyQn3wwroT6rxiKfb0QGhQAasdHkk-zLr_Kh0Jr0g6GF2EyRCopRtZct9YHCtuKQmLu9TJZyRELl2Cx4qo/
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2eaU8KKVjun63WxmbgMDfeJ5Ic__GscCJV6Qko0rz0GzBB422eLP7jTpqEsyQn3wwroT6rxiKfb0QGhQAasdHkk-zLr_Kh0Jr0g6GF2EyRCopRtZct9YHCtuKQmLu9TJZyRELl2Cx4qo/s72-c/
Khám Phá Blogger
https://blogger.affimart.com/2012/05/nhung-google-custom-search-vao-webblog.html
https://blogger.affimart.com/
http://blogger.affimart.com/
http://blogger.affimart.com/2012/05/nhung-google-custom-search-vao-webblog.html
true
4203661997903332293
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy