Đưa tiện ích vào blogspot
Để tạo tiện ích này cần thêm css vào trong mẫu nhưng để đơn giản ta gộp tất cả thành thêm 1 tiện íchVào Bố cục chọn thêm tiện ích HTML/javascript và dán đoạn code sau vào rồi lưu lại
<center>
<style>#search-form-feed {
width:250px; /*Chiều dài ô tìm kiếm */
position:relative;
margin:0 0 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:4px;
-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 'Trebuchet MS',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;
}</style>
<div id="search-form-feed">
<form action="/search" onsubmit="return updateScript();">
<input name="q" type="text" value="Gõ từ liên quan rồi nhấn Enter..." 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://kartriderdautocrazy01.blogspot.com", // Thay URL Blog của bạn vào
numPost: 9999,
summaryPost: true, // 'true' Tùy chọn để hiển thị hoặc ẩn các bài viết tóm tắt trong kết quả tìm kiếm
summaryLength: 400, // Xác định số lượng ký tự một bản tóm tắt kết quả tìm kiếm
resultTitle: "Kết quả tìm kiếm với Từ khóa", // Kết quả tìm kiếm tiêu đề hoặc từ khóa
noResult: "Xin lỗi không tìm thấy @", // Cảnh báo chỉ ra rằng các bài không được tìm thấy
resultThumbnail: true, // 'true' Tùy chọn để hiển thị hoặc ẩn các hình thu nhỏ bài trong kết quả tìm kiếm
thumbSize: 40, // Được sử dụng để xác định kích thước và kết quả trước độ phân giải
fallbackThumb: "http://reader-download.googlecode.com/svn/trunk/images/no-image-72x72.png" // Khi bài ko có ảnh
};
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
function getId(id) {
return document.getElementById(id);
}
var config = searchFormConfig,
input = getId('feed-q-input'),
resultContainer = getId('search-result-container'),
resultLoader = getId('search-result-loader'),
skeleton = '';
// The Most Basic :: JSON caller function to display the list of posts in the container
function showResult(json) {
var entry = json.feed.entry ? json.feed.entry : "", url, summary, img;
skeleton = '<h4>' + config.resultTitle + ' "' + input.value + '"</h4>';
skeleton += '<a title="Close" style="display:block;position:absolute;top:10px;right:12px;line-height:normal;text-decoration:none;color:inherit;font-size:150%;" href="#close" onclick="resultContainer.style.display=\'none\';return false;">×</a><ol>';
if (entry === "") {
skeleton += '<li>' + config.noResult + '</li>';
}
for (var i = 0; i < config.numPost; i++) {
if (i == entry.length) break;
var mark = new RegExp(input.value, "ig"), entries = entry[i], title = entries.title.$t.replace(mark, "<mark>"+input.value+"</mark>");
for (var j = 0; j < entries.link.length; j++) {
if (entries.link[j].rel == 'alternate') {
url = entries.link[j].href;
break;
}
}
summary = ("summary" in entries && config.summaryPost === true) ? entries.summary.$t : "";
if (config.resultThumbnail === true) {
img = ("media$thumbnail" in entries) ? entries.media$thumbnail.url.replace(/\/s[0-9]+\-c/g, "/s"+config.thumbSize+"-c") : config.fallbackThumb;
}
summary = summary.replace(/<(.*?)>/g, "");
if (summary.length > config.summaryLength) {
summary = summary.substring(0, config.summaryLength) + '...';
}
summary = summary.replace(mark, "<mark>"+input.value+"</mark>");
skeleton += '<li><img style="width:'+config.thumbSize+'px;height:'+config.thumbSize+'px;" src="'+img+'" alt="" /><a href="'+url+'" target="_blank">'+title+'</a>'+summary+'</li>';
}
skeleton += '</ol>';
resultContainer.innerHTML = skeleton;
resultLoader.style.display = "none";
resultContainer.style.display = "block";
}
// Insert an empty <script> tag with ID of 'search-feed-script'
(function() {
var s = document.createElement('script');
s.type = "text/javascript";
s.id = "search-feed-script";
document.getElementsByTagName('head')[0].appendChild(s);
})();
// Used to manipulate the 'q' parameter value in the 'search-feed-script' based on keywords that written in the search input
function updateScript() {
resultContainer.style.display = "none";
resultLoader.style.display = "block";
var script = getId('search-feed-script'),
newScript = document.createElement('script');
newScript.id = "search-feed-script";
newScript.type = "text/javascript";
newScript.src = config.url+"/feeds/posts/summary?alt=json-in-script&q="+input.value+"&max-results="+config.numPost+"&callback=showResult";
// Remove the empty script that we crated before...
script.parentNode.removeChild(script);
// Then, insert a new script with the callback of showResult() fuunction based on the 'q' parameter value of input.value
// So, the result will be like this => http://blog_name.blogspot.com/feeds/posts/summary?alt=json-in-script&q=QUERIES&max-results=XXXX&callback=showResult
document.getElementsByTagName('head')[0].appendChild(newScript);
return false;
}
// Used to hide the search result container when the search input value is empty
function resetField() {
if (input.value === "") {
resultContainer.style.display = "none";
resultLoader.style.display = "none";
}
}
//]]>
</script></center>
Để hộp tìm kiếm này vào chỗ phù hợp trên blog