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

Hoàng Nhân Khôi 09:05 33 Comments thu-thuat-blogspot

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:

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

● Tạo khung thông báo Pro cho Blogspot (Blogger) rất chuyên nghiệp.

☼ 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!

· Tích hợp FontAwesome Icons.

· 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)

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

Backlink: Tài liệu ôn thi đại học môn Hóa

Quá trình cài đặt gặp vấn đề gì cứ để lại Comment !

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:

33 nhận xét:

Unknownlúc 23:41 5 tháng 11, 2015
Blog bác nhìn cũng ngon mà không đăng ký được gà hả bác?
Trả lờiXóa
Trả lời
Unknownlúc 04:48 18 tháng 3, 2016
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!
Trả lờiXóa
Trả lời
Nhà vuônglúc 10:27 8 tháng 7, 2016
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
Trả lờiXóa
Trả lời
Hoàng Nhân Khôilúc 21:03 17 tháng 7, 2016
Mới fix lại nút share nhìn có vẻ ngầu hơn :) :) !!!!
Trả lờiXóa
Trả lời
Unknownlúc 13:27 6 tháng 8, 2016
share mình xin bộ code đếm để mình up lên dùng. tks.
[email protected]
Trả lờiXóa
Trả lời
Unknownlúc 09:08 7 tháng 8, 2016
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
Trả lờiXóa
Trả lời
Estimator PVClúc 20:28 21 tháng 12, 2019
Nút chia sẻ nằm trên, làm sao để nằm xuống dưới, cảm ơn bác!
Trả lờiXóa
Trả lời

Thêm nhận xét

Đăng ký: Đăng Nhận xét ( Atom )

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

About Quang Mến :

THỦ THUẬT LIÊN QUAN

33 nhận xét: