Nút chia sẻ mạng xã hội cho Blogspot có lượt đếm chia sẽ

Tạo nút chia sẻ bài viết lên mạng xã hội cho Blogspot thì không còn lạ gì nữa, đa số những template blogspot hiện nay đều có, không thì cũng chỉ cần một lát lên google tìm ra cả một lô bài hướng dẫn cài đặt tiện ích này cho blog của bạn với đủ kiểu dáng và hình thức khác nhau…Bla..Bla…

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

Bình thường mình cũng chẳng định viết bài này làm gì vì tìm trên google cũng ra một đống, nhưng hôm nay lang thang trên blog của một bạn Indonesia thì thấy bài chia sẻ này, điều khá hay là tiện ích nút chia sẻ lên mạng xã hội cho Blogspot của bạn ấy có thêm tính năng tự động đếm lượt số chia sẻ thông qua API của trang web http://donreach.com/social-share-count vì mình chưa thấy bài nào trên google (hay mình không biết) nên giờ viết bài chia sẻ với mọi người.

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

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

CSS
/* 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/> hay là thẻ <div class=’post-footer’> cũng được, tùy bố cục và mục đích sử dụng của bạn.
HTML
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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='&quot;   http://www.facebook.com/share.php?v=4&amp;   src=bm&amp;   u=&quot; + data:post.url + &quot;   &amp;   t=&quot; + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   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='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot; via @PhanHungBlog - &quot;' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   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='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' onclick='javascript:window.open(this.href,&quot;   &quot;   ,&quot;   menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600&quot;   );   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='&quot;   http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;   &amp;media=&quot; + data:blog.postImageUrl + &quot;&amp;description=&quot; + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   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='&quot;   http://www.linkedin.com/shareArticle?mini=true&amp;   url=&quot; + data:post.url + &quot;   &amp;   title=&quot; + data:post.title + &quot;   &amp;   summary=&amp;   source=&quot;   ' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   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 Script sao vào trên thẻ </body> rồi lưu template lại.
JS
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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>

Chúc Các bạn Thành Công

Tags : #Blogger#Css Blogger#widgets Blogger

Share This :

Unknown

• Next Post Exploit: Persistence – Cài Backdoor trên máy nạn nhân
• Previous Hiệu ứng Loading Giống Youtube Chuẩn Từng Giây