Nút Chia Sẻ Mạng Xã Hội Có Lượt Đếm Cho Blogspot

Sử dụng tiện ích này vào blog sẽ giúp người dùng dễ dàng chia sẻ link bài viết lên những trang mạng xã hội hơn,từ đó tăng lượng truy cập cho blog.


Bước 1 : Đăng nhập vào blog chọn chỉnh sửa Templeate, dán đoạn code sau lên trên thẻ 
]]></b:skin>

/* Share Button dengan Counter untuk Blogger by https://anonsecvn.blogspot.com*/

.phanhung_share_button{position:relative;z-index:2;width:100%;padding:20px 0;display:inline-block;margin:20px auto;border-bottom:2px solid rgba(0,0,0,.08)}

.phanhung_share_button .share_blog {display:block;}

.phanhung_share_button .share_blog .wrap {text-align:center;margin:0 auto;display:inline-block;min-width:41px;}

.phanhung_share_button .share_blog .wrap1 {display:inline-block;width:31px;float:left;}

.phanhung_share_button .share_blog ul {margin:0;padding:0;}

.phanhung_share_button .share_blog ul li{list-style:none;list-style-type:none;padding:0;margin:2px;float:left;width:16%;max-width:115px;display:inline-block;font-size:13px;overflow:hidden;text-align:left;height:32px;line-height:32px;color:#fff;border-radius:3px;transition:all .4s}

.phanhung_share_button .share_blog ul li a,.phanhung_share_button .share_blog ul li a:hover{color:#fff;cursor:pointer;line-height:32px;height:100%;display:block;text-decoration:none}

.phanhung_share_button .share_blog ul li .fa{color:#fff;font-size:16px;font-weight:normal;font-family:FontAwesome;display:inline-block;text-align:center;padding:0;height:32px;line-height:inherit;width:30px;background-color:rgba(0,0,0,.05)}

.phanhung_share_button .share_blog .btn_fb{background:#3a579a}.phanhung_share_button .share_blog .btn_fb:hover{background:#314a83}.phanhung_share_button .share_blog .btn_twtr{background:#00abf0}.phanhung_share_button .share_blog .btn_twtr:hover{background:#0092cc}.phanhung_share_button .share_blog .btn_gplus{background:#df4a32}.phanhung_share_button .share_blog .btn_gplus:hover{background:#be3f2b}.phanhung_share_button .share_blog .btn_pntrst{background:#cd1c1f}.phanhung_share_button .share_blog .btn_pntrst:hover{background:#ae181a}.phanhung_share_button .share_blog .btn_linkdin{background:#2554BF}.phanhung_share_button .share_blog .btn_linkdin:hover{background:#224EB4}

.phanhung_share_button .share_blog .share.h6{font-size:10px;font-weight:700;text-align:center;color:#999;border-top:1px solid #e3e3e3;padding:8px 0 0;margin:8px auto 0;line-height:8px;width:42px;letter-spacing:.5px}

.phanhung_share_button .share_blog .share{margin:5px 5px 0 0;overflow:visible;width:95px}

.phanhung_share_button .share_blog .share .count.h4{font-size:22px;font-weight:700;text-align:center;color:#ff8349;line-height:16px;margin:-8px 0 0;min-height:15px}

.phanhung_share_button .share_blog .btn_fb .share-btn,.phanhung_share_button .share_blog .btn_twtr .share-btn,.phanhung_share_button .share_blog .btn_gplus .share-btn,.phanhung_share_button .share_blog .btn_pntrst .share-btn,.phanhung_share_button .share_blog .btn_linkdin .share-btn{position:relative;color:#fff;display:inline-block;text-align:center;font-weight:700;font-size:11px;float:right;min-width:12px;padding:0 8px 0 0}

 @media only screen and (max-width: 979px) {

 .phanhung_share_button .share_blog .btn_linkdin {width:34px;}

.phanhung_share_button .share_blog .btn_fb .share-btn,.phanhung_share_button .share_blog .btn_twtr .share-btn,.phanhung_share_button .share_blog .btn_linkdin .share-btn,.phanhung_share_button .share_blog .btn_gplus .share-btn,.phanhung_share_button .share_blog .btn_pntrst .share-btn{display:none}}

 @media only screen and (max-width:768px) {

.phanhung_share_button .share_blog ul li a,.phanhung_share_button .share_blog ul li a:hover{color:#fff;cursor:pointer;line-height:32px;font-size:11px;height:100%;display:block}.phanhung_share_button .share_blog .wrap{min-width:34px}.phanhung_share_button .share_blog .btn_linkdin,.phanhung_share_button .share_blog .btn_pntrst{width:30px}.phanhung_share_button .share_blog ul li{margin:1px 3px}}

 @media only screen and (max-width:479px) {

 .phanhung_share_button .share_blog .share{border:0;margin:0 5px 0 1px;overflow:visible;width:80px}.phanhung_share_button .share_blog ul li{width:25px;margin:2px;}.phanhung_share_button .share_blog .wrap{display:none}.phanhung_share_button .share_blog ul li .fa{width:25px}}

Bước 2 : Dán đoạn code sau vào bên trên hoặc dưới thẻ <data:post.body/> Hoặc là thẻ <div class='post-footer'> cũng được tùy bố cục của bạn.

<b:if cond='data:blog.pageType == "item"'>

<div class='phanhung_share_button'>

<div class='share_blog'>

<ul>
<li class='share'>

<div class='share-btn' data-service='total'>

<div class='count h4'/>

<div class='share h6'>
SHARES</div>
</div>
</li>
<li class='btn_fb'><a expr:href='"   http://www.facebook.com/share.php?v=4&   src=bm&   u=" + data:post.url + "   &   t=" + data:post.title' onclick='window.open(this.href,"   sharer"   ,"   toolbar=0,status=0,width=626,height=436"   );   return false;' rel='nofollow'>

<div class='wrap1'>
<i class='fa fa-facebook'/> </div>
<div class='wrap'>
Share</div>
<div class='share-btn' data-service='facebook'>

        <div class='count'/>
</div>
</a>

  </li>
<li class='btn_twtr'><a expr:href='"https://twitter.com/intent/tweet?url=" + data:blog.url + "&text=" + data:post.title + " via @PhanHungBlog - "' onclick='window.open(this.href,"   sharer"   ,"   toolbar=0,status=0,width=626,height=436"   );   return false;' rel='nofollow'>

  <div class='wrap1'>
<i class='fa fa-twitter'/></div>
<div class='wrap'>
Tweet</div>
<div class='share-btn' data-service='twitter'>

        <div class='count'/>
</div>
</a>

  </li>
<li class='btn_gplus'><a expr:href='"http://plus.google.com/share?url=" + data:blog.url' onclick='javascript:window.open(this.href,"   "   ,"   menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600"   );   return false;   ' rel='nofollow'>

  <div class='wrap1'>
<i class='fa fa-google-plus'/></div>
<div class='wrap'>
Share</div>
<div class='share-btn' data-service='google'>

        <div class='count'/>
</div>
</a>

  </li>
<li class='btn_pntrst'><a data-pin-config='beside' expr:href='"   http://pinterest.com/pin/create/button/?url=" + data:post.url + "   &media=" + data:blog.postImageUrl + "&description=" + data:post.title' onclick='window.open(this.href,"   sharer"   ,"   toolbar=0,status=0,width=626,height=500"   );   return false;' rel='nofollow'>

  <div class='wrap1'>
<i class='fa fa-pinterest'/></div>
<div class='wrap'>
Pin</div>
<div class='share-btn' data-service='pinterest'>

        <div class='count'/>
</div>
</a>

  </li>
<li class='btn_linkdin'><a expr:href='"   http://www.linkedin.com/shareArticle?mini=true&   url=" + data:post.url + "   &   title=" + data:post.title + "   &   summary=&   source="   ' onclick='window.open(this.href,"   sharer"   ,"   toolbar=0,status=0,width=626,height=500"   );   return false;' rel='nofollow'>

  <div class='wrap1'>
<i class='fa fa-linkedin'/></div>
<div class='wrap'>
Share</div>
<div class='share-btn' data-service='linkedin'>

        <div class='count'/>
</div>
</a>

</li>
</ul>
</div>
</div>
</b:if>


Bước 3 : Cuối cùng là thêm đoạn code sau vào trên thẻ </body>

JS

<b:if cond='data:blog.pageType == "item"'>

<script type='text/javascript'>

//<![CDATA[

// Share Button with Counter by anonsecvn.blogspot.com

$(document).ready(function(){var t=$("link[rel=canonical]").attr("href");$.getJSON("http://sharecount.twistblogger.com/?url="+encodeURIComponent(t)+"&callback=?",function(t){shares=t.shares,$(".count").each(function(t,e){service=$(e).parents(".share-btn").attr("data-service"),count=shares[service],count>1e3&&(count=(count/1e3).toFixed(1),count>1e3?count=(count/1e3).toFixed(1)+"M":count+="k"),$(e).html(count)})})});

//]]>

</script>

</b:if>

Vậy là xong!







Đánh giá bài viết

Cảm ơn bạn đã đọc bài viết!

  • Mọi thắc mắc, gợi ý hoặc Báo link hỏng xin chia sẻ bên dưới hoặc Gửi Tin Nhắn
  • Không chèn liên kết quảng cáo, spam khi đăng nhận xét.
  • Không sử dụng những từ ngữ thô tục, vi phạm thuần phong mỹ tục.

Bình luận bài viết này!