Chèn nút Share, Like, G+, Tweet cho blogspot với hiệu ứng đẹp

bài viết về chèn mạng xã hội dười bài viết để khách truy cập vào blog bạn khi khách thích và hài lòng về một bài viết nào đó của bạn có thể chia sẻ bài viết bằng cách Share, Like, G+ hoặc Tweet điều này giúp blog bạn có thêm lượng truy cập và củng có lợi cho SEO rất nhiều.

Get PHP Scripts Here = https://github.com/abeMedia/shareCount

Cách tiến hành chèn Share, Like, G+, Tweet dưới bài viết:
Bước 1: Đăng nhập vào tài khoản blogger của bạn
Bước 2: Chọn Mẫu
Bước 3: Chỉnh sửa HTML >> Nhấn Ctrl+F tìm đến thẻ ]]></b:skin> thêm đoạn CSS bên dưới trước nó

/* CSS END SHARE BUTTIONS */ .tbn_horizontal_sharebar { position: relative; background: none; z-index: 2; width: 100%; padding: 10px 0; display: inline-block; font-family: sans-serif; margin: 5px 0px; 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: 0px !important; padding-top: 5px!important; margin: 0 !important; line-height: 8px; border-radius: 75% 0; } .tbn_horizontal_sharebar .Share_buttons .share { border: none; margin: 0px 5px 0px 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: 0px; margin: -4px 0px 2px 0; min-height: 15px; padding: 0px; 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: 0px 5px; background-color: rgba(0,0,0,0.28); border-radius: 0px 0px 0px 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: 0px 5px 0px 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; } }

 Sau khi chèn CSS xong chúng ta tìm đến thẻ <div class='post-footer'> thứ 2 và chèn đoạn Code bên dưới dưới nó

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function () {
  var shareUrl = $("link[rel=canonical]").attr("href");
    $.getJSON('https://share-count.appspot.com/?url=' + encodeURIComponent(shareUrl) + "&callback=?", function (data) {
        shares = data.shares;
        $(".count").each(function (index, el) {
            service = $(el).parents(".share-btn").attr("data-service");
            count = shares[service];
            if (count > 1000) {
                count = (count / 1000).toFixed(1);
                if (count > 1000) count = (count / 1000).toFixed(1) + "M";
                else count = count + "k";
            }
            $(el).html(count);
        });
    });
});
//]]></script>
<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 @TwistBlogger - &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>
</b:if>
</b:if>

<link href='http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.css' rel='stylesheet'/>