Responsive Social Media Share Buttons cho Blogger

Responsive Social Media Share Buttons

Hôm nay sẽ là một Social Share Bar cùng với hiệu ứng vô cùng đẹp mắt. Bạn có thể đặt chúng vào bên dưới mỗi bài đăng để tăng lượng tương tác với độc giả hơn.

CSS

1Vào Mẫu >> Chỉnh sửa HTML và dán đoạn CSS dưới đây trước thẻ ]]></b:skin>

.tbn_horizontal_sharebar{position:relative;background:none;z-index:2;width:100%;padding:10px 0;display:inline-block;font-family:sans-serif;margin:5px 0;border-top:1px dotted rgba(0,0,0,0.05);border-bottom:1px dotted rgba(0,0,0,0.05)}
.tbn_horizontal_sharebar .Share_buttons{display:block}
.tbn_horizontal_sharebar .Share_buttons .wrap{text-align:center;margin:0 auto;display:inline-block;min-width:41px}
.tbn_horizontal_sharebar .Share_buttons .wrap1{display:inline-block;width:31px;float:left}
.tbn_horizontal_sharebar .Share_buttons ul{margin:0;padding:0}
.tbn_horizontal_sharebar .Share_buttons ul li a,.tbn_horizontal_sharebar .Share_buttons ul li a:hover{color:#FFF!important;cursor:pointer;line-height:25px;height:100%;display:block;text-decoration:none}
.tbn_horizontal_sharebar .Share_buttons ul li{list-style:none;list-style-type:none;padding:0;margin:1px;float:left;width:16%;max-width:115px;display:inline-block;font-size:13px;overflow:hidden;text-align:left;height:25px;line-height:25px;color:#fff;border:1px solid rgba(0,0,0,0.04);-webkit-transition:all 0.4s ease-in-out;-moz-transition:all 0.4s ease-in-out;-ms-transition:all 0.4s ease-in-out;-o-transition:all 0.4s ease-in-out;transition:all 0.4s ease-in-out}
.tbn_horizontal_sharebar .Share_buttons ul li .fa{color:#fff;font-size:17px;font-weight:normal;font-family:FontAwesome;display:inline-block;text-align:center;padding:0;height:25px;line-height:inherit;width:30px;background-color:rgba(0,0,0,0.1);border-right:1px solid rgba(0,0,0,0.05)}
/*--Facebook---*/
.tbn_horizontal_sharebar .Share_buttons .btn_fb{background:#3a579a}
.tbn_horizontal_sharebar .Share_buttons .btn_fb:hover{background:#314a83}
/*--Tweeter---*/
.tbn_horizontal_sharebar .Share_buttons .btn_twtr{background:#00abf0}
.tbn_horizontal_sharebar .Share_buttons .btn_twtr:hover{background:#0092cc}
/*--Google Plus---*/
.tbn_horizontal_sharebar .Share_buttons .btn_gplus{background:#df4a32}
.tbn_horizontal_sharebar .Share_buttons .btn_gplus:hover{background:#be3f2b}
/*--Pinterest---*/
.tbn_horizontal_sharebar .Share_buttons .btn_pntrst{background:#cd1c1f}
.tbn_horizontal_sharebar .Share_buttons .btn_pntrst:hover{background:#ae181a}
/*--linkedin---*/
.tbn_horizontal_sharebar .Share_buttons .btn_linkdin{background:#2554BF}
.tbn_horizontal_sharebar .Share_buttons .btn_linkdin:hover{background:#224EB4}
/*---Total Share----*/
.tbn_horizontal_sharebar .Share_buttons .share.h6{font-size:10px;font-weight:bold;text-shadow:none!important;text-decoration:none;text-align:center;color:#000000;border-top:3px solid #FFF600!important;border-bottom:0;padding:0!important;padding-top:5px!important;margin:0!important;line-height:8px;border-radius:75% 0}
.tbn_horizontal_sharebar .Share_buttons .share{border:none;margin:0 5px 0 1px;overflow:visible!important;width:95px!important}
.tbn_horizontal_sharebar .Share_buttons .share .count.h4{font-size:18px;font-weight:bold;text-shadow:none;text-decoration:none;font-family:sans-serif;text-align:center;color:#FF0000;line-height:15px;margin-top:0;margin:-4px 0 2px 0;min-height:15px;padding:0;border:none}
.tbn_horizontal_sharebar .Share_buttons .btn_fb .share-btn,.tbn_horizontal_sharebar .Share_buttons .btn_twtr .share-btn,.tbn_horizontal_sharebar .Share_buttons .btn_gplus .share-btn,.tbn_horizontal_sharebar .Share_buttons .btn_pntrst .share-btn,.tbn_horizontal_sharebar .Share_buttons .btn_linkdin .share-btn{position:relative;color:#C3C3C3;display:inline-block;text-align:center;font-weight:bold;font-size:11px;float:right;min-width:12px;font-family:sans-serif;padding:0 5px;background-color:rgba(0,0,0,0.28);border-radius:0 0 0 15px}
@media only screen and (max-width:979px){.tbn_horizontal_sharebar .Share_buttons .btn_linkdin{width:34px}.tbn_horizontal_sharebar .Share_buttons .btn_fb .share-btn,.tbn_horizontal_sharebar .Share_buttons .btn_twtr .share-btn,.tbn_horizontal_sharebar .Share_buttons .btn_linkdin .share-btn,.tbn_horizontal_sharebar .Share_buttons .btn_gplus .share-btn,.tbn_horizontal_sharebar .Share_buttons .btn_pntrst .share-btn{display:none!important}}
@media only screen and (max-width:768px){.tbn_horizontal_sharebar .Share_buttons ul li a,.tbn_horizontal_sharebar .Share_buttons ul li a:hover{color:#FFF!important;cursor:pointer;line-height:25px;font-size:11px;height:100%;display:block;text-decoration:none}.tbn_horizontal_sharebar .Share_buttons .wrap{min-width:34px}.tbn_horizontal_sharebar .Share_buttons .btn_linkdin,.tbn_horizontal_sharebar .Share_buttons .btn_pntrst{width:30px}.tbn_horizontal_sharebar .Share_buttons ul li{margin:1px 3px}}
@media only screen and (max-width:479px){.tbn_horizontal_sharebar .Share_buttons .share{border:none;margin:0 5px 0 1px;overflow:visible!important;width:80px!important}.tbn_horizontal_sharebar .Share_buttons ul li{width:25px!important;margin:2px;border-radius:50px;border:2px solid rgba(0,0,0,0.14)}.tbn_horizontal_sharebar .Share_buttons .wrap{display:none!important}.tbn_horizontal_sharebar .Share_buttons ul li .fa{width:25px!important}}

2Thêm Thư viện Font-Awesome nếu như blog bạn chưa có, bằng cách thêm vào đoạn code dưới đây vào trước thẻ </head>

<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
//]]>
</script>

jQuery

3Tiếp tục tìm đến thẻ </body> và dán đoạn code dưới đây trước thẻ đó.

<script type='text/javascript'>
//<![CDATA[
var _0x1de3=["\x68\x72\x65\x66","\x61\x74\x74\x72","\x6C\x69\x6E\x6B\x5B\x72\x65\x6C\x3D\x63\x61\x6E\x6F\x6E\x69\x63\x61\x6C\x5D","\x68\x74\x74\x70\x3A\x2F\x2F\x73\x68\x61\x72\x65\x63\x6F\x75\x6E\x74\x2E\x74\x77\x69\x73\x74\x62\x6C\x6F\x67\x67\x65\x72\x2E\x63\x6F\x6D\x2F\x3F\x75\x72\x6C\x3D","\x26\x63\x61\x6C\x6C\x62\x61\x63\x6B\x3D\x3F","\x73\x68\x61\x72\x65\x73","\x64\x61\x74\x61\x2D\x73\x65\x72\x76\x69\x63\x65","\x2E\x73\x68\x61\x72\x65\x2D\x62\x74\x6E","\x70\x61\x72\x65\x6E\x74\x73","\x74\x6F\x46\x69\x78\x65\x64","\x4D","\x6B","\x68\x74\x6D\x6C","\x65\x61\x63\x68","\x2E\x63\x6F\x75\x6E\x74","\x67\x65\x74\x4A\x53\x4F\x4E","\x72\x65\x61\x64\x79"];$(document)[_0x1de3[16]](function(){var _0xf6dfx1=$(_0x1de3[2])[_0x1de3[1]](_0x1de3[0]);$[_0x1de3[15]](_0x1de3[3]+encodeURIComponent(_0xf6dfx1)+_0x1de3[4],function(_0xf6dfx2){shares=_0xf6dfx2[_0x1de3[5]];$(_0x1de3[14])[_0x1de3[13]](function(_0xf6dfx3,_0xf6dfx4){service=$(_0xf6dfx4)[_0x1de3[8]](_0x1de3[7])[_0x1de3[1]](_0x1de3[6]);count=shares[service];if(count>1000){count=(count/1000)[_0x1de3[9]](1);if(count>1000){count=(count/1000)[_0x1de3[9]](1)+_0x1de3[10]}else {count=count+_0x1de3[11]};};$(_0xf6dfx4)[_0x1de3[12]](count);});});});
//]]>
</script>

3Thêm Thư viện jQuery sau nếu như blog bạn chưa có vào sau đoạn code trên

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

HTML

4Dán đoạn code sau vào vị trí bạn muốn đặt Share Bar.

<div class='tbn_horizontal_sharebar'>
<div class='Share_buttons'>
  <ul>
  <li class='share'>
    <div class='share-btn' data-service='total'>
        <div class='count h4'></div>
        <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"></i> </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 @Iris_Tips - &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'></i></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'></i></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'></i></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'></i></div>
  <div class="wrap">Share</div>
  <div class='share-btn' data-service='linkedin'>
        <div class='count'/></div>
  </a>
  </li>
  </ul>
  </div>
  </div>

Chỉnh sửa: via @Iris_Tips thành tài khoản Twitter của bạn.

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Twist/Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm