Tạo Hiệu Ứng Số Tăng Dần (Counter-Up) Cho Blogspot

Oleh Phạm Hoàng Nam

Pada tháng 12 29, 2018 tháng 1 16, 2019

Counter-Up Jquery Plugin là một hiệu ứng chạy số tăng dần, nhằm giúp cho website thêm đẹp mắt với những con số đang chạy khi người dùng truy cập web.
Hello thì hôm nay mình sẽ chia sẻ cách tạo hiệu ứng chạy số (Counter-Up) nhé.

Ở đây mình sẽ giới thiệu cho các bạn 2 cái Jquery Plugin.

Counter Up 1

Truy cập vào Blogger chọn Chủ đề sau đó chọn Chỉnh sửa HTML, rồi thêm đoạn code dưới đây lên trên thẻ đóng </body> nhé.

<script>



Bạn có thể thích những bài đăng này
Tạo Hiệu Ứng Đẹp Với Wow.js Cho Blogspot
Tuỳ Chỉnh Định Dạng Thời Gian Bằng F12 Cho Blogspot

//<![CDATA[
!function(e){var t=function(t,n){"use strict";var o=e.document.getElementsByTagName("script")[0],r=e.document.createElement("script");return r.src=t,r.async=!0,o.parentNode.insertBefore(r,o),n&&"function"==typeof n&&(r.onload=n),r};"undefined"!=typeof module?module.exports=t:e.loadJS=t}("undefined"!=typeof global?global:this);
//]]></script>
<script>
//<![CDATA[
        function counter(el, result) {
          let numAnim = new CountUp(document.getElementById(el),0, result);
          setTimeout(function() {
            numAnim.start()
          }, 1e3);
        }

        function updatePostNum(json) {





          counter('count-post', json.feed.openSearch$totalResults.$t)
        }

        function updateCmtNum(json) {
          counter('count-cmt', json.feed.openSearch$totalResults.$t)
        }

        function updateShareNum(json) {
          counter('count-share', json.share.share_count)
        }

        loadJS('https://cdnjs.cloudflare.com/ajax/libs/countup.js/1.9.3/countUp.min.js', function() {
          loadJS('/feeds/posts/default/?alt=json&max-results=0&callback=updatePostNum');
          loadJS('/feeds/comments/default?alt=json&max-results=0&callback=updateCmtNum');
          loadJS('https://graph.facebook.com/https://www.sibenit.net?callback=updateShareNum');
        });
//]]>
</script>

Trong đoạn code trên có dòng:

loadJS('https://graph.facebook.com/https://www.sibenit.net?callback=updateShareNum');

Sửa domain lại domain của mình nhé, ở đây mình ví dụ là https://www.sibenit.net thì sửa lại thành domain của mình.

Cách dùng

Để dùng khai báo các thông số đó ra thì thêm các thuộc tính như sau
id='count-post' và id='count-cmt' và id='count-share'

<!--hiện thị số bài đăng-->
<span id='count-post'><span>
<!--hiện thị số nhận xét-->
<span id='count-cmt'><span>
<!--hiện thị số share từ facebook-->
<span id='count-share'><span>

Demo

Xem ở cuối trang blog của mình nhé ! chỗ thống kê blogger :P á

Counter Up 2

Thêm đoạn code dưới đây vào trước thẻ đóng </head>

    <script>
        jQuery(document).ready(function($) {
            $('.counter').counterUp({
                delay: 10,
                time: 1000
            });
        });
    </script>

Sau đó khai báo thư viện Counter-Up vào trước thẻ đóng </body>

<script src='//cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js'></script>
<script src='//bfintal.github.io/Counter-Up/jquery.counterup.min.js'></script>