Thủ thuật Blogspot. Tâm sự bằng Thơ: Thêm nút share trượt dọc cho Blogspot Pro Version 2

Ở các bài viết trước mình cũng đã hướng dẫn cho các bạn cách thêm nút Share trượt dọc hai bên Blog mình cũng nói các ưu, nhược điểm của từng Version. Đến với bài hôm nay “Thêm nút share trượt dọc cho Blogspot Pro Version 2” sẽ được cải tiến hơn rất nhiều so với 2 phiên bản trước: Về màu sắc, hình dạng nút Button, hiệu ứng và đặt biệt hơn là quá trính cập nhật tổng lượt Share sẽ được diễn ra nhanh hơn…Rất bắt mắt và gây hứng thú làm tăng khả năng độc giả chia sẽ bài viết của bạn.

Đọc thêm:

● Thêm nút Share trượt dọc hai bên Blogspot (Blogger) Version đơn giản.

● Thêm nút share trượt dọc cho Blogspot Pro Version 1.

Sử dụng lưu trữ miễn phí bởi OpenShift.com để lưu trữ các script PHP nhằm tính tổng các lượt Share trên các nền tảng mạng xã hội khác nhau.

Mình đã vô hiệu hóa (ẩn) nó trên thiết bị điện thoại khi kích thước màng hình nhỏ hơn 497px bằng CSS. Nếu bạn muốn nó hiện thị trên thiết bị điện thoại chỉ cần xóa đoạn CSS đó đi là được (Mình sẽ chỉ đoạn CSS này ở phần tùy chỉnh).

Bạn có thể cài đặt các nút Share trực tiếp vào bài viết mà tôi đã phát hành trước đó và đã áp dụng trên Blog này.

☼ 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 đó nhấn tổ hợp phím Ctrl + F và tìm đến thẻ </b:skin>. Sau đó dán đoạn mã Code sau ở phía dưới thẻ </b:skin>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*------------------------------------------------------------
Floating Social Share Button Bar Version 2.0
Designed by:: http://www.123tailieufree.com
Shares Count Code by:: http://donreach.com/social-share-count
issued under GNU GPL Licence
Icons:: FontAwesome 4.2.0
**************** Do Not Remove These Credits *****************
------------------------------------------------------------*/
.twistBlogger_SocialBar {
  position: fixed;
  bottom: 30%;
  padding: 0;
  left:0;
  background: none;
  text-align: center;
  margin: 0 auto;
  z-index: 99999999;
}
.twistBlogger_SocialBar label:hover {
  cursor: pointer;
  opacity:1;
}
.twistBlogger_SocialBar label {
  text-align: center;
  opacity: 0.4;
  width: 50px;
  background: #3A3939;
  color: #FFF;
  border: 0;
  font-family: FontAwesome;
  display: block;
  font-size: 12px;
  padding: 0px 0px;
  border-radius: 0;
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -ms-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
  position: absolute;
  line-height: 1.5em;
  margin-top: 346px;
}
input.ShowHide_Button:checked + label {
  transform-origin: 50% 0%!important;
  -webkit-transform-origin: 50% 0%!important;
  -moz-transform-origin: 50% 0%!important;
  -ms-transform-origin: 50% 0%!important;
  -o-transform-origin: 50% 0%!important;
  opacity: 1;
  -webkit-transform: translateX(0px) rotateY(-180deg);
  -moz-transform: translateX(0px) rotateY(-180deg);
  -ms-transform: translateX(0px) rotateY(-180deg);
  -o-transform: translateX(0px) rotateY(-180deg);
  transform: translateX(0px) rotateY(-180deg);
  -webkit-transition-delay: 0.2s;
  -moz-transition-delay: 0.2s;
  -ms-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  transition-delay: 0.2s;
  border: 1px solid #3A3939;
  border-radius: 50px 0px 0px 50px;
  width: 30px;
  max-width: 30px;
}
input.ShowHide_Button ~ .ShowHideMe {
  -webkit-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
  -moz-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
  -ms-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
  -o-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
  transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
}
input.ShowHide_Button:checked ~ .ShowHideMe {
  margin-left: -75px !important;
}
input.ShowHide_Button {
  display: none;
}
.twistBlogger_SocialBar .social_menu {
  display: inline-block;
  float: left;
  list-style:none;
  max-width:50px;
  margin: 0;
  padding: 0;
}
.twistBlogger_SocialBar .social_menu .button_facebook {
  background: #3a579a;
}
.twistBlogger_SocialBar .social_menu .button_facebook:hover {
  background: #314a83;
}
.twistBlogger_SocialBar .social_menu .button_twitter {
  background: #00abf0;
}
.twistBlogger_SocialBar .social_menu .button_twitter:hover {
  background: #0092cc;
}
.twistBlogger_SocialBar .social_menu .button_googleplus {
  background: #df4a32;
}
.twistBlogger_SocialBar .social_menu .button_googleplus:hover {
  background: #be3f2b;
}
.twistBlogger_SocialBar .social_menu .button_pinterest {
  background: #cd1c1f;
}
.twistBlogger_SocialBar .social_menu .button_pinterest:hover {
  background: #ae181a;
}
.twistBlogger_SocialBar .social_menu .button_stumbleupon {
  background: #ea4b24;
}
.twistBlogger_SocialBar .social_menu .button_stumbleupon:hover {
  background: #c7401f;
}
.twistBlogger_SocialBar .social_menu .button_linkedin {
  background: #2554BF;
}
.twistBlogger_SocialBar .social_menu .button_linkedin:hover {
  background: #224EB4;
}
.twistBlogger_SocialBar .social_menu .button_facebook .count,
.twistBlogger_SocialBar .social_menu .button_twitter .count,
.twistBlogger_SocialBar .social_menu .button_googleplus .count,
.twistBlogger_SocialBar .social_menu .button_pinterest .count,
.twistBlogger_SocialBar .social_menu .button_stumbleupon .count,
.twistBlogger_SocialBar .social_menu .button_linkedin .count {
  color: #fff!important;
  padding-top: 4px;
  font-size: 13px !important;
  line-height: 1.2em;
  font-family: sans-serif;
  font-weight: bold;
}
.twistBlogger_SocialBar .social_menu > ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.twistBlogger_SocialBar .social_menu .share {
  background: #FFF;
  color: #807F7F;
  font-size: 11px;
  height: 45px !important;
}
.twistBlogger_SocialBar .social_menu .share .count.h4 {
  font-size: 18px;
  font-family: sans-serif;
  color: #424242;
  height: 25px !important;
  line-height: 1.5em;
  font-weight: bold;
  margin: 0px !important;
}
.twistBlogger_SocialBar .social_menu .share .h6 {
  padding-bottom: 3px;
  font-family: sans-serif;
  margin: 0px !important;
  line-height: 1.5em;
  font-size: 11px;
}
.twistBlogger_SocialBar .social_menu > ul > li {
  margin: 0px 0px 0px 0px;
  position: relative;
  text-align: center;
  list-style: none;
  list-style-type: none;
  padding: 0px;
  border: 0px;
  border-left: 0 solid rgba( 0,0,0,.4);
  height: 50px;
  width: 50px;
  overflow: hidden;
  display: block;
  box-sizing: border-box;
  background: none;
  box-sizing: content-box;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.twistBlogger_SocialBar .social_menu > ul > li a {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 5px 0px;
  cursor: pointer;
  text-decoration: none;
}
.twistBlogger_SocialBar .social_menu > ul > li:hover {
  border-left: 5px solid rgba( 0,0,0,.3);
  width: 40px;
}
.twistBlogger_SocialBar .social_menu > ul > li i {
  color: #fff !important;
  font-family: FontAwesome;
  font-size: 20px;
  font-style: normal;
  font-weight: normal;
  line-height: 1em;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.twistBlogger_SocialBar .social_menu > ul > li:hover i {
  opacity: 0.9;
}
@media only screen and (min-width:768px) and (max-width:979px) {
.twistBlogger_SocialBar {
  bottom: 20% !important;
}
}
@media only screen and (min-width:480px) and (max-width:767px) {
.twistBlogger_SocialBar {
  bottom: 15% !important;
}
}
 @media only screen and (max-width:479px) {
.twistBlogger_SocialBar {
  bottom: 10% !important;
  display: none !important; /*---delete this code line to make it appear on mobile--*/
}
}
</style>
</b:if>

Bước 3: Tiếp tục nhấn tổ hợp phím Ctrl + F và tìm đến thẻ <b:includable id='post' var='post'>. Sau đó dán đoạn mã Code sau ở phía dưới thẻ <b:includable id='post' var='post'>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='twistBlogger_SocialBar'>
  <input class='ShowHide_Button' id='twiSter' type='checkbox'/>
  <label for='twiSter'><i class='fa fa-arrow-left'/></label>
  <div class='ShowHideMe'>
  <div class='social_menu'>
<div class='share'>
    <div class='share-btn' data-service='total'>
        <div class='count h4'/>
        <div class='h6'>SHARES</div>
  </div></div>
<ul>
<li class='button_facebook'>
<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'><strong><i class='fa fa-facebook'/>
<div class='share-btn' data-service='facebook'>
        <div class='count'/></div></strong>
</a>
</li>
<li class='button_twitter'>
<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'><strong><i class='fa fa-twitter'/>
<div class='share-btn' data-service='twitter'>
        <div class='count'/></div></strong>
</a>
</li>
<li class='button_googleplus'>
<a expr:href='&quot;   https://plus.google.com/share?url=&quot; + data:post.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'><strong><i class='fa fa-google-plus'/>
<div class='share-btn' data-service='google'>
        <div class='count'/></div></strong>
</a>
</li>
<li class='button_pinterest'>
<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'><strong><i class='fa fa-pinterest'/>
<div class='share-btn' data-service='pinterest'>
        <div class='count'/></div></strong>
</a>
</li>
<li class='button_stumbleupon'>
<a expr:href='&quot;   http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;   &amp;   title=&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'><strong><i class='fa fa-stumbleupon-circle'/>
<div class='share-btn' data-service='stumbleupon'>
        <div class='count'/></div></strong>
</a>
</li>
<li class='button_linkedin'>
<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;   summary=&amp;   source=&quot;   ' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;' rel='nofollow'><strong><i class='fa fa-linkedin'/>
<div class='share-btn' data-service='linkedin'>
        <div class='count'/></div></strong>
</a>
</li>
</ul>
</div>
</div>
</div>
<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>
</b:if>
</b:if>

Bước 4: Lưu mẫu và xem kết quả.

☼ Tùy chỉnh:

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

· Nếu bạn muốn nó hiện thị trên diện thoại có kịch thước nhỏ hơn 479px thì xóa đoạn CSS này display: none !important; đi

· Còn các tùy chỉnh khác đã oke các bạn không cần phải chỉnh sửa gì thêm.

☼ Kết luận:

· Sử dụng các đoạn CSS và đoạn Scipts mở (chưa mã hóa - endcode) nên việc tùy biến rất dễ dàng.

· Thủ thuật này thực hiện thêm code trực tiếp trong Template nên các bạn cẩn thận.

· Theo mình dây là Version tuyệt vời nhất cho đến bây giờ và có thể là mãi mãi.

Chúc các bạn thành công !

Backlink: Giải pháp nâng cao kim ngạch xuất khẩu

Còn bạn muốn Support gì thì cứ để lại comment @!

Khi kho lúc 20:39 23 tháng 10, 2015

Rất tuyệt, thanks ad :D

Admin lúc 20:16 7 tháng 1, 2016

Với template của mình thì hoàn toàn áp dụng không được, mình đã làm y chang rồi mà nó vẫn không lên.

Hoàng Nhân Khôi lúc 20:56 7 tháng 1, 2016

Cho mình địa chỉ Blog của bạn để mình xem thủ như thế nào .... Việc cài đặt thủ thuật này ko khó đâu bạn

Admin lúc 21:54 8 tháng 1, 2016

Địa chỉ blog của mình nè: http://hctns.blogspot.com
Cám ơn bạn nhiều lắm.

Hoàng Nhân Khôi lúc 02:37 9 tháng 1, 2016

Sao bạn ko thực hiện thủ thuật .. thử mình xem nó lỗi như thế nào :( ... Rùi mình mới biết đường sữa chứ :)

Admin lúc 23:41 10 tháng 1, 2016

Mình cám ơn bạn rất nhiều, mình đã làm được rồi. Lỗi là do mình, khi làm theo các bước bạn hướng dẫn thì phải vào 1 bài viết cụ thể mới thấy được thành quả, còn mình thì xem trên trang chủ nên không thấy là đúng rồi.
Một lần nữa chúc web bạn ngày càng phát triển nhé.

Unknown lúc 07:20 24 tháng 1, 2016

Của e cái icon thứ 5 nó không hiện h e muốn thay cái icon khác thì phải làm sao???

Hoàng Nhân Khôi lúc 09:10 24 tháng 1, 2016

ở thẻ li thứ 6 đó bạn ở đây là mạng xã hội http://www.linkedin.com/ bạn thay thành biểu tượng khác và sửa lại code share là xong :) ... Link Blog của cho mình xem thử.

Unknown lúc 09:12 29 tháng 6, 2016

đã làm nhưng chưa ưng ý lắm http://www.dalatstore.com/

Anh Quân lúc 01:38 13 tháng 10, 2016

mình đã làm nhưng cứ vào trang web hiện ra web nay
http://www.bloggertheme9.com/

Anh Quân lúc 01:49 13 tháng 10, 2016

Hoàng Nhân Khôi lúc 05:40 13 tháng 10, 2016

mình đã kiểm trang bạn nhưng ko thấy bạn thực hiện thủ thuật trên !!!

LÊ QUANG NINH lúc 09:25 27 tháng 2, 2017

vậy có cách nào để làm được nút share này cũng xuất hiện trên trang chủ không bạn. nhìn trong mê hơn

nguyễn thuy linh lúc 04:33 8 tháng 4, 2017

ad hổ trợ cái

Hoàng Nhân Khôi lúc 00:36 19 tháng 4, 2017

Vấn đề gì vậy bạn ???

ADMIN lúc 21:09 15 tháng 7, 2017

Ủa mà b1 có tác dụng j z, 0 chèn cux âu sao

vuong lúc 18:56 5 tháng 9, 2018

Mình đã áp dụng thủ thuật tạo nút chia sẻ này trên trang https://www.clashofclansviet.com/ và đã thành công thank admin

Thegioitin24h lúc 08:13 30 tháng 9, 2018

Đã làm thành công nhưng sao các biểu tượng lệch trên . Ad xem lại giúp : https://www.thegioitin24h.com/.../con-thuong-nhau-lam...
Nói chung là khá ổn rồi.

Thegioitin24h lúc 08:14 30 tháng 9, 2018

Ad xem lại giúp:
https://www.thegioitin24h.com/2018/09/con-thuong-nhau-lam-nhung-khong-con-vi.html