Chèn Social Buttons Bar bên dưới tiêu đề bài đăng

Bài viết này mình sẽ chia sẻ tới các bạn thủ thuật chèn thanh social buttons bên dưới tiêu đề bài đăng như hình trên. Sau đây là các bước thực hiện:

Bước 1: Tại trang quản trị blog, các bạn vào Mẫu -> Chỉnh sửa HTML, chèn đoạn code sau vào trước thẻ đóng </head>:

<!--Social Buttons Bar by kjmagic.blogspot.com-->
<b:if cond='data:blog.pageType == "item"'>

<script type='text/javascript'>

// Twitter
(function (a, b, c){var d=a.getElementsByTagName(b)[0];if (!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src="//platform.twitter.com/widgets.js";d.parentNode.insertBefore(a, d)}})(document, "script", "twitter-wjs");
// Stumbleupon
(function (){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://platform.stumbleupon.com/1/widgets.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a, b)})();

</script>


<style type='text/css'>

#SocialBar {
    float: left;
    border-top: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
    width: 610px;
    margin-bottom: 20px;
    margin-left: -10px;
    margin-top: 10px;
}

.headingsharer h5 {
    float: left;
    padding-right: 20px;
    padding-top: 18px;
    text-transform: uppercase;
    font-weight: bold;
    margin: 0px;
    padding-left: 10px;
}

.tweeetero, .fbwolo, .g-plusones, .stumblo {
    float: left;
    border-left: 1px solid #eaeaea;
    padding-left: 18px;
    padding-top: 15px;
    padding-bottom: 10px;
}

.g-plusones {
    margin-left: 20px;
}

</style>

</b:if>
<!--/Social Buttons Bar by kjmagic.blogspot.com-->

Bước 2: Tìm dòng <div class='post-body entry-content'> và chèn vào trước nó đoạn code sau (Lưu ý: cần tìm đúng dòng <div class='post-body entry-content'> vì có thể sẽ có nhiều dòng như vậy, như mình test thì là có 2 dòng tương tự):

<!--Social Buttons Bar by kjmagic.blogspot.com-->
<b:if cond='data:blog.pageType == "item"'>
<div id='SocialBar'>
 <div class='headingsharer'>
  <h5>Thích bài viết này →</h5>
 </div>
 <div class='tweeetero'>
  <a class='twitter-share-button' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
 </div>
 <div class='fbwolo'>
  <iframe allowtransparency='true' expr:src='"//www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font&height=21"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:21px;'/>
 </div>
 <div class='g-plusones'>
  <div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/>
  </div>
  <div class='stumblo'>
   <su:badge expr:location='data:post.url' layout='1'/>
  </div>
 </div>
 </b:if>
<!--/Social Buttons Bar by kjmagic.blogspot.com-->

Có thể sửa dòng màu vàng thành dòng chữ bạn thích.

Chúc các bạn thành công !