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

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ẻ

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

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://1.bp.blogspot.com/-TLYM6HLcupg/W4jgObJoDEI/AAAAAAAACaU/Z5ObCUPH4YU3NWNvEIG3GrIqFd0PQVlvQCLcBGAs/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

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

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://1.bp.blogspot.com/-TLYM6HLcupg/W4jgObJoDEI/AAAAAAAACaU/Z5ObCUPH4YU3NWNvEIG3GrIqFd0PQVlvQCLcBGAs/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
Tạo tiện ích thống kê đẹp cho blogspot
Để 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.
Tạo tiện ích thống kê đẹp cho blogspot
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
Tạo tiện ích thống kê đẹp cho blogspot
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://1.bp.blogspot.com/-TLYM6HLcupg/W4jgObJoDEI/AAAAAAAACaU/Z5ObCUPH4YU3NWNvEIG3GrIqFd0PQVlvQCLcBGAs/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.
Thủ thuật blogspot - Tdb Blogspot
Facebook Comments
Blogger Comments