Thanh chia sẻ cho blogspot đẹp cho blogspot ở cuối bài viết

Hôm trước mình có giới thiệu cho các bạn thanh chia sẻ trượt dọc tuyệt đẹp cho blogger, hôm nay Thiết kế weblog giới thiệu đến các bạn một style mới dùng để chia sẻ bài viết đặt ở cuối bài viết. Style này đã có vài trang thủ thuật blogspot giới thiệu nhưng khi blogger thực hiện theo bị lỗi nên mình sẽ giúp các blogger thực hiện thủ thuật này mà không gặp một lỗi nào. Chúc các bạn thành công.

Các bạn xem demo tiện ích này tại đây

Đặt code này ở nơi bạn muốn hiển thị Thanh chia sẻ cho blogspot đẹp cho blogspot ở cuối bài viết:

<div class='clear'/>
<div id='fb-root'/>
<script>//<![CDATA[
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=352634211479923";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
<div id='button-count-share'>
<div class='facebook button-share'>
<div class='slide-share'>
<p>Share</p>
</div>
<a class='fb-share-button' name='fb_share' rel='nofollow' share_url='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' type='button_count'/>
</div>
<div class='facebook button-share'>
<div class='slide-share'>
<p>Like</p>
</div>
<div class='fb-like' data-action='like' data-layout='button_count' data-share='false' data-show-faces='false'/>
</div>
<div class='google button-share'>
<div class='slide-share'>
<p>G+</p>
</div>
<div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url' rel='nofollow'/>
<script type='text/javascript'>
  window.___gcfg = {lang: &#39;id&#39;};

  (function() {
    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</div>
<div class='twitter button-share'>
<div class='slide-share'>
<p>Tweet</p>
</div>
<a class='twitter-share-button' data-count='horizontal' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' title='Share via Twitter'>Tweet</a>
<script async='async' src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
<div class='clear'/>
</div>
<div class='clear'/>

Tiếp theo đặt code này lên trên thẻ </b:skin>

/* CSS Slide Share Button */
#button-count-share{float:none;width:100%;overflow:hidden;background:transparent;text-align:center;margin:15px auto;padding:0;padding-top:15px;padding-bottom:10px;}
#button-count-share span{float:none;position:relative;font-size:13px;color:#fff;margin:12px}
.button-share{background:#f9f9f9;position:relative;display:inline-block;float:none;height:40px;line-height:40px;overflow:hidden;width:140px;margin:0 auto;box-shadow:inset 0 0 5px rgba(0,0,0,0.1);}
.slide-share{z-index:2;display:inline-block;height:40px;line-height:40px;left:0;position:absolute;width:140px;margin:0 auto}
.slide-share p{font-family:&#39;Roboto&#39;;font-weight:700;color:#818d99;font-size:15px;left:0;position:absolute;text-align:center;width:100%;margin:0 auto}
.button-share .slide-share{transition:all 0.4s ease-in-out}
.facebook .fb_iframe_widget{display:block;position:absolute;right:15px;top:0;z-index:1}
.twitter iframe{right:10px;top:10px;z-index:1;display:block;position:absolute}
.google #___plusone_0{width:90px!important;top:10px;right:10px;position:absolute;display:block;z-index:1}
.facebook .slide-share{background:#fff;box-shadow:inset 0 0 0 1px #e7e8ea;}
.twitter .slide-share{background:#fff;box-shadow:inset 0 0 0 1px #e7e8ea;}
.google .slide-share{background:#fff;box-shadow:inset 0 0 0 1px #e7e8ea;}
.facebook:hover .slide-share,.twitter:hover .slide-share,.google:hover .slide-share{left:140px;opacity:0.6;}

Nếu trong template của bạn đã chèn hệ thống nhận xét bằng blogspot thì có thể xóa đoạn code màu đỏ đi cho blog load nhẹ hơn.