Tạo nút chia sẻ mạng xã hội cho Blogger có bộ đếm

Bạn thường thấy các tiện ích chia sẻ mạng xã hội đơn giản với những nút share bình thường thì còn gì thú vị hơn khi những lượt chia sẻ trên blog của bạn được thống kê lại, qua đó bạn sẽ biết được mức độ quan tâm của người dùng đối với blog của mình. Đồng Việt sẽ giúp bạn thêm Widget donreach cho blog của mình.

Tạo nút chia sẻ mạng xã hội có bộ đếm cho Blogger

Đây là widget bên thứ ba - được cung cấp bởi donreach.com nhưng khá hữu ích cho blog của bạn. Ngoài ra bạn có thể tham khảo các tiên ích khác như Addthis,...

Các bước thực hiện

Bạn truy cập Blogger → Mẫu → Chỉnh sửa HTML và tìm đoạn hàm sau

 <b:includable id='post' var='post'>

Bên trong hàm này bạn tiếp tục tìm đoạn

 <data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div> 

Tiếp đến bạn chèn đoạn code sau vào trên thẻ </div> 

 <div class="don-share" data-style="icons" data-limit="3">
  <div class="don-share-total"></div>
  <div class="don-share-facebook"></div>
  <div class="don-share-twitter"></div>
  <div class="don-share-google"></div>
  <div class="don-share-linkedin"></div>
  <div class="don-share-pinterest"></div>
  <div class="don-share-tumblr"></div>
  <div class="don-share-stumbleupon"></div>
  <div class="don-share-reddit"></div>
  <div class="don-share-hackernews"></div>
  <div class="don-share-buffer"></div>
  <div class="don-share-xing"></div>
  <div class="don-share-pocket"></div>
  <div class="don-share-fancy"></div>
  <div class="don-share-yummly"></div>
  <div class="don-share-scoopit"></div>
  <div class="don-share-weibo"></div>
  <div class="don-share-vk"></div>
  <div class="don-share-mailru"></div>
  <div class="don-share-odnoklassniki"></div>
  <div class="don-share-hatena"></div>
</div>
<script type="text/javascript">
  (function() {
    var dr = document.createElement('script');
    dr.type = 'text/javascript'; dr.async = true;
    dr.src = '//share.donreach.com/buttons.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dr);
  })();
</script>

Cuối cùng bạn thêm đoạn code sau vào trước thẻ đóng ]]></b:skin

 .don-share .don-share-total{position:relative!important}
.don-share .don-share-total:after{bottom:0!important} 

Lưu ý

• Với đoạn code này, bạn sẽ tạo được tiện ích giống demo hình ở trên. Ngoài ra các bạn có thể xem thêm các style khác tại trang chủ donreach.com