Lorem ipsum dolor sit amet, consectetur adipiscing elit. Test link
Home
Blogger
Tips Blogger

Share Button Chia Sẻ Responsive Có Bộ Đếm Cho Blogspot



Cài Đặt Share Button Responsive với Count Blogspot - Hôm nay mình xin chia sẻ một code mà mình sưu tầm được. Đây là tiện ích rất hữu ích cho blogger, nó đơn giản và dễ cài đặt. Hiệu quả mà nó mang lại không hề đơn giản chút nào :D

Code này sử dụng fontawesome, đảm bảo răng website của bạn đã chèn link fontawesome.




Hướng dẫn cài đặt Responsive Button Chia sẻ với Counter Blog


1. Đăng nhập vào Blogger > Template > Chỉnh sửa HTML > Coppy đoạn bên dưới và dán nó sau thẻ ]]></b:skin> hoặc </style>


/* Share Button dengan Counter untuk Blogger by http://twistedshape.blogspot.com */
.arlina_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)}
.arlina_share_button .share_blog {display:block;}
.arlina_share_button .share_blog .wrap {text-align:center;margin:0 auto;display:inline-block;min-width:41px;}
.arlina_share_button .share_blog .wrap1 {display:inline-block;width:31px;float:left;}
.arlina_share_button .share_blog ul {margin:0;padding:0;}
.arlina_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}
.arlina_share_button .share_blog ul li a,.arlina_share_button .share_blog ul li a:hover{color:#fff;cursor:pointer;line-height:32px;height:100%;display:block;text-decoration:none}
.arlina_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)}
.arlina_share_button .share_blog .btn_fb{background:#3a579a}.arlina_share_button .share_blog .btn_fb:hover{background:#314a83}.arlina_share_button .share_blog .btn_twtr{background:#00abf0}.arlina_share_button .share_blog .btn_twtr:hover{background:#0092cc}.arlina_share_button .share_blog .btn_gplus{background:#df4a32}.arlina_share_button .share_blog .btn_gplus:hover{background:#be3f2b}.arlina_share_button .share_blog .btn_pntrst{background:#cd1c1f}.arlina_share_button .share_blog .btn_pntrst:hover{background:#ae181a}.arlina_share_button .share_blog .btn_linkdin{background:#2554BF}.arlina_share_button .share_blog .btn_linkdin:hover{background:#224EB4}
.arlina_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}
.arlina_share_button .share_blog .share{margin:5px 5px 0 0;overflow:visible;width:95px}
.arlina_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}
.arlina_share_button .share_blog .btn_fb .share-btn,.arlina_share_button .share_blog .btn_twtr .share-btn,.arlina_share_button .share_blog .btn_gplus .share-btn,.arlina_share_button .share_blog .btn_pntrst .share-btn,.arlina_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) {
 .arlina_share_button .share_blog .btn_linkdin {width:34px;}
.arlina_share_button .share_blog .btn_fb .share-btn,.arlina_share_button .share_blog .btn_twtr .share-btn,.arlina_share_button .share_blog .btn_linkdin .share-btn,.arlina_share_button .share_blog .btn_gplus .share-btn,.arlina_share_button .share_blog .btn_pntrst .share-btn{display:none}}
 @media only screen and (max-width:768px) {
.arlina_share_button .share_blog ul li a,.arlina_share_button .share_blog ul li a:hover{color:#fff;cursor:pointer;line-height:32px;font-size:11px;height:100%;display:block}.arlina_share_button .share_blog .wrap{min-width:34px}.arlina_share_button .share_blog .btn_linkdin,.arlina_share_button .share_blog .btn_pntrst{width:30px}.arlina_share_button .share_blog ul li{margin:1px 3px}}
 @media only screen and (max-width:479px) {
 .arlina_share_button .share_blog .share{border:0;margin:0 5px 0 1px;overflow:visible;width:80px}.arlina_share_button .share_blog ul li{width:25px;margin:2px;}.arlina_share_button .share_blog .wrap{display:none}.arlina_share_button .share_blog ul li .fa{width:25px}}

2. Thêm mã dưới đây vào <data:post.body/> hoặc <div class='post-footer'> hoặc nơi cần đặt tiện ích.


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='arlina_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 @BBlog - &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>

Thay thế phần bôi đen bằng tên của bạn.

3. Thêm đoạn code sau đây vào trên thẻ </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
// Share Button with Counter
$(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>

4. Lưu lại và kiểm tra kết quả.


Như vậy là bạn đã Cài Đặt Share Button Responsive với Count Blog thành công!

Post a Comment