Install Custom Stats Widget for Blogger

Install Custom Stats Widget for Blogger

total page views counter widget for blogger

Trong bài viết này, tôi sẽ chia sẻ với bạn tùy chỉnh số liệu thống kê blogger widget. Bằng cách sử dụng tiện ích này, bạn có thể hiển thị tổng số lượt xem trang, tổng số bài đăng và tổng số nhận xét của blog của bạn. Chỉ blogger mới có tổng số lượt xem trang. Sau thời gian đó, tôi sửa đổi một số css và thêm một số kịch bản cho tổng số bài viết và tổng số bình luận. Thiết kế của widget này là hiện đại và sạch sẽ. Tôi đã sử dụng một số biểu tượng sử dụng phông chữ tuyệt vời. Cài đặt widget thống kê tùy chỉnh là các widget blogger rất hữu ích. Trong mẫu của riêng tôi, tôi cũng đang sử dụng tiện ích thống kê tùy chỉnh. Nhưng đây chỉ là tổng số lần xem trang và tổng số bài đăng.

Nó là thiết kế rất độc đáo và thông minh. Một số bạn bè đã yêu cầu tôi chia sẻ các tiện ích blogger này. Sau thời gian đó, tôi chia sẻ điều này với giao diện mới và một tính năng bổ sung khác. Tiện ích blogger này giúp bạn hiển thị Tổng số lần xem trang, nhận xét và tổng số bài đăng trên blog của bạn. Những người muốn làm cho blog của họ trở nên hấp dẫn và đẹp hơn, một số tiện ích blogger giúp họ dễ dàng.


Cách cài đặt tiện ích con số liệu thống kê tùy chỉnh blogger

Dưới đây là một số bước rất đơn giản để cài đặt tiện ích con số liệu thống kê tùy chỉnh blogger. Trong widget blogger này, tôi sử dụng font chữ tuyệt vời và phông chữ PT Sans google. Vì vậy, bạn cũng cần phải thêm các phông chữ trên blog của bạn. Nếu phông chữ tuyệt vời đã được thêm vào blog của bạn. sau đó bỏ qua nó.

Bước 1: Chuyển đến Bố cục> Thêm tiện ích> Thống kê của blog thêm tiện ích con này.

Install Custom Stats Widget for Blogger

Bước 2: Bây giờ, hãy truy cập Edit HTML và tìm các mã bên dưới.
   <b:widget id='Stats1' locked='false' title='Custom Stats' type='Stats' version='1' visible='true'>...</b:widget> 

Bây giờ thay thế dòng này bằng các mã bên dưới.


   <b:widget id='Stats1' locked='false' title='Custom Stats' type='Stats' version='1' visible='true'>
    <b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <!-- 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' src='http://2.bp.blogspot.com/-nsxCtkYnchQ/VLEifAyf97I/AAAAAAAAIlk/9Viyy0W9r04/s1600/FFF.png' title='Sparkline' width='75'/>
      </b:if>
      <b:if cond='data:showGraphicalCounter'>
        <span class='counter-wrapper graph-counter-wrapper' expr:id='data:widget.instanceId + &quot;_totalCount&quot;'/>
      <b:else/>
        <span class='counter-wrapper text-counter-wrapper' expr:id='data:widget.instanceId + &quot;_totalCount&quot;'/>
      </b:if>
<script type='text/javascript'>
function postCount(json){
document.write(&quot;<span class='counts post2'> Total Posts &quot;);
var count = json.feed.openSearch$totalResults.$t;
document.write(&quot;<span class='count'>&quot; + count + &quot;</span>&quot;);
document.write(&quot;</span>&quot;)
}

function numberOfComments(json){
document.write(&quot;<span class='counts comment'> Total Comments &quot;);
var count = json.feed.openSearch$totalResults.$t;
document.write(&quot;<span class='count'>&quot; + count + &quot;</span>&quot;);
document.write(&quot;</span>&quot;)
}

</script>
<script src='/feeds/posts/default?alt=json-in-script&amp;amp;max-results=0&amp;amp;callback=postCount' type='text/javascript'/>
<script src='/feeds/comments/default?alt=json-in-script&amp;amp;max-results=0&amp;amp;callback=numberOfComments'/>


    </div>
  </div>
</b:includable>
  </b:widget> 

Bạn đã hoàn thành 80%. Bây giờ hãy dán tất cả các mã CSS bên dưới trước </head>

 <link href='//fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/> 
<style type='text/css'>
/* Blogger Custom Stats widget by msdesignbd.com */
.Stats img {display:none!important;background-image:none;}
.Stats .counter-wrapper {width:92%;text-align:right;margin:10px;line-height:35px;color:#333;font-weight:700;font-size:16px;margin-left: 0;}
.Stats .counter-wrapper:after {content:&quot;Page Views&quot;;float:left;text-align:left;font-size:13px;font-weight:700;color:#333;}
.counts {display:inline-block;width:92%;font-size:13px;line-height:35px;color:#333;font-weight:700;}
.counts .count {display:inline-block;font-size:16px;height:30px;
vertical-align:top;direction:ltr;float:right;color:#333;font-weight:700!important;}
.counts:hover .titles:before {color:#333!important;border-radius:2px;border-color:rgba(255,255,255,0.1);}
.counter-wrapper.text-counter-wrapper:before, .counts:before {display:inline-block;font-size:13px;font-family:FontAwesome;font-style:normal;font-weight:normal;margin:0 10px 0 10px;float:left;width:10px;text-align:center;}
.counter-wrapper.text-counter-wrapper:before, .counts:before {
display:block;background-color:#fff;color:#333;width:35px;height:35px;font-size:18px;line-height:35px;border-radius:2px;margin:0px 8px 0 0;}
.counter-wrapper.text-counter-wrapper:before {content:&quot;\f06e&quot;;}
.counts.post2:before {content:&quot;\f044&quot;;}
.counts.comment:before {content:&quot;\f0e6&quot;;}
#Stats1_content {width:auto;height:auto;background-color:#fff;}
</style>  

Bạn đã hoàn tất. Bây giờ Save template và xem kết quả bằng cách làm mới trang.

Hy vọng bạn hiểu rằng, làm thế nào để thêm số liệu thống kê widget blogger tùy chỉnh trên blog hoặc trang blogger. Nếu bạn có bất kỳ vấn đề gì, thì vui lòng liên lạc bằng hộp bình luận. Nếu bạn thích tiện ích này, đừng quên chia sẻ bài đăng này với phương tiện truyền thông xã hội của bạn. Hỗ trợ của bạn là tương lai của chúng tôi. Cảm ơn.

Bài viết liên quan:

https://severphim.blogspot.com/2018/05/install-custom-stats-widget-for-blogger.html

Nhận Xét Facebook

Chờ xíu nhé...

Nhận Xét Blogger


Không có nhận xét nào. bạn hãy là người đầu tiên.