Tạo 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-setting name='showGraphicalCounter'>false</b:widget-setting>              <b:widget-setting name='showAnimatedCounter'>false</b:widget-setting>              <b:widget-setting name='showSparkline'>false</b:widget-setting>              <b:widget-setting name='sparklineStyle'>BLACK_TRANSPARENT</b:widget-setting>              <b:widget-setting name='timeRange'>ALL_TIME</b:widget-setting>            </b:widget-settings>            <b:includable id='main'>  <b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>  <div class='widget-content'>            <!-- Add the bg color to the header using any of the bg-* classes -->            <div class='aubout-admin'>             <div class='user1'>  <a href='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'>      <svg focusable='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'> <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>    <!-- Content is going to be visible when data will be fetched from server. -->    <div expr:id='data:widget.instanceId + &quot;_content&quot;' style='display: none;'>      <!-- Counter and image will be injected later via AJAX call. -->      <b:if cond='data:showSparkline'>        <img alt='Sparkline' expr:id='data:widget.instanceId + &quot;_sparkline&quot;' height='30' width='75'/>      </b:if>      <span expr:class='&quot;counter-wrapper &quot; + (data:showGraphicalCounter ? &quot;graph-counter-wrapper&quot; : &quot;text-counter-wrapper&quot;)'><a expr:id='data:widget.instanceId + &quot;_totalCount&quot;'/></span>      <b:include name='quickedit'/>    </div>  </div><script type='text/javascript'>   function postCount(json){    document.write(&quot;<span class='counts post2'> Tổng bài viết &quot;);    var count = json.feed.openSearch$totalResults.$t;    document.write(&quot;<span class='count all-posts'>&quot; + count + &quot;</span>&quot;);    document.write(&quot;</span>&quot;)  }  function numberOfComments(json){    document.write(&quot;<span class='counts comment2'> Tổng nhận xét &quot;);    var count = json.feed.openSearch$totalResults.$t;    document.write(&quot;<span class='count all-comments'>&quot; + count + &quot;</span>&quot;);    document.write(&quot;</span>&quot;)   } </script><script src='/feeds/posts/default?alt=json-in-script&amp;max-results=0&amp;callback=postCount' type='text/javascript'/><script src='/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 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;}

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 
view-source: toishare.net
edit by: lebalongblog

Star Bình Blog
Lê Quang Thìn
Designer & Developer

Chào các bạn. Với đam mê và sở thích, mình lập nên blog này để lưu trữ những kiến thức, đồng thời cũng chia sẻ những gì mình biết và sưu tầm được tới bạn đọc.

  • Cùng Bình Luận:

    Hiện tại có 15 comments:

    1. ok đca em cũng đang cần cái ni :v trên mobile sao có cái adss dưới màn hình hay dị anh

      ReplyDelete
    2. Này cũng lâu rồi, mà h áp dụng cũng đc.

      ReplyDelete
    3. hế lô a <3 lâu quá mới thấy a ra bài mới

      ReplyDelete
    4. xin phiền bạn cho mk 1 slot liên kết blog nhé,mk đặt bạn rồi,hóng bạn đặt lại
      link blog mình:https://trickertranha2003.blogspot.com/

      ReplyDelete
      Replies
      1. thay trickertranha2003 khi nào không có số 2003 thì mình sẽ xem xét nhé :D thank bạn đã quan tâm

        Delete