Bộ nút chia sẻ qua mạng xã hội SOCIALIZE IT cho Blogger

Hôm nay, trong bài viết này mình xin chia sẻ với các bạn bộ nút mình đang sử dụng tại template mới này, trong rất ngầu và bắt mắt. Như đã nói ở rất nhiều bài viết trước, mạng xã hội có một vai trò cực kỳ quan trọng trong việc lôi kéo lượng truy cập, đây là một trong những cách điển hình giúp bài viết của bạn được phổ biến đến người dùng trên đó, từ đó lấy website của chúng ta được nhiều người biết đến hơn và rồi gia tăng lượng truy cập.

Bộ nút chia sẻ qua mạng xã hội SOCIALIZE IT cho Blogger

Công đoạn đầu tiên lúc nào cũng thế đăng nhập vào Blogger » Mẫu » Chỉnh sửa HTML

Bây giờ các bạn tìm đến thẻ </head> và thêm đoạn mã này lên trên nó

<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'>
/*KslZone Social Bar ----------------------------------- */
#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>

Tiếp tục mình sẻ tạo hàm includable để dễ dàng chỉnh sửa, hoặc xóa nó đi khi bạn không cần nữa.

<b:includable id='kslzoneSocialb'>
<b:if cond='data:blog.pageType == "item"'>
<div id='SocialBar'>
 <div class='headingsharer'>
  <h5>SOCIALIZE IT →</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>
</b:includable>

Cuối cùng lựa chọn vị trí bạn muốn chèn ở đây ví dụ 2 vị trí cơ bản

Dưới tiêu để bài viết

Tìm đến thẻ

<div class='post-body entry-content'>

và thêm đoạn này lên trên

<b:include name='kslzoneSocialb'/>

Dưới cuối bài đăng

Tìm đến thẻ

<div class='post-footer'>

và thêm đoạn mã này lên trên

<b:include name='kslzoneSocialb'/>

Lời kết

Sau khi hoàn tất thì bạn đã có cho mình bộ nút chia sẻ rất đẹp. Blog của mình làm dựa trên tiêu chí chia sẻ tất cả những thứ mình biết để giúp blog của bạn có một blog thật đẹp cho riêng mình. Nếu như cảm thấy bài viết này khó hiểu và cần trợ giúp bạn có thể để lại nhận xét phía dưới, mình sẽ hỗ trợ tất cả các bạn.

Nguồn: KlsZone