Hướng dẫn tạo tiện ích thống kê cho blogspot tuyệt đẹp

Xin chào tất cả các bạn hôm nay mình xin hướng dẫn các bạn tạo tiện ích thống kê đẹp mắt cho blogger cực đơn giản toàn bộ code mình lấy bên toishare về để edit lại và chia sẻ cho các bạn mong các bạn ủng hộ blog.

Hướng dẫn cách làm
Bước 1: Để tạo widget này các bạn vào Bố cục -> Thêm tiện ích -> Kéo xuống dưới chọn Thống kê blog và chọn kiểu 1 nhé
Bước 2: Tìm đoạn id='Stats1' và thay toàn bộ widget của id='Stats1' thành đoạn code bên dưới

<b:widget id='Stats1' locked='false' title='' type='Stats' version='1'> <b:widget-settings> <b:widget-settingname='showGraphicalCounter'>false</b:widget-setting> <b:widget-settingname='showAnimatedCounter'>false</b:widget-setting> <b:widget-settingname='showSparkline'>false</b:widget-setting> <b:widget-settingname='sparklineStyle'>BLACK_TRANSPARENT</b:widget-setting> <b:widget-settingname='timeRange'>ALL_TIME</b:widget-setting> </b:widget-settings> <b:includable id='main'> <b:ifcond='data:title != ""'><h2><data:title/></h2></b:if> <div class='widget-content'>  <div class='aubout-admin'> <div class='user1'> <ahref='https://plus.google.com/u/0/114190850184370024491' rel='nofollow' target='_blank' title='Lê Bá Long Blog'> <img alt='Việt Blogger' src='https://i.imgur.com/KVGfn7v.jpg'/> <span class='verified-user-icon'> <svgfocusable='false' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'> <path d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z'/> </svg> </span> </a></div>  <div class='admin-1'> <h3 class='admin-username'>Lê Quang Thìn</h3> <h5 class='admin-desc'><i class='far fa-gem'/> Designer and Developer <i class='far fa-gem'/></h5> </div> </div>  <divexpr:id='data:widget.instanceId + "_content"' style='display: none;'>  <b:if cond='data:showSparkline'> <img alt='Sparkline' expr:id='data:widget.instanceId + "_sparkline"' height='30' width='75'/> </b:if> <span expr:class='"counter-wrapper " + (data:showGraphicalCounter ? "graph-counter-wrapper" : "text-counter-wrapper")'><aexpr:id='data:widget.instanceId + "_totalCount"'/></span> <b:include name='quickedit'/> </div> </div><script type='text/javascript'> function postCount(json){ document.write("<span class='counts post2'> Tổng bài viết "); var count = json.feed.openSearch$totalResults.$t; document.write("<span class='count all-posts'>" + count + "</span>"); document.write("</span>") } functionnumberOfComments(json){ document.write("<span class='counts comment2'> Tổng nhận xét "); var count = json.feed.openSearch$totalResults.$t; document.write("<span class='count all-comments'>" + count + "</span>"); document.write("</span>") } </script>
  
<script src='/feeds/posts/default?alt=json-in-script&max-results=0&callback=postCount' type='text/javascript'/><scriptsrc='/feeds/comments/default?alt=json-in-script&max-results=0&callback=numberOfComments'/></b:includable> </b:widget>

Bước 3: Tìm đoạn ]]> và dán toàn bộ đoạn css bên dưới lên nó nhé

#Stats1{border:0!important;box-shadow:0 1px 1px rgba(0,0,0,.1);border-radius:3px}#Stats1 .widget-content{padding:0!important}.aubout-admin{background-color:#464646;color:#fff;padding:20px;border-top-right-radius:3px;border-top-left-radius:3px;height:auto}.admin-image img{width:85px;height:auto;float:left;border-radius:50%;left:30px}.admin-username,.admin-desc{margin-left:0}.admin-username{margin-top:5px;margin-bottom:5px;font-size:24px;font-weight:600;font-family: Roboto Condensed; text-transform: uppercase;margin-left: 95px;}.admin-desc{margin-left: 80px;;margin-top:0;font-size:14px;font-weight:300}#Stats1{background:#fff.Stats .counter-wrapper!important;padding:0!important}a#Stats1_totalCount{float:right;background:#dd4b39;width:auto;line-height:22px;color:#fff;padding:0 10px;border-radius:20px;margin:10px;font-size:13px;font-weight:600}.Stats .counter-wrapper{height:43px;text-align:right;font-weight:400;line-height:41px;color:#333;font-size:16px;border-bottom:1px solid #f4f4f4;padding:0 0 0 10px}.Stats .counter-wrapper:after{content:"Tổng lượt xem ";float:left;text-align:left;font-size:16px;color:#333}.counts{display:inline-block;font-size:16px;line-height:20px;color:#333;border-bottom:1px solid #f4f4f4;padding:10px}.Stats .counter-wrapper,.counts{width:100%;box-sizing:border-box}.counts:last-child{border:0}.counts .count{display:inline-block;font-size:13px;font-weight:600;vertical-align:top;direction:ltr;float:right;color:#fff;width:40px;text-align:center;line-height:22px;border-radius:16px}.counts:hover .titles:before{color:#333!important;border-radius:2px;border-color:rgba(255,255,255,.1)}.post 2{margin-bottom:10px}.all-posts{background:#00a65a}.all-comments{background:#00c0ef}span.counter-wrapper:hover,span.counts:hover{color:#444;background:#f7f7f7;cursor:pointer}.user1 a { display: block; color: unset;}.user1 img { width: 100%; height: 100%; -webkit-border-radius: 50%; border-radius: 50%; border: 1px solid rgba(0,0,0,0.12);}.user1 .verified-user-icon { bottom: 9px; position: absolute; right: 0; display: inline-block; height: 14px; width: 14px;}.user1 .verified-user-icon svg { display: block; height: 100%; width: 100%;}.user1 .verified-user-icon svg path { fill: #4285F4; paint-order: stroke; stroke-width: 3px; stroke: #ffffff;}.user1 { display: inline-block; height: 96px; width: 96px; position: relative;margin-left: 120px;}.user1 img { border: 4px solid rgba(255, 255, 255, 0.12);}.user1 .verified-user-icon { bottom: 38px; position: absolute; right: -13px; display: inline-block; height: 24px; width: 24px;}