Tiện ích thống kê cho blogger

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:includableid='main'>  <b:ifcond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>  <divclass='widget-content'>           <!-- Add the bg color to the header using any of the bg-* classes -->            <divclass='aubout-admin'>             <div class='user1'>  <ahref='https://plus.google.com/u/0/114190850184370024491'rel='nofollow' target='_blank'title='Lê Bá Long Blog'>    <imgalt='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>      <!-- /.widget-user-image -->             <div class='admin-1'> <h3class='admin-username'>Lê Quang Thìn</h3>              <h5class='admin-desc'><iclass='far fa-gem'/> Designer and Developer <i class='far fa-gem'/></h5>   </div>           </div>    <!-- Content is going to be visible when data will be fetched from server. -->    <divexpr:id='data:widget.instanceId + &quot;_content&quot;'style='display: none;'>      <!-- Counter and image will be injected later via AJAX call. -->      <b:ifcond='data:showSparkline'>        <img alt='Sparkline'expr:id='data:widget.instanceId + &quot;_sparkline&quot;'height='30' width='75'/>     </b:if>      <spanexpr:class='&quot;counter-wrapper &quot; + (data:showGraphicalCounter ? &quot;graph-counter-wrapper&quot; : &quot;text-counter-wrapper&quot;)'><aexpr:id='data:widget.instanceId + &quot;_totalCount&quot;'/></span>      <b:includename='quickedit'/>    </div> </div><scripttype='text/javascript'>   function postCount(json){   document.write(&quot;<spanclass='counts post2'> Tổng bài viết &quot;);    var count = json.feed.openSearch$totalResults.$t;    document.write(&quot;<spanclass='count all-posts'>&quot; + count + &quot;</span>&quot;);    document.write(&quot;</span>&quot;)  }  functionnumberOfComments(json){   document.write(&quot;<spanclass='counts comment2'>Tổng nhận xét &quot;);    var count = json.feed.openSearch$totalResults.$t;    document.write(&quot;<spanclass='count all-comments'>&quot; + count + &quot;</span>&quot;);    document.write(&quot;</span>&quot;)   } </script><scriptsrc='/feeds/posts/default?alt=json-in-script&amp;max-results=0&amp;callback=postCount'type='text/javascript'/><scriptsrc='/feeds/comments/default?alt=json-in-script&amp;max-results=0&amp;callback=numberOfComments'/></b:includable>         </b:widget>

Bước 3: Tìm đoạn ]]></b:skin> 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 1pxrgba(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;}

Lưu ý: Nếu không hiện số lượng truy cập blog bạn chỉ cần sửa &lt;!--</body>--&gt; &lt;/body&gt; thành </body> là được