may-thoi-khi-gmek

Thêm Live Search Box vào Blogspot

Hướng dẫn tạo live search box cho blogspot. Với việc này bạn sẽ giúp dộc giả dễ dàng tìm kiếm hơn. các kết quả tìm kiếm được gọi ý luôn bên dưới khung tìm kiếm. Tính năng này sẽ được mình phát triển và tích hợp vào các mẫu template blogspot bán hàng chuẩn seo trong thời gian tới.

Bước 1: Thêm Javascript get kết quả
Thêm code bên dưới ngay trên thẻ </head>
<script>
 var home = "http://domain.blogspot.com/", // URL lấy kết quả tìm kiếm
 perPage = 3; // Số bài muốn hiển thị
//<![CDATA[
$(document).ready(function() {
 $("#mocgin-field input").click(function(c) {
 c.stopPropagation();
 $("#mocgin-field input").keyup(function() {
 var d = $("#mocgin-field input").val(), c = new RegExp(d, "i"), a = '<div class="row">';
 $.ajax({url: home + "feeds/posts/default?alt=json&max-results=10", dataType:"jsonp"}).done(function(e) {
 $.each(e.feed.entry, function(e, b) {
 if ("" != d && -1 != b.title.$t.search(c)) {
 a += '<div class="moc-search-item">';
 if (void 0 != b.media$thumbnail) {
 var f = b.media$thumbnail.url.replace(/\/s([\S]+)\//, "/s36-c/")
 }
 a += '<img src="' + f + '" />';
 a += '<h5><a href="' + b.link[4].href + '">' + b.title.$t + "</a></h5>";
 a += "</div>";
 }
 });
 a += "</div>";
 $("#mocgin-results").html(a);
 });
 });
 });
 $(document).click(function() {
 $("#mocgin-results").html("");
 });
});
//]]>
</script>

Ở đây bạn thay dòng http://domain.blogspot.com/ thanh link url home của bạn. với số lượng kết quả tìm kiếm 3 bạn có thể thay thành con số nhiều hơn.
Bước 2 thêm các đoạn code sau vào vị trí tương ứng.
id='mocgin-field' vào trong <form ....>....</form> --> <form id='mocgin-field' ....>...</form>
thêm <div id="mocgin-results"></div> ngay dưới </form>
Bước 3. Thêm các css cho kết quả tìm kiếm
/*** Live Search Box ***/
#mocgin-field {
background: #f5f5f5;
border-width: 1px;
padding: 0 10px;
border-style: solid;
border-color: #eee;
}
#mocgin-field input {
width: 100%;
height: 35px;
background: transparent;
outline: none;
}
#mocgin-results {
width: 100%;
position: absolute;
z-index: 8888;
}
.mocgin-search-item {
overflow: hidden;
border-bottom: 1px solid #f1f1f1;
background: #f8f8f8;
padding: 10px;
}
.mocgin-search-item img {
float: left;
display: block;
background: #fff;
padding: 5px;
border: 1px solid #eee;
margin-right: 10px;
width: 5%;
}
.mocgin-search-item h5 {
font-size: 16px;
font-weight: 400;
line-height: 24px;
float: left;
width: 80%;
}
Xong các bạn lưu lại. và tân hướng thành quả. Chúc các bạn có những trải nghiệm thú vị với blogspot.


Nguồn: Mocgin.com

6 Comments

  1. Không làm được bác ơi. http://www.dientucuatui.com/2018/01/em-san-pham-bao-bi-cong-nghiep.html

    ReplyDelete
  2. Code này mình cũng không làm được bạn nhé

    ReplyDelete
  3. hơ em làm theo mà ko được :((

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. em đã làm theo mà không thành công, blog: https://adamz20.blogspot.com/

    ReplyDelete
  6. https://quehiep.gov.vn/about/

    ReplyDelete
Post a Comment
Previous Post Next Post

Billboard Ad

may-thoi-khi-gmek