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”.

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.

- Điền vào thông tin yêu cầu như hình dưới

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.

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 đó.

* 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

- 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.

Ở đâ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…

Một trang mới hiện ra, bạn làm theo hướng dẫn như hình dưới

* 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:

còn đây là kết quả tìm kiếm được hiển thị trên trang Statics Page

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ả :

Chúc các bạn thành công !

Add the Google +1 Button to Your Blogger Blogs

Google released recently there +1 Button that will show publicly what you like, agree with, or recommend on the web. When you +1 an article or tutorial, your name will appear under that article when that article appears in search results.
You can also find out what articles your friends read and liked. This according to Google is aimed to make Google Search results more relevant and useful. For Bloggers like you, I am sure this is another great tool to increase the PR, relevancy and importance of your blog.
According to me, the more +1'd this you receive the chances for your blog's PR to improve will increase also because the PageRank algorithm is linked to all activities that takes place in your blog. The video below will demonstrate better,

How to add the +1 Button to Blogger?

1. Go To Blogger > Design > Edit HTML
2. Backup your template
3. Search for </head>
4. Paste the code below just above </head>

<script type="text/javascript" src="http://apis.google.com/js/plusone.js"> {lang: 'en-US'} </script>

     5.  Now to place the button just below Post titles then search for this code<data:post.body>  and place the +1 button code given below just above it,

<div style='float:left'>

<g:plusone size="standard" expr:href="data:post.url"/>

</div>

• You can display it to "left" and "right" by adjusting left
• You can change standard to medium, small or tall. Choose the size that may blend your template.

Tall, small, Medium Respectively:

   

6.  If you want the button to appear below blog posts then add the button code just below<data:post.body>

    7. Save your template to see it working. Have fun! :>

It will appear like this in search results,

Alternative Method

To add the +1 button to your blog directly without any code then you’ll need to enable Share buttons on Blogger. To do this, go to Design > Page Elements on your Blogger dashboard, find the Blog posts area, click on Edit, and select the “Show Share Buttons” option. If you are already using Share buttons, then you don't need to worry as the +1 button will automatically show up as a new share button.