Tạo Search Box đẹp cho Blogger bằng JSON Script

Blogger ngày nay đã trở nên phổ biến đối với mọi người, để có một website đẹp, ngoài giao diện bắt mắt thì chức năng tìm kiếm cũng khá quan trọng. Bài viết này sẽ hướng dẫn cho các bạn tạo ra một Search Box đẹp, và tìm kiếm chính xác hơn là chức năng Search mặc định.

Với cách này, khung Search sẽ hiện ra ngay trang bạn đang xem mà không bị chuyển trang.

HƯỚNG DẪN:

- Mở Editor HTML của Templates đang dùng:
- Chèn vào trước ]]></b:skin>  đoạn code sau:

#search-form-feed {
  width:200px; /* search box */
  float:right;
  position:relative;
  margin:4px 10px 4px 10px;
  padding:0 0;
  font:normal normal 11px Arial,Sans-Serif;
  color:#333;
}

#feed-q-input {
  display:block;
  width:100%;
  border:2px solid #bbb;
  background-color:white;
  padding:5px 5px;
  font:normal bold 13px Tahoma,Arial,Sans-Serif;
  color:#ccc;
  margin:0 0;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:10px;
  -webkit-box-shadow:inset 0 1px 5px rgba(0,0,0,.2);
  -moz-box-shadow:inset 0 1px 5px rgba(0,0,0,.2);
  box-shadow:inset 0 1px 5px rgba(0,0,0,.2);
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

#feed-q-input:focus {
  border-color:#0D6786;
  color:#333;
  outline:none;
  -webkit-box-shadow:0 0 5px #153E95,0 0 7px #153E95;
  -moz-box-shadow:0 0 5px #153E95,0 0 7px #153E95;
  box-shadow:0 0 5px #153E95,0 0 7px #153E95;
}

#search-result-container {
  width:400px;
  height:300px;
  overflow:auto;
  position:absolute;
  top:100%;
  right:0;
  z-index:999;
  background-color:#E5EDF7;
  border:2px solid white;
  padding:10px 10px 0;
  margin:10px 0 0;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4);
  box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4);
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  display:none;
}

#search-result-container mark {
  background-color:yellow;
  color:black;
}

#search-result-container a {
  text-decoration:none;
  color:#0D3E71;
  font-weight:bold;
  font-size:12px;
  display:block;
}

#search-result-container a:hover {
  color:#052748;
}

#search-result-container h4 {
  margin:0 0 10px;
  font:normal bold 12px Arial,Sans-Serif;
  color:#B50001;
}

#search-result-container ol {
  background:transparent;
  border:none;
  margin:0 0 10px;
  padding:0 0;
}

#search-result-container li {
  margin:0 0 1px;
  padding:7px 8px;
  list-style:none;
  border:1px solid #B7C1CE;
  background-color:white;
  overflow:hidden;
  word-wrap:break-word;
}

#search-result-container li img {
  display:block;
  float:left;
  margin:0 10px 4px 0;
  border:1px solid #B7C1CE;
  background-color:#F5F5F5;
  padding:2px 2px;
}

#search-result-loader {
  position:absolute;
  top:100%;
  left:5px;
  z-index:999;
  background-color:#0D6786;
  color:white;
  padding:3px 5px;
  margin:-2px 0 0;
  font:normal bold 10px Arial,Sans-Serif;
  -webkit-border-radius:0 0 3px 3px;
  -moz-border-radius:0 0 3px 3px;
  border-radius:0 0 3px 3px;
  display:none;
}

- Sau đó tạo một Widget HTML hoặc tìm nơi muốn đặt Search Box chèn script này vào:

<div id="search-form-feed">
    <form action="/search" onsubmit="return updateScript();">
        <input name="q" type="text" value="Tìm kiếm..." id="feed-q-input" onkeyup="resetField();" onfocus="this.value='';"/>
    </form>
    <div id="search-result-container"></div>
    <div id="search-result-loader">Loading...</div>
</div>
<script type="text/javascript">
//<![CDATA[
var searchFormConfig = {
    url: "http://www.azmobi.net/", // URL Blog
    numPost: 9999, // Số lượng tối đa các kết quả
    summaryPost: true, // 'true' Nếu bạn muốn hiển thị mô tả của bài viết
    summaryLength: 400, // Số ký tự tóm tắt hiển thị cho bài viết
    resultTitle: "Kết quả tìm kiếm", // Kết quả tìm kiếm
    noResult: "No result", // Mô tả 'không tìm thấy'
    resultThumbnail: true, // 'true' Hiển thị hình thu nhỏ bài viết
    thumbSize: 40, // Kích thước hình thumbnail
    fallbackThumb: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdasWsn8FfOXjmosUqoXbqXfvaKWzitbJ8fqdhHIpFoaTJXicM-npb7auVvFEYzf_Fs6FXAvDbSCZAU2dXMMKMqhYnwNQ8zpxyU9LCoMBqqbOrBMpYIR7ZYl9YIDELlY-J64is8FjHaxBE/s72/no-image-72x72.png" // Hiển thị Thumbnail nếu bài viết không có hình
};
//]]>
</script>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/s/q5w06d47r395tlw/blogger-quick-search.js"></script>

- Nhớ thay đổi URL Blog của bạn, đoạn màu vàng.

Bạn vừa xem chuyên mục Webmasters bài viết Tạo Search Box đẹp cho Blogger bằng JSON Script. Bạn có thể lưu lại URL https://azmobi1.blogspot.com/2013/08/tao-search-box-ep-cho-blogger-bang-json.html. Cảm ơn!

Chuyên Mục: Webmasters - 11/8/13