Thêm nút Share trực tiếp vào bài viết cho Blogspot Pro Version 2

Thêm nút Share trực tiếp vào bài viết cho Blogspot Pro Version 2
Xin chào tất cả các bạn đọc trên Windows2it. Hôm này là bài viết cuối cùng trong Seri thủ thuật “Thêm nút Share Pro Version vào Blogspot”. Thêm nút Share trực tiếp vào bài viết cho Blogspot Pro Version 2 này sẽ được cải tiến hơn rất nhiều so với phiên bản Pro Version 1 trước đó mình đã giới thiệu tới các bạn.

                          Đọc thêm:



☼ Các tính năng nổi bật của Pro Version 2:

·        Thiết kế đáp ứng Responsive tương thích trên mọi thiết bị.
·        Sử dụng các đoạn CSS và đoạn Scipts mở nên việc tùy biến rất dễ dàng.
·        Chức năng tính tổng các lược Share (Quá trình cập nhất rất nhanh chỉ mất sao vài vài phút) New!
·        Quá trình cài đặt rất dễ dàng chỉ việc Copy và Paste.

Demo bài này Windows2it đã thực hiện trực tiếp trên trên Blog này. Dưới đây là DEMO hình ảnh đáp mọi chế độ phân giải khác nhau của màng hình (Chức năng Responsive)

DEMO hình ảnh đáp mọi chế độ phân giải khác nhau của màng hình

Ngoài ra, bạn có thể cài đặt các nút Share dọc hai bên Blog mà Tôi đã phát hành trước đó và đã áp dụng trên Blog tài liệu miễn phí của Tôi.

☼ Giờ bắt đầu thủ thuật cùng Windows2it 

Bước 1: Vào Blog => Mẫu => Chỉnh sửa HTML. Nhấn tổ hợp phím Ctrl + F và tìm đến thẻ <head>. Sau đó dán đoạn mã Code sau ở phía dưới thẻ <head>.

<link href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>  
Bước 2: Tiếp tục nhấn tổ hợp phím Ctrl + F và tìm đến thẻ </head>. Sau đó dán đoạn mã Code sau ở phía trên thẻ </head>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*------------------------------------------------------------
Horizontal Social Media Share Buttons for Blogger
Designed by:: http://www.123tailieufree.com
Shares Count Code by:: http://donreach.com/social-share-count
issued under GNU GPL Licence
Icons:: FontAwesome
******** Do Not Remove These Credits ********
------------------------------------------------------------*/
.tbn_horizontal_sharebar {
    position: relative;
    background: none;
    z-index: 2;
    width: 100%;
    padding: 10px 0;
    display: inline-block;
    font-family: sans-serif;
    margin: 5px 0px;
    border-top: 1px dotted rgba(0, 0, 0, 0.05);
    border-bottom: 1px dotted rgba(0, 0, 0, 0.05);
}
.tbn_horizontal_sharebar .Share_buttons {
 display: block;
}
.tbn_horizontal_sharebar .Share_buttons .wrap {
    text-align: center;
    margin: 0 auto;
    display: inline-block;
    min-width: 41px;
}
.tbn_horizontal_sharebar .Share_buttons .wrap1 {
    display: inline-block;
    width: 31px;
    float: left;
}
.tbn_horizontal_sharebar .Share_buttons ul {
    margin: 0;
    padding: 0;
}
.tbn_horizontal_sharebar .Share_buttons ul li a, .tbn_horizontal_sharebar .Share_buttons ul li a:hover {
    color: #FFF !important;
    cursor: pointer;
    line-height: 25px;
    height: 100%;
    display: block;
    text-decoration: none;
}
.tbn_horizontal_sharebar .Share_buttons ul li {
    list-style: none;
    list-style-type: none;
    padding: 0;
    margin: 1px;
    float: left;
    width: 16%;
    max-width: 115px;
    display: inline-block;
    font-size: 13px;
    overflow: hidden;
    text-align: left;
    height: 25px;
    line-height: 25px;
    color: #fff;
    border: 1px solid rgba(0,0,0,0.04);
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.tbn_horizontal_sharebar .Share_buttons ul li .fa {
    color: #fff;
    font-size: 17px;
    font-weight: normal;
    font-family: FontAwesome;
    display: inline-block;
    text-align: center;
    padding: 0;
    height: 25px;
    line-height: inherit;
    width: 30px;
    background-color: rgba(0,0,0,0.1);
    border-right: 1px solid rgba(0,0,0,0.05);
}
/*--Facebook---*/
.tbn_horizontal_sharebar .Share_buttons .btn_fb {
    background: #3a579a;
}
.tbn_horizontal_sharebar .Share_buttons .btn_fb:hover {
    background: #314a83;
}
/*--Tweeter---*/
.tbn_horizontal_sharebar .Share_buttons .btn_twtr {
    background: #00abf0;
}
.tbn_horizontal_sharebar .Share_buttons .btn_twtr:hover {
    background: #0092cc;
}
/*--Google Plus---*/
.tbn_horizontal_sharebar .Share_buttons .btn_gplus {
    background: #df4a32;
}
.tbn_horizontal_sharebar .Share_buttons .btn_gplus:hover {
    background: #be3f2b;
}
/*--Pinterest---*/
.tbn_horizontal_sharebar .Share_buttons .btn_pntrst {
    background: #cd1c1f;
}
.tbn_horizontal_sharebar .Share_buttons .btn_pntrst:hover {
    background: #ae181a;
}
/*--linkedin---*/
.tbn_horizontal_sharebar .Share_buttons .btn_linkdin {
    background: #2554BF;
}
.tbn_horizontal_sharebar .Share_buttons .btn_linkdin:hover {
    background: #224EB4;
}
/*---Total Share----*/
.tbn_horizontal_sharebar .Share_buttons .share.h6 {
    font-size: 10px;
    font-weight: bold;
    text-shadow: none!important;
    text-decoration: none;
    text-align: center;
    color: #000000;
    border-top: 3px solid #FFF600 !important;
    border-bottom: 0;
    padding: 0px !important;
    padding-top: 5px!important;
    margin: 0 !important;
    line-height: 8px;
    border-radius: 75% 0;
}
.tbn_horizontal_sharebar .Share_buttons .share {
    border: none;
    margin: 0px 5px 0px 1px;
    overflow: visible !important;
    width: 95px !important;
}
.tbn_horizontal_sharebar .Share_buttons .share .count.h4 {
    font-size: 18px;
    font-weight: bold;
    text-shadow: none;
    text-decoration: none;
    font-family: sans-serif;
    text-align: center;
    color: #FF0000;
    line-height: 15px;
    margin-top: 0px;
    margin: -4px 0px 2px 0;
    min-height: 15px;
    padding: 0px;
    border: none;
}
.tbn_horizontal_sharebar .Share_buttons .btn_fb .share-btn,
.tbn_horizontal_sharebar .Share_buttons .btn_twtr .share-btn,
.tbn_horizontal_sharebar .Share_buttons .btn_gplus .share-btn,
.tbn_horizontal_sharebar .Share_buttons .btn_pntrst .share-btn,
.tbn_horizontal_sharebar .Share_buttons .btn_linkdin .share-btn {
    position: relative;
    color: #C3C3C3;
    display: inline-block;
    text-align: center;
    font-weight: bold;
    font-size: 11px;
    float: right;
    min-width: 12px;
    font-family: sans-serif;
    padding: 0px 5px;
    background-color: rgba(0,0,0,0.28);
    border-radius: 0px 0px 0px 15px;
}
 @media only screen and (max-width: 979px) {
 .tbn_horizontal_sharebar .Share_buttons .btn_linkdin {
  width: 34px;
}
.tbn_horizontal_sharebar .Share_buttons .btn_fb .share-btn,
.tbn_horizontal_sharebar .Share_buttons .btn_twtr .share-btn,
.tbn_horizontal_sharebar .Share_buttons .btn_linkdin .share-btn,
.tbn_horizontal_sharebar .Share_buttons .btn_gplus .share-btn,
.tbn_horizontal_sharebar .Share_buttons .btn_pntrst .share-btn
 {
 display: none !important;
}
}
 @media only screen and (max-width:768px) {
.tbn_horizontal_sharebar .Share_buttons ul li a, .tbn_horizontal_sharebar .Share_buttons ul li a:hover {
    color: #FFF !important;
    cursor: pointer;
    line-height: 25px;
    font-size: 11px;
    height: 100%;
    display: block;
    text-decoration: none;
}
.tbn_horizontal_sharebar .Share_buttons .wrap {
    min-width: 34px;
}
.tbn_horizontal_sharebar .Share_buttons .btn_linkdin,
.tbn_horizontal_sharebar .Share_buttons .btn_pntrst {
    width: 30px;
}
.tbn_horizontal_sharebar .Share_buttons ul li {
   margin: 1px 3px;
}
 @media only screen and (max-width:479px) {
 .tbn_horizontal_sharebar .Share_buttons .share {
    border: none;
    margin: 0px 5px 0px 1px;
    overflow: visible!important;
    width: 80px!important;
}
.tbn_horizontal_sharebar .Share_buttons ul li {
    width: 25px !important;
    margin: 2px;
    border-radius: 50px;
    border: 2px solid rgba(0, 0, 0, 0.14);
}
.tbn_horizontal_sharebar .Share_buttons .wrap {
    display: none !important;
}
.tbn_horizontal_sharebar .Share_buttons ul li .fa {
    width: 25px !important;
}
}
</style>
</b:if 
Bước 3: Tiếp tục nhấn tổ hợp phím Ctrl + F và tìm đến thẻ <div class='post-header-line-1'/>. Sau đó dán đoạn mã Code sau ở phía dưới thẻ <div class='post-header-line-1'/>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function () {
  var shareUrl = $("link[rel=canonical]").attr("href");
    $.getJSON('http://sharecount.twistblogger.com/?url=' + encodeURIComponent(shareUrl) + "&callback=?", function (data) {
        shares = data.shares;
        $(".count").each(function (index, el) {
            service = $(el).parents(".share-btn").attr("data-service");
            count = shares[service];
            if (count > 1000) {
                count = (count / 1000).toFixed(1);
                if (count > 1000) count = (count / 1000).toFixed(1) + "M";
                else count = count + "k";
            }
            $(el).html(count);
        });
    });
});
//]]></script>
<div class='tbn_horizontal_sharebar'>
<div class='Share_buttons'>
  <ul>
  <li class='share'>
    <div class='share-btn' data-service='total'>
        <div class='count h4'></div>
        <div class='share h6'>SHARES</div>
  </div>
  </li>
  <li class='btn_fb'><a expr:href='&quot;   http://www.facebook.com/share.php?v=4&amp;   src=bm&amp;   u=&quot; + data:post.url + &quot;   &amp;   t=&quot; + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   return false;' rel='nofollow'>
<div class="wrap1"><i class="fa fa-facebook"></i> </div>
  <div class="wrap">Share</div>
  <div class='share-btn' data-service='facebook'>
        <div class='count'/></div>
  </a>
  </li>
  <li class='btn_twtr'><a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot; via @quangmen93 - &quot;' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   return false;' rel='nofollow'>
  <div class="wrap1"><i class='fa fa-twitter'></i></div>
  <div class="wrap">Tweet</div>
  <div class='share-btn' data-service='twitter'>
        <div class='count'/></div>
  </a>
  </li>
  <li class='btn_gplus'><a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' onclick='javascript:window.open(this.href,&quot;   &quot;   ,&quot;   menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600&quot;   );   return false;   ' rel='nofollow'>
  <div class="wrap1"><i class='fa fa-google-plus'></i></div>
  <div class="wrap">Share</div>
  <div class='share-btn' data-service='google'>
        <div class='count'/></div>
  </a>
  </li>
  <li class='btn_pntrst'><a data-pin-config='beside' expr:href='&quot;   http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;   &amp;media=&quot; + data:blog.postImageUrl + &quot;&amp;description=&quot; + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;' rel='nofollow'>
  <div class="wrap1"><i class='fa fa-pinterest'></i></div>
  <div class="wrap">Pin</div>
  <div class='share-btn' data-service='pinterest'>
        <div class='count'/></div>
  </a>
  </li>
  <li class='btn_linkdin'><a expr:href='&quot;   http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;source=&quot; + data:blog.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;' rel='nofollow'>
  <div class="wrap1"><i class='fa fa-linkedin'></i></div>
  <div class="wrap">Share</div>
  <div class='share-btn' data-service='linkedin'>
        <div class='count'/></div>
  </a>
  </li>
  </ul>
  </div>
  </div>
</b:if>
</b:if 
Chú ý: <div class='post-header-line-1'/> thường có 2 hoặc 3 đoạn như thế này và việc thêm nút Share trượt vào nằm cuối bài viết hay đầu bài viết => là do quá trình đặt Code của bạn mỗi template khác nhau vị trí đặt Code nằm trên bài viết hay cuối bài viết cũng khác nhau nên mình cũng không thể nói rõ, Vì đó là Pro Version nên việc đặt Code cũng khó khăn hơn một tí @!

☼ Tùy chỉnh:

·        Thay quangmen93 thành ID Twitter của bạn.

·        Các bạn bỏ đoạn Code màu đỏ đó đi nếu các bạn đồng thời sử dụng thủ thuật "Thêm nút Share trượt dọc cho Blogspot Pro Vesrion 2"

☼ Kết luận: Seri thêm nút Share Pro Version vào Blogspot là mình tham khảo từ 1 Blog nước ngoài và dịch sang Tiếng Việt (Trang này lại không thích nhận Backlink).

Nếu bạn thích bài viết này, hãy subscribe blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất qua email nhé. Cảm ơn rất nhiều JJJ

Quá trình cài đặt gặp vấn đề gì cứ để lại Comment !
Liên hệ đặt quảng cáo
Quảng cáo trên windows2it.com

About Quang Mến :

Tôi là Quang Mến. Tôi viết blog theo phong cách chuyên nghiệp. ^^! Dựa trên niềm đam mê học hỏi và mong muốn chia sẽ với mọi người @@!
Theo dõi tôi trên:
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
    Blogger Comment
    Facebook Comment

32 nhận xét:

  1. Blog bác nhìn cũng ngon mà không đăng ký được gà hả bác?

    ReplyDelete
    Replies
    1. Hết tự tin vào đk GÀ rồi, --- lượt view ảo từ đâu nảy vào tỷ lệ thoát cao quá --- đk 2 lần toàn tạch --- thui giờ mình ko mơ mộng GÀ rồi __ khi nào hứng lên thì đăng ký --- giờ viết Blog cho vơi đi nỗi buồn và chia sẽ cho mọi người thôi ...

      >> nhớ ghé thăm Blog mình thường xuyên cùng nhau tám chuyện cho vui :) =))

      Delete
    2. giờ ngta xài tut đăng ký GA chạy QC ầm ầm kìa bác. đăng ký như trước giờ khó lắm

      Delete
    3. Nuối GÀ để cho nó đẻ trứng thì khó (nó thường dịch)... Nhưng nuôi GÀ cho nó lớn rùi xuất chuồng lại dễ !!!! đúng là GÀ rep càng ngày càng căng ... Mà bác nuối GÀ để trứng vòng ko vậy :)

      Delete
  2. Mình không tìm thấy dòng "div class='post-header-line-1'"
    Có cách nào khác không Ad? Thanks!

    ReplyDelete
    Replies
    1. nhất đinh có dòng div class='post-header-line-1 .... ko có cách nào khác đâu ... Sẽ dán chỗ khác là lỗi ngay

      Delete
  3. Thanks bạn! Mình đã làm dc. Để nút share hiện cuối bài đăng, bước 3 trong mẫu của mình khác một chút, mấu của mình có hai đoạn code: div class='post-header-line-1'/, thêm sau cả hai đoạn code trên đều không cho hiện cuối bài đăng, mình thử thêm sau thì đã được. Web mình http://www.nhavuong.net/. Tuy nhiên, chỗ tên SHARES chưa được cân đối ở giữa cho lắm, với phần số đếm chưa hiện. Bạn vào xem thử chỉnh giúp mình với

    ReplyDelete
    Replies
    1. Bạn tìm đến đoạn CSS này:

      .tbn_horizontal_sharebar .Share_buttons .share.h6 {
      font-size: 10px;
      font-weight: bold;
      text-shadow: none!important;
      text-decoration: none;
      text-align: center;
      color: #000000;
      border-top: 3px solid #FFF600 !important;
      border-bottom: 0;
      padding: 0px !important;
      padding-top: 5px!important;
      margin: 0 !important;
      line-height: 8px;
      border-radius: 75% 0;


      SỮA THÀNH:

      .tbn_horizontal_sharebar .Share_buttons .share.h6 {
      font-size: 10px;
      font-weight: bold;
      text-shadow: none!important;
      text-decoration: none;
      text-align: center;
      color: #000000;
      border-top: 3px solid #FFF600 !important;
      border-bottom: 0;
      padding-top: 5px;
      margin-top: -23px;
      line-height: 8px;
      border-radius: 75% 0;
      }


      >>> Lưu template lại là Oke thui :) !

      Delete
    2. Thanks bạn! Mình sửa được rồi! Còn sửa phần số đếm đằng sau hoặc cho phần này mất đi, dải phía sau chỉ một màu như của blog bạn này thì chỉnh thế nào bạn nhỉ!!

      Delete
    3. Code số đếm là người ta lưu trên host ... do quá nhiều người dùng thủ thuật vượt quá băng thông thông nên bị xóa bỏ số đếm cũng mất theo ... :( ! ...

      Delete
    4. vậy xóa cái đó đi ntn bạn nhỉ, để một dải cùng màu như web bạn trên kia sẽ đẹp hơn

      Delete
    5. Bạn tìm đến đoạn CSS như thế này:

      position: relative;
      color: #C3C3C3;
      display: inline-block;
      text-align: center;
      font-weight: bold;
      font-size: 11px;
      float: right;
      min-width: 12px;
      font-family: sans-serif;
      padding: 0px 5px;
      background-color: rgba(0,0,0,0.28);
      border-radius: 0px 0px 0px 15px;


      SỮA THÀNH

      position: relative;
      color: #C3C3C3;
      display: inline-block;
      text-align: center;
      font-weight: bold;
      font-size: 11px;
      float: right;
      min-width: 12px;
      font-family: sans-serif;
      padding: 0px 5px;
      border-radius: 0px 0px 0px 15px;

      >>>Lưu mẫu lại là xong



      Mếu thích bạn căn sữa các CHỮ cho nó đẹp hơn ... Mình lừu quá ko sữa trên template .. Sẵn đây chỉ cho bạn luôn

      tìm đoạn CSS

      .tbn_horizontal_sharebar .Share_buttons .wrap {
      text-align: center;
      margin: 0 auto;
      display: inline-block;
      min-width: 71px;


      SỮA THÀNH

      .tbn_horizontal_sharebar .Share_buttons .wrap {
      text-align: center;
      margin: 0 auto;
      display: inline-block;
      min-width: 41px;

      Delete
    6. Mình làm được rồi! Thanks bạn!

      Delete
    7. Hình như nút share In bị lỗi phải k bạn, bạn xem lại xem!

      Delete
    8. Cái này bị lỗi hôm trước mà mình chưa sữa :D vì cái linkedin.com ít người chơi quá đâm ra lười nay bạn hỏi mình sữa luôn//// Bạn thay lại đoạn CODE ở bước 3 là oke nhé !!



      Delete
    9. thay như thế nào bạn ơi

      Delete
    10. ui trời ,,,,, thì Bạn xóa đoạn Code bước 3 hôm trước đi ... Và bạn copy đoạn code bước 3 ở trên (mình vừa fix lỗi) thay cho đoạn code vừa xóa và lưu mẫu lại là xong chứ có gì đâu :( !

      Delete
    11. hehe, được rồi, tại mình tưởng bạn vẫn chưa sửa trên kia. Giờ ngon lành rồi!

      Delete
  4. Mới fix lại nút share nhìn có vẻ ngầu hơn :) :) !!!!

    ReplyDelete
    Replies
    1. có thêm số đếm đó à bạn

      Delete
    2. um ... Mới thêm số đếm cho nó!!

      Delete
    3. thế như cái của mình thì chỉnh sửa chỗ nào để ngầu dc như này bạn

      Delete
    4. bạn thay đoạn Code MẦU ĐỎ thành đoạn code NÀY và lưu mẫu lại là xong nhé !!đoạn code này cũng dùng băng thông free .. Nếu nhiều người dùng quá nó cũng bị die đó :( !! nên ai cần thì mình mới gửi thui.

      Delete
  5. share mình xin bộ code đếm để mình up lên dùng. tks.
    [email protected]

    ReplyDelete
    Replies
    1. đây nha bạn,, https://github.com/abeMedia/shareCount

      Delete
  6. ad cho e hỏi sao e làm giống ad mà nó ko hiện ra, a xem giúp e ạ, blog của e là shareandshare.info

    ReplyDelete
    Replies
    1. Đoạn JS bạn paste vô template chưa sao mình tìm hoài mà ko thấy nó đâu hết vậy :(

      Delete
    2. e paste vào đủ 3 mục rồi ạ, giống ad viết

      Delete
    3. ad cho e xin gmail ạ, để e gửi template ad xem giúp e

      Delete