LIVE SEARCH FOR BLOGGER

Nếu blog chưa có jquery thì đặt code sau đặt trước </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'/>
Tiếp theo đặt code dưới đây trước
<script>//<![CDATA[
$(window).on('load', function() { // Khi tải trang xong mới tải script
$('#searchForm input').on('keyup', function(e) { // Tạo sự kiện khi gõ từ khóa vào khung search
var textinput = $(this).val() // đặt từ khóa bằng textinput
if (textinput) { // Nếu có từ khóa thì sử dụng hàm ajax lấy bài viết liên quan
$.ajax({
type: 'GET',
url: '/feeds/posts/summary',
data: {
'max-results': 10, // đặt kết quả tìm kiếm tối đa là 10
'alt': 'json',
'q': textinput
},
dataType: 'jsonp',
success: function(data) { // khi tải xong feed bắt đầu tạo kết quả
$('.results,.clear-text').removeClass('hidden') // loại bỏ class hidden của phần html class='clear-text hidden' & class='results hidden' hiển thị kết quả
$('.results').empty() // xóa kết quả nếu có
if (data.feed.entry) { // nếu có kết quả thì tạo tiêu đề & link bài viết liên quan
for (var i = 0; i < data.feed.entry.length; i++) {
for (var j = 0; j < data.feed.entry[i].link.length; j++) {
if (data.feed.entry[i].link[j].rel == 'alternate') {
var postUrl = data.feed.entry[i].link[j].href;
break;
}
}
var postTitle = data.feed.entry[i].title.$t;
$('.results').append('<li><a href=' + postUrl + ' title="' + postTitle + '">' + postTitle + '</li>');
}
} else { // nếu không có kết quả
$('.results').addClass('hidden') // thêm class hidden vào phần html class='results hidden' làm ẩn
}
}
})
} else { // nếu không có từ khóa
$('.results,.clear-text').addClass('hidden') // thêm class hidden vào phần html class='results hidden' & class='clear-text hidden' làm ẩn
}
})
$('.clear-text').click(function() { // tạo sự kiện khi click vào nút clear text
$('.peekar input').val('') // xóa từ khóa
$('.results,.clear-text').addClass('hidden') // thêm class hidden vào phần html class='results hidden' & class='clear-text hidden' làm ẩn
$('.results').empty() // xóa kết quả nếu có
})
})
//]]></script>


Thêm code sau trước ]]></b:skin>
#searchForm {
display:inline-block;
position:relative;
width:500px;
}
#searchForm input {
background:transparent;
font-size:14px;
line-height:27px;
text-indent:14px;
width:90%;
color:#212121;
border:1px solid #e0e0e0;
border-right:none;
border-radius:2px 0 0 2px;
outline:0;
}
#searchForm input:hover,
#searchForm button:hover {
border:1px solid #b9b9b9;
border-top:1px solid #a0a0a0;
-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);
-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);
box-shadow:inset 0 1px 2px rgba(0,0,0,.1);
}
#searchForm button {
width:60px;
border:1px solid #e0e0e0;
border-radius:0 2px 2px 0;
background:rgb(230,230,230);
cursor:pointer;
position:absolute;
top:10px;
outline:0;
line-height:27px;
}
#searchForm button svg {
vertical-align:middle;
width:21px;
height:21px;
}
#searchForm .results {
position:absolute;
top:50px;
background:#fff;
border:1px solid #e0e0e0;
width:90%;
min-width:320px;
border-top:unset;
box-shadow:0 2px 4px rgba(0,0,0,0.2);
-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);
}
#searchForm .results li {
line-height:list-style:none;
}
#searchForm .results li a {
display:block;
padding:0 15px;
color:#212121;
font-size:15px;
font-weight:500;
line-height:30px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
#searchForm .results li:hover {
background:rgb(230,230,230);
}
#searchForm .hidden {
display:none!important;
}

Cuối cùng chèn code sau vào nơi muốn hiển thị LIVE SEARCH.
<form id='searchForm' action='/search'>
<input autocomplete='off' expr:aria-label='data:messages.searchThisBlog' expr:placeholder='data:messages.search' name='q'/>
<svg class='clear-text hidden'><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_close_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg>
<button expr:value='data:messages.search.escaped' type='submit'><svg><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_search_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg></button>
<ul class='results hidden'></ul>
</form>

N LinkPro