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://lh4.googleusercontent.com/-VbAslObIybo/UfzEEstxc3I/AAAAAAAAAIM/bNSXsteBuXs/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.
0 nhận xét:
Đăng nhận xét