Nút tải thêm bài viết với hiệu ứng loading animation đẹp cho Blogger

Ở bài viết tìm hiểu về phương pháp click tải thêm bài viết trong Blogger mình đã trình bày rất chi tiết rồi kết hợp với bài viết giới thiệu một vài hiệu ứng loading animation css tải thêm thường được sử dụng các bạn có thể tự thêm được nút Tải thêm vào Blog của mình kết hợp với hiệu ứng loading nữa lại rất đẹp và chuyên nghiệp.

Nút tải thêm bài viết với hiệu ứng loading animation đẹp cho Blogger

Các bạn xem demo tại trang https://www.tapchixe.pro/ của mình nhé, dưới đây là phương pháp làm:

Do không biết theme blogspot các bạn dùng thế nào nhưng nếu các bạn đã từng hay đang dùng theme blogspot của mình thì các bạn có thể làm như sau:

Trong chỉnh sửa HTML của Chủ đề, các bạn chuyển đến tiện ích Blog1 tìm thẻ <b:includable id='postPagination'> các bạn mở thẻ này ra thay lại code xml bên trong thành như sau:

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

Tiếp theo nếu đang dùng script phân trang các bạn xóa đoạn script đó đi thay bằng đoạn script sau chèn trước thẻ đóng </body>

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

Lưu ý script này cần có link thư viện Jquery nha các bạn.

Cuối cùng các bạn chèn style của nút Tải thêm trước thẻ đóng </head> là xong

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

Ngoài ra nếu như các bạn có thêm yêu cầu chèn widget recent posts bên dưới bài viết cũng được tích hợp nút Tải thêm thì mình sẽ ra bài hướng dẫn khác nhé.

Tham khảo thêm: Cách tạo câu hỏi trắc nghiệm, đáp án và kết quả đơn giản cho blogspot