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 chúng ta sẽ sử dụng hàm includable thay vì chèn toàn bộ đoạn mã này vào một chỗ để dễ dàng chỉnh sửa, hoặc xóa nó đi khi bạn không cần nữa. Bạn tìm đến một thẻ

</b:includable>

và chèn đoạn mã này xuống dưới

<b:includable id='kslzoneSocialb'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='SocialBar'>
 <div class='headingsharer'>
  <h5>SOCIALIZE IT &#8594;</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='&quot;//www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:21px;'/>
 </div>
 <div class='g-plusones'>
  <div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/>
  </div>
  <div class='pocko'>
   <a class='pocket-btn' data-lang='en' data-pocket-count='horizontal' data-pocket-label='pocket'/>
<script type='text/javascript'>!function(d,i){if(!d.getElementById(i)){var j=d.createElement(&quot;script&quot;);j.id=i;j.src=&quot;https://widgets.getpocket.com/v1/j/btn.js?v=1&quot;;var w=d.getElementById(i);d.body.appendChild(j);}}(document,&quot;pocket-btn-js&quot;);</script>
  </div>
 </div>
 </b:if>
</b:includable>

Cuối cùng bạn tùy ý chèn vào nới bạn muốn, ở đây mình xin 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 đã thêm thành công cho blog của mình một bộ nút chia sẻ khá là đẹ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.