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

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é.

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.