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.

9 bình luận

  1. avatar says

    lúc 10:21 29 tháng 8, 2014

    bạn ơi đoạn code thứ 2 đặt đâu vậy bạn, mình chưa hiểu ý bạn lắm :v

  2. avatar says

    lúc 10:25 29 tháng 8, 2014

    Chèn xuống dưới một đoạn bất kì như vậy là được
    </b:includable>
    cũng thanks để sử lại bài viết :D

  3. avatar says

    lúc 10:41 29 tháng 8, 2014

    lỗi rồi cậu ơi, khi mình chèn đoạn code thứ 2 sau đoạn code bất kỳ thì xuất hiện lỗi này:
    Lỗi khi phân tích cú pháp XML, dòng 1941, cột 114: The reference to entity "send" must end with the ';' delimiter.

  4. avatar says

    lúc 10:43 29 tháng 8, 2014

    Trong cái đoạn mã trên bạn thay toàn bộ & thành & dùm mình nhé. Hơi bạn xíu không sử code liền được.

  5. avatar says

    lúc 11:06 29 tháng 8, 2014

    thay các ký tự & thành "&" hả cậu, mình thay hết mà hk đc cậu ơi :v

  6. avatar says

    lúc 11:09 29 tháng 8, 2014

    Thế bạn đợi nhé trong khoảng chiều mình sẽ hướng dẫn, trước mình có xài cho giao diện cũ này bình thường mà kì nhỉ
    http://kslflatly.blogspot.com/2013/08/vulputate-mollis-pharetra-vehicula.html

  7. avatar says

    lúc 11:12 29 tháng 8, 2014

    bạn mau mắn và nhiệt tình lắm, bạn xem lại giúp mình với nhé, cám ơn bạn :v

  8. avatar says

    lúc 14:12 29 tháng 8, 2014

    Cập nhật rồi nhé :D

  9. avatar says

    lúc 15:25 29 tháng 8, 2014

    ok, cám ơn cậu nhiều nhé...

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.