Tích Hợp Search Live Cực Nhẹ Cho Blogspot

Đặng Tiến Sĩ Tác giả:
Xuất bản: Thứ Tư, 6 tháng 2, 2019 -

Search Live là một tính năng tiện lợi giúp cho người dùng có thể tìm kiếm thông tin dễ dàng ngay trên Blogspot của bạn. Và hôm nay mình sẽ hướng dẫn tích hợp Search Live vào Blogspot của bạn nhé.


Tạo Khung Search Live Cho Blogspot, Ajax Search Live, Script Search Live Cho Blogspot, Tích Hợp Search Live Cực Nhẹ Cho Blogspot, Mới Nhất 2019, Mới Nhất 2018

Cách tích hợp


Dán đoạn code sau đây vào chỗ mình cần hiện thị khung search cho Blogspot nhé.
<div class='search-gg'>
<form action='/search'>
<input autocomplete='off' class='sb-search-input' id='search' name='q' placeholder='Nhập từ khóa tìm kiếm...' required='' type='text'/>
<input id='max-results' name='max-results' type='hidden' value='5'/>
<button class='search-submit' type='submit'/>
<ul class='results hidden'/>
</form>
<button class='search-delete hidden' type='submit'/>
</div>
<style>
.search-gg{width:auto;line-height:initial;right:447px;text-align:left;padding-left:64px;position:absolute;top:0;z-index:0}
button.search-submit:before{font-family:FontAwesome;content:"\f002"}
button.search-submit{position:absolute;width:40px;height:35px;font-size:16px;border:0;top:10px;padding:0;background:transparent;left:64px;cursor:pointer;z-index:999;color:#999}
#search{overflow:hidden;width:414px;position:relative;top:6.5px;right:0;outline:0;padding-bottom:1px;background:#f5f5f5;height:42px;margin:0;z-index:10;padding:0 34px;font-size:14px;color:#111;border:0 solid #bbb;transition:all 1s;border-radius:4px}
button.search-delete{position:absolute;width:40px;height:35px;font-size:16px;border:0;top:10px;padding:0;background:transparent;right:0;cursor:pointer;z-index:999;color:#bbb}
button.search-delete:before{font-family:FontAwesome;content:"\f00d"}
.search-gg .results{position:absolute;top:55px;background:#fff;border:none;width:414px;right:0;box-shadow:0 16px 24px 2px rgba(0,0,0,0.14),0 6px 30px 5px rgba(0,0,0,0.12),0 8px 10px -5px rgba(0,0,0,0.4);cursor:default}
.search-gg .results li{line-height:unset;list-style:none}
.search-gg .results li a{display:block;padding:0 15px;color:#3c4043;font-size:15px;font-weight:500;line-height:35px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-gg .results li:hover{background:#e6e6e6}
</style>

Sau đó dán đoạn Script dưới đây sau thẻ đóng </body> nhé.
<script type='text/javascript'>//<![CDATA[
      $('.search-gg input').on('keyup', function(e) {
        var textinput = $(this).val()
        if (textinput) {
          $.ajax({
            type: 'GET',
            url: '/feeds/posts/summary',
            data: {
              'max-results': 10,
              'alt': 'json',
              'q': textinput
            },
            dataType: 'jsonp',
            success: function(data) {
              $('.results,.search-delete').removeClass('hidden')
     $('.results').empty()
              if (data.feed.entry) {
                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 + '">' + '<i class="fa fa-angle-right"></i> ' + postTitle + '</a></li>')
                }
              } else {
                $('.results').addClass('hidden')
              }
            }
          })
        } else {
          $('.results,.search-delete').addClass('hidden')
        }
      })
    $('.search-delete').click(function() {
        $('.sb-search-input').val('')
        $('.results,.search-delete').addClass('hidden')
        $('.results').empty()
      })
//]]></script>

Lời kết


Bạn có thể tích hợp vào khung search hiện đang có sẳn trên Blogspot của bạn, chỉ cần edit cái script và những thuộc tích class của khung search cho giống Script là được. Chúc các bạn thành công.

Tag:
0 Like
2 Comment More Emoticon
2 Nhận xét
Sắp xếp theo


Bài Viết Có Thể Xem

THÔNG BÁO

Biên tập nội dung: Đặng Tiến Sĩ
Sĩ Ben IT Blogger giữ bản quyền nội dung trên website này
Chỉ được phát hành lại nội dung khi có sự đồng ý của chủ sở hữu
Mọi thư từ góp ý vui lòng gửi về địa chỉ dangtiensi.vn@gmail.com

Đóng Liên hệ

Thông báo của Admin