Liên hệ đặt quảng cáo
Home  ›  thu-thuat

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

1 Comment
SHARE
Edit
Ở 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.

Demo hình ảnh nút share trượt dọc cho Blogspot Pro Version 2
 ☼ 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 @!
Liên hệ đặt quảng cáo
Quảng cáo trên toidicodedao.net

About Hong Cuong :

Tôi là Hồng Cương. 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

1 nhận xét:

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