Tạo tiện ích thống kê đẹp cho blogspot

Nhiều blogspot cũng cần có tiện ích thống kê về:
- Số lượng bài viết.
- Số lượng comments.
- Số lượt chia sẻ(share) blogspot đó lên mạng xã hội.

- Tốc độ load trang ....
Để khách truy cập blog có thể thấy được mức độ bao phủ của blog về nội dung cũng như phổ biến của blog.Do vậy bạn có thể cần thêm tiện ích thống kê cho blogspot.

Thêm tiện ích thống kê cho blogspot

Mẫu 1

Gồm:
- Số lượng bài viết
- Số lượng comment
- Số lượt chia sẻ

Bạn vào bố cục tiến hành thêm một tiện ích HTML/javascript tại vị trí bạn muốn(thường là cạnh bên) và dán đoạn code sau vào rồi lưu lại

<style type='text/css'>
.widget-user .row{margin-right:-15px;margin-left:-15px;width:inherit;margin:0}
.widget-user-header a{color:#fff;text-decoration:none}
.box{border-radius:3px;background:#fff;margin-bottom:20px;width:100%}
.box .border-right{border-right:1px solid #f4f4f4}
.box .border-left{border-left:1px solid #f4f4f4}
.box.box-solid{border-top:0}
.box-header>.box-tools [data-toggle=tooltip],.box-widget{position:relative}
.box-header>.box-tools.pull-right .dropdown-menu{right:0;left:auto}
.widget-user .widget-user-header{padding:20px;height:150px;border-top-right-radius:3px;border-top-left-radius:3px}
.widget-user .widget-user-username{margin-top:0;margin-bottom:5px;font-size:25px;font-weight:600;text-shadow:0 1px 1px rgba(0,0,0,.2)}
.widget-user .widget-user-desc{color:#fff;font-size:14px;margin-top:0;margin-bottom:15px}
.widget-user .widget-user-image{position:absolute;top:105px;left:50%;margin-left:-45px}
.widget-user .widget-user-image img{width:90px;height:auto;border:3px solid #fff}
.img-circle{border-radius:50%}
.widget-user .box-footer{padding-top:40px}
.box-footer{border-top:1px solid #f4f4f4;padding:10px;background-color:#fff;border-radius:0 0 3px 3px}
.bg-aqua-active{background-color:#00a7d0!important}
.description-block{display:block;margin:10px 0;text-align:center}
.description-block.margin-bottom{margin-bottom:25px}
.description-block>.description-header{margin:0;padding:0;font-size:16px}
.description-block>.description-text{text-transform:uppercase;font-size:11px}
.description-block .description-icon{font-size:16px}
.col-sm-4{position:relative;min-height:1px;padding-right:15px;padding-left:15px}
.col-sm-4{width:33.33333333%;float:left}
</style>

<div class='box box-widget widget-user'>
<div class='widget-user-header bg-aqua-active'>
<a href='Link trang facebook' target='_blank'>
<h3 class='widget-user-username'>
Tdb Blogspot
</h3>
</a>
<h5 class='widget-user-desc'>
Full Stack Developer
</h5>
</div>
<div class='widget-user-image'>
<a href='/?utm_source=widget' rel='author'>
<img alt='Tdb blogspot' class='img-circle' height='90px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguxvEVi9DYqdgU-XFijFOSBnXSanrItLM3bjmawHXU54DLVZ2uGC5cIWCHDmOubCjGXZg8hT5cYXVcOjp0GARU9qSy2vXpNSBRKeVUCWH89iNh1ExpunBJnWwL2lSnV2PCcTOb2xRs1C-t/s1600/tdb.jpg' width='90px'/>
</a>
</div>
<div class='box-footer'>
<div class='row'>
<div class='col-sm-4 border-right'>
<div class='description-block'>
<h5 class='description-header' id='count-post'>0</h5>
<span class='description-text'>POSTS</span>
</div>
</div>
<div class='col-sm-4 border-right'>
<div class='description-block'>
<h5 class='description-header' id='count-cmt'>0</h5>
<span class='description-text'>COMMENTS</span>
</div>
</div>
<div class='col-sm-4'>
<div class='description-block'>
<h5 class='description-header' id='count-share'>0</h5>
<span class='description-text'>SHARES</span>
</div>
</div>
</div>
</div>

<script>
//<![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);
function resize(url,size){var arr=url.split('/');arr[arr.length-2]=size;return arr.join('/')}function counter(el,result){var 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.7.1/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://dautoblognz.blogspot.com?callback=updateShareNum')});
//]]></script></div>

Thay các phần bôi màu cho phù hợp.
- Tên blog
- Link ảnh
- Thay https://dautoblognz.blogspot.com thành URL blog của bạn.
Mẫu 2
Gồm:
- Số lượng bài viết
- Số lượng comment
- Tốc độ load trang

Bạn vào bố cục tiến hành thêm một tiện ích HTML/javascript tại vị trí bạn muốn(thường là cạnh bên) và dán đoạn code sau vào rồi lưu lại

<style type='text/css'>
section.widget_info_blog{padding:0!important;overflow:hidden;background:transparent!important;border-radius:3px 3px 0 0!important}
.feau{height:120px;background:#00a7d0;font-size:23px;color:#fff;padding:0;text-decoration:none}
.feau h3{margin-top:0;margin-left:10px;margin-bottom:5px;font-size:25px;font-weight:600;text-shadow:0 1px 1px rgba(0,0,0,.2);
}
.feau p{font-size:16px;margin-left:10px}
.title-blog{padding:10px}
.logo-widget img{max-height:90px;border:3px solid #fff;border-radius:50%;margin-top:-40px;margin-left:calc(50% - 40px)}
.info{float:left;width:100%;background:#fff;min-height:101px;margin-top:-45px}
.col-widget{float:left;width:33%;height:35px;font-size:15px;color:#23282d;margin-top:45px;text-align:center}
.col-widget h5{margin:0;padding:0;font-weight:600;font-size:16px}
</style>
<div class="feau">
<div class='title-blog'>
<h3>Tdb Blogspot</h3>
<p>Full Stack Developer</p>
</div>
</div>
<div class="logo-widget"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguxvEVi9DYqdgU-XFijFOSBnXSanrItLM3bjmawHXU54DLVZ2uGC5cIWCHDmOubCjGXZg8hT5cYXVcOjp0GARU9qSy2vXpNSBRKeVUCWH89iNh1ExpunBJnWwL2lSnV2PCcTOb2xRs1C-t/s1600/tdb.jpg" width='90' height='90' draggable='false' oncontextmenu='return false'/> </div>
<div class="info">
    <div class="col-widget so-bai">
        <h5><script style="text/javascript">
            function showpostcount(json) {
                document.write(parseInt(json.feed.openSearch$totalResults.$t, 10));
            }
        </script>
        <script src="/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script></h5>
<span>POST</span>
    </div>
    <div class="col-widget so-comment">
        <h5><script style="text/javascript">
            function numberOfComments(json) {
                document.write(json.feed.openSearch$totalResults.$t);
            }
        </script>
        <script src="/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></h5>
<span>COMMENTS</span>
    </div>
    <div class="col-widget speed-load">
        <h5><script type="text/javascript">
            var startTime = new Date();

            function currentTime() {
                var a = Math.floor((new Date() - startTime) / 100) / 10;
                if (a % 1 == 0) a += ".0";
                document.getElementById("endTime").innerHTML = a;
            }
            window.onload = function() {
                clearTimeout(loopTime);
            }
        </script>
        <script type="text/javascript">
            document.write('<span id="endTime">0.0</span>');
            var loopTime = setInterval("currentTime()", 100);
        </script></h5>
<span>LOAD</span>
    </div>
</div>

Thay các phần bôi màu cho phù hợp.
- Tên blog
- Link ảnh
Mẫu 3
Mẫu thống kê này dùng cho blogspot có xóa css mặc định nhưng không xóa javascript (js) mặc định của blogspot.
Gồm có:
- Tổng số bài viết
- Tổng số comments
- Tổng số lượt xem trang

Để cài đặt tiện ích thống kê này bạn cần thực hiện các bước sau:
Bước 1: Vào bố cục bật tiện ích thống kê blog tại vị trí bạn muốn và check vào kiểu như hình.

Bước 2
Vào chỉnh sửa mẫu thêm css vào trước thẻ ]]></b:skin>

.thong-ke{height:230px}
.feau{height:120px;background:#00a7d0;font-size:23px;color:#fff;padding:0;text-decoration:none}
.feau h3{margin-top:0;margin-left:10px;margin-bottom:5px;font-size:25px;font-weight:600;text-shadow:0 1px 1px rgba(0,0,0,.2);
}
.feau p{font-size:16px;margin-left:10px}
.title-blog{padding:10px}
.logo-widget img{max-height:90px;border:3px solid #fff;border-radius:50%;margin-top:-20px;margin-left:calc(50% - 40px)}
.info{float:left;width:100%;background:#fff;min-height:101px;margin-top:-45px;height:101px}
.col-widget{float:left;width:33%;height:35px;font-size:15px;color:#23282d;margin-top:45px;text-align:center}
.col-widget h5{margin:0;padding:0;font-weight:600;font-size:16px}

Bước 3
1. Tại phần chỉnh sửa HTML hãy chuyển tới tiện ích Stats1
2. Mở rộng toàn bộ code ra

3. Bạn hãy thay toàn bộ code được bôi đen trong hình thành code dưới

<b:widget id='Stats1' locked='false' title='' type='Stats'> 
            <b:includable id='main'>
<div class='thong-ke'>
<div class="feau">
<div class='title-blog'>
<h3>Tdb Blogspot</h3>
<p>Full Stack Developer</p>
</div>
</div>
<div class="logo-widget"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguxvEVi9DYqdgU-XFijFOSBnXSanrItLM3bjmawHXU54DLVZ2uGC5cIWCHDmOubCjGXZg8hT5cYXVcOjp0GARU9qSy2vXpNSBRKeVUCWH89iNh1ExpunBJnWwL2lSnV2PCcTOb2xRs1C-t/s1600/tdb.jpg" width='90' height='90' draggable='false' oncontextmenu='return false'/> </div> 
<div class="info">
    <div class="col-widget so-bai">
        <h5><script style="text/javascript">
            function showpostcount(json) {
                document.write(parseInt(json.feed.openSearch$totalResults.$t, 10));
            }
        </script>
        <script src="/feeds/posts/default?alt=json-in-script&amp;callback=showpostcount"></script></h5>
<span>POST</span>
    </div>
    <div class="col-widget so-comment">
        <h5><script style="text/javascript">
            function numberOfComments(json) {
                document.write(json.feed.openSearch$totalResults.$t);
            }
        </script>
        <script src="/feeds/comments/default?alt=json-in-script&amp;callback=numberOfComments"></script></h5>
<span>COMMENTS</span>
    </div>
    <div class="col-widget luot-view">
        <h5 expr:id='data:widget.instanceId + &quot;_totalCount&quot;'>&amp;hellip;</h5>
<span>VIEWS</span>
    </div>
</div>
              </div>           
</b:includable>
          </b:widget>

Thay Tdb Blogspot thành tên blog của bạn hoặc tùy ý.
Chúc cài đặt thành công.

Share this post

La Ngọc Hưng

Chào các bạn đến với blog truyện tổng hợp của mình nhé !

Facebook

WhatsApp

Instagram

Subscribe Our Newsletter

Posting Terkait