Thêm Nút Load More Phần Chân Trang Kèm Hiệu Ứng Loading Animation Cho Blogspot

Một website chuyên nghiệp sẽ thu hút lượng độc giả nhiều hơn. Khi Website-blog của bạn có khá nhiều bài viết, bạn muốn thêm nút load more tại trang chỉ mục nhưng chưa đẹp mắt, thì hôm nay mình sẽ hướng dẫn anh em Thêm Nút Load More Phần Chân Trang Kèm Hiệu Ứng Loading Animation Cho Blogspot

Các Bước Thêm Nút Load More Tại Trang Chỉ Mục

Bước 1 : Các Bạn Chọn Chủ Đề -> Chỉnh Sửa HTML

Bước 2 : Các Bạn Tìm Thẻ b:includable id='postPagination Sau Đó Thay Code Bên Trong Nó Thành :

<div class='blog-pager' id='blog-pager'>
  <a class='load-more' expr:href='data:olderPageUrl' title='Tải thêm'>Tải thêm</a>
</div>

Bước 3 : Tiếp Đó Nếu Phần Chân Trang Của Bạn Đang Dùng Dạng Phân Trang Thì Xóa Đoạn Scrip Đó Và Thay Thành Đoạn Scrip Sau:

<b:if cond='data:view.isMultipleItems'>
  <script>//<![CDATA[
    window.addEventListener('load',function(){
      var a='.blog-posts',b='.post',elem='.blog-pager',c='.blog-pager>a',
      d=document.querySelector(c),e=d.getAttribute('href'),r='.ellipsis',
      div='<div class="ellipsis"><div></div><div></div><div></div><div></div></div>'
      function f(){
        setTimeout(function(){
          $(r).remove()
          $(d).html('Không tìm thấy kết quả nào').removeClass('load-more hide').addClass('disabled')
        },500)
      }
      function n(v){
        v.preventDefault()
        $(div).appendTo($(elem))
        $(d).addClass('hide')
        if(e!=''){
          $.get(e,function(g){
            var h=$(g).find(b)
            if(h.length){
              var i=document.createElement('div'),j=$(i).append(g),k=j.find(c)
              if(k.length)(e=k.attr('href'),d.setAttribute('href',e))
              else e=''
              var l=j.find(a).children(b)
              $(a).append(l)
              $(d).removeClass('hide')
              $(r).remove()
            }else f()           
          },'html')
        }else f()
      };$(d).on('click',n)
    })
  //]]></script>
</b:if>

Bước 4 : Cuối Cùng Các Bạn Chèn Code Sau Trên Tag Đóng /head :

<b:if cond='data:view.isMultipleItems'>
<b:tag name='style'>/* <![CDATA[ */
.blog-pager{float:left;width:100%;margin-top:15px;padding-top:15px;border-top:1px solid rgba(12,28,39,.15);line-height:0;text-align:center}
.blog-pager>a{background:#03a9f4;position:relative;overflow:hidden;min-width:80px;height:34px;line-height:36px;color:#fff!important;-webkit-appearance:none;font-size:14px;letter-spacing:.5px;font-weight:400;border:0;text-decoration:none;border-radius:4px;transition:opacity .15s}
.blog-pager>a.load-more{padding:0 25px 0 10px}
.blog-pager>a:not(.hide){display:inline-block}
.blog-pager>a.hide{display:none}
.blog-pager>a.load-more:after{position:absolute;top:10px;right:10px;content:"";width:8px;height:8px;overflow:hidden;border:1px solid #fff;border-top:1px solid transparent;border-left:1px solid transparent;box-sizing:border-box;transition:all .2s ease-out;-ms-transform:rotate(45deg);transform:rotate(45deg)}
.ellipsis{position:relative;width:64px;height:20px}
.ellipsis div{position:absolute;top:5px;width:11px;height:11px;border-radius:50%;background:#0098d3;-webkit-animation-timing-function:cubic-bezier(0,1,1,0);animation-timing-function:cubic-bezier(0,1,1,0)}
.ellipsis div:nth-child(1){left:6px;-webkit-animation:lds-ellipsis1 0.6s infinite;animation:lds-ellipsis1 0.6s infinite}
.ellipsis div:nth-child(2){left:6px;-webkit-animation:lds-ellipsis2 0.6s infinite;animation:lds-ellipsis2 0.6s infinite}
.ellipsis div:nth-child(3){left:26px;-webkit-animation:lds-ellipsis2 0.6s infinite;animation:lds-ellipsis2 0.6s infinite}
.ellipsis div:nth-child(4){left:45px;-webkit-animation:lds-ellipsis3 0.6s infinite;animation:lds-ellipsis3 0.6s infinite}
@-webkit-keyframes lds-ellipsis1{0%{-webkit-transform:scale(0);transform:scale(0)}100%{-webkit-transform:scale(1);transform:scale(1)}}
@keyframes lds-ellipsis1{0%{-webkit-transform:scale(0);transform:scale(0)}100%{-webkit-transform:scale(1);transform:scale(1)}}
@-webkit-key lds-ellipsis2{100%{-webkit-transform:translate(19px,0);transform:translate(19px,0)}}
@keyframes lds-ellipsis2{100%{-webkit-transform:translate(19px,0);transform:translate(19px,0)}}
@-webkit-keyframes lds-ellipsis3{0%{-webkit-transform:scale(1);transform:scale(1)}100%{-webkit-transform:scale(0);transform:scale(0)}}
@keyframes lds-ellipsis3{0%{-webkit-transform:scale(1);transform:scale(1)}100%{-webkit-transform:scale(0);transform:scale(0)}}
/* ]]> */</b:tag>
</b:if>

Bước 5 : Lưu Lại Chủ Đề Và Xem Kết Quả.

LỜI KẾT

---

Chỉ với vài bước đơn giản các bạn đã tạo được nút load more cho blog của bạn rồi. Nếu có bất cứ thắc mắc nào hãy comment xuống dưới để được giải đáp.