- 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://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
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
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.
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 31. 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
<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&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 luot-view">
<h5 expr:id='data:widget.instanceId + "_totalCount"'>&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.