Thêm search live cho blogger/blogspot

Click ngay

Xin chào các bạn, mình thấy cái search live này chắc cũng nhiều bạn đang cần nên hôm nay mình sẽ viết bài hướng dẫn Thêm search live vào blogger

HƯỚNG DẪN CÁCH LÀM:

Bước 1: Vào bloggger -> Chủ đề -> Chỉnh sửa HTML, các bạn tìm thẻ </head> và thêm đoạn code bên dưới lên trên nó
<script src='//code.jquery.com/jquery.min.js'/>
<script>
var home=&quot;https://www.blogsechiathuthuat.com/&quot;,perPage=5;
//<![CDATA[
$(document).ready(function(){
$("#search_live input").click(function(n){
n.stopPropagation(),
$("#search_live input").keyup(function(){
var n=$("#search_live input").val(),o=new RegExp(n,"i"),t='<div class="row">';t='<div class="content_search"><span>Kết quả tìm kiếm</span></div>',
$.ajax({url:home+"feeds/posts/default?alt=json",dataType:"jsonp"}).done(function(e){
$.each(e.feed.entry,function(e,d){
if(""!=n&&-1!=d.title.$t.search(o)){if(t+='<div class="search-live_items">',void 0!=d.media$thumbnail)var i=d.media$thumbnail.url.replace(/\/s([\S]+)\//,"/s36-c/");t+='<a href="'+d.link[4].href+'" target="_blank"><img src="'+i+'" /></a>',t+='<h5><a target="_blank" href="'+d.link[4].href+'">'+d.title.$t+"</a></h5>",t+="</div>"}}),t+="</div>",
$("#search-live").html(t)})})}),$(document).click(function(){
$("#search-live").html("");
});
});
//]]>
</script>
Bước 2: Tiếp đến các bạn tìm đoạn ]]></b:skin> rồi nhập đoạn css bên dưới lên trên nó
.search_box_menu{display:inline;float:left}
#search_live input{border-radius:3px;width:333px;height:35px;background:#f5f5f5 url(https://i.imgur.com/KqdsAaJ.png) no-repeat top left;padding:0 16px 0 35px;font-size:14px;box-sizing:border-box;border:0;outline:0;background-position:2%;color:#f3f3f3;transition:.3s}
#search_live input:focus{background:#fff url(https://i.imgur.com/FSWcLmk.png) no-repeat top left;background-position:2%}
#search_live input:focus::-webkit-input-placeholder{color:#555}
#search_live input:focus{color:#555}
#search-live{position:absolute;z-index:10;background:#fff;top:45px;right:0;box-shadow:0 0 40px rgba(0,0,0,.15);width:470px;max-width:100%;max-height:447px;overflow:auto}
.search-live_items{overflow:hidden;border-bottom:1px solid #ededed;padding:10px}
.search-live_items img{float:left;display:block;padding:0;margin-right:10px;border-radius:50%;width:40px;border:1px solid #ccc}
.search-live_items h5{font-size:16px;font-weight:400;line-height:1.4;margin:0;padding:0}
.search-live_items h5 a{color:#365899}
.content_search{padding:17px 0 17px 10px;border-bottom:1px solid #eee;font-size:14px;font-weight:500;text-transform:uppercase;color:#555}
Bước 3: Thêm đoạn code này vào chỗ bạn muốn nó hiển thị (thường là trên header, menu)
<div class='search_box_menu'>
<div id='search_live'>
<input placeholder='Tìm kiếm bài viết trên blog...'/>
</div>
<div id='search-live'></div></div>
* Phần được bôi đen các bạn chỉnh lại thành link blog của bạn nhé
Chúc bạn thành công!

Nếu bạn sao chép bài viết trên blog thì vui lòng để nguồn vào giúp mình. Tôn trọng người khác thì người khác sẽ tôn trọng lại bạn.

Nếu có thắc mắc gì về code, code lỗi,... thì liên hệ mình để được giúp đỡ nhé.

Thanh Bình Designer, Developer

Muốn giỏi phải học, muốn học thì phải hỏi. Chính vì thế, hãy cùng tham gia thảo luận với nhau để tìm ra câu trả lời nếu có thắc mắc nhé! Xem thêm nhiều bài viết hay tại đây nhé.
Trong quá trình viết bài chúng tôi sẽ có nhiều thiếu sót mong các bạn đóng góp để chúng tôi rút kinh nghiệm hơn !
Nên Xem
  • Ẩn sidebar
  • 19 nhận xét:

    1. Cảm ơn nhé, mấy đoạn css này ko biết code thì bó tay thật :Dcung hoàng đạo

      Trả lờiXóa
    2. Backlink kinh quá nhỉ. Bình ơi hoạt động nào :v

      Trả lờiXóa

    » Không chửi tục, nói bậy, quảng cáo thông qua khung Comment.
    » Không spam link, chia sẻ các link không liên quan đến bài viết.
    » Không xuyên tạc, bôi nhọ tổ chức hay cá nhân nào.
    » Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước.