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 Thứ Năm, 5 tháng 11, 2015

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 !

Bình Luận (33)

Unknown lú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?

Hoàng Nhân Khôi lúc 23:49 5 tháng 11, 2015

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 :) =))

Unknown lú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!

Hoàng Nhân Khôi lúc 07:48 18 tháng 3, 2016

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

Nhà vuông lú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

Hoàng Nhân Khôi lúc 21:24 8 tháng 7, 2016

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 :) !

Dương Tất Thắng lúc 07:21 9 tháng 7, 2016

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

Hoàng Nhân Khôi lúc 09:53 9 tháng 7, 2016

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 ... :( ! ...

Dương Tất Thắng lúc 09:56 9 tháng 7, 2016

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

Hoàng Nhân Khôi lúc 10:07 9 tháng 7, 2016

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;

Dương Tất Thắng lúc 11:31 9 tháng 7, 2016

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

Hoàng Nhân Khôi lúc 22:18 9 tháng 7, 2016

:) !

Nhà vuông lúc 04:18 11 tháng 7, 2016

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

Hoàng Nhân Khôi lúc 05:06 11 tháng 7, 2016

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

Nhà vuông lúc 09:26 11 tháng 7, 2016

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

Hoàng Nhân Khôi lúc 12:29 11 tháng 7, 2016

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 :( !

Dương Tất Thắng lúc 13:18 11 tháng 7, 2016

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!

Hoàng Nhân Khôi lúc 21:36 11 tháng 7, 2016

:) !

Unknown lúc 05:46 13 tháng 7, 2016

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

Hoàng Nhân Khôi lúc 11:06 13 tháng 7, 2016

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

Hoàng Nhân Khôi lúc 21:03 17 tháng 7, 2016

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

Nhà vuông lúc 03:40 18 tháng 7, 2016

có thêm số đếm đó à bạn

Hoàng Nhân Khôi lúc 04:01 18 tháng 7, 2016

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

Nhà vuông lúc 09:15 18 tháng 7, 2016

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

Hoàng Nhân Khôi lúc 22:18 18 tháng 7, 2016

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.

Unknown lú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]

Hoàng Nhân Khôi lúc 20:54 6 tháng 8, 2016

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

Unknown lú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

Hoàng Nhân Khôi lúc 22:07 7 tháng 8, 2016

Đ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 :(

Unknown lúc 23:32 7 tháng 8, 2016

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

Unknown lúc 23:39 7 tháng 8, 2016

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

Hoàng Nhân Khôi lúc 23:46 7 tháng 8, 2016

đây bạn: [email protected]

Construction Engineer PVC lú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!

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

Bài Viết Liên Quan

Bình Luận (33)

Đăng nhận xét