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

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

Add Comment
SHARE
Edit
Thêm nút share trượt dọc cho Blogspot Pro Version 1

Ở bài viết trước Windows2it đã hướng dẫn các bạn cách thêm nút Share trượt dọc hai bên Blogspot (phiên bản đơn giản), nhưng lại có quá nhiều nhược điểm (Nhược điểm sao thì các bạn tự nhìn thấy nhé). Ở Pro Version 1 này có sử dụng Font Awesome (Một thiết kế tuyệt vời).




Đọc thêm:

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

● Hướng dẫn sử dụng Font Awesome cho Blogspot (blogger)

☼ Vậy Pro Version 1 có những ưu và nhược điểm gì ?

Ưu điểm: Thiết kế rất bắt mắt với người dùng <Tăng khả năng Click Share và like cho bài viết của bạn>, Có hiển thị tổng lượt Share cho từng bài viết, Có nút Show và hide tránh che lấp nội dung bài viết khi người dùng online bằng mobile và thanh Share chỉ hiện thỉ ở các trang bài viết và không hiện thị ở trang chủ, trang Archive hay các trang Label (nhãn) tránh gây khó chịu cho người dùng.

Nhược: Ở tính năng tính tổng lượt Share quá trình này cập nhật hơi chậm <Mất khoản 24h mới cập nhập đầy đủ> Chức năng sẽ được cải thiện hơn ở Pro Version 2

Demo hình ảnh nút share trượt dọc cho Blogspot Pro Version 1

☼ 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 trên thẻ </b:skin>.

/*----------------------------------------------------------------------------
Floating Social Media Share Buttons bar With Total Share Count
 and Show Hide Button
Designed by:: http://www.windows2it.com
Shares Count Code by:: http://donreach.com/social-share-count
 issued under GNU GPL Licence
Icons:: FontAwesome 4.0.3
************** Do Not Remove These Credits *************
-----------------------------------------------------------------------------*/
.twistMe {
  position: fixed;
  bottom: 25%;
  padding: 0;
  background: none;
  text-align: center;
  margin: 0 auto;
  z-index: 99999999;
}
.twistMe label:hover {
  cursor: pointer;
}
.twistMe label {
  text-align: center;
  width: 62px;
  background: #3A3939;
  color: #FFF;
  border: 0;
  font-family: fontawesome;
  display: block;
  font-size: 12px;
  padding: 1px 0px;
  border-radius: 0;
  transition: all .4s ease-in-out;
  position: absolute;
  margin-top: 305px;
}
input.ShowHideButton:checked + label {
  transform-origin: 50% 0%!important;
  -webkit-transform-origin: 50% 0%!important;
  -ms-transform-origin: 50% 0%!important;
  -moz-transform-origin: 50% 0%!important;
  -o-transform-origin: 50% 0%!important;
  opacity: 1;
  transform: translateX(0px) rotateY(-180deg);
  -webkit-transform: translateX(0px) rotateY(-180deg);
  -ms-transform: translateX(0px) rotateY(-180deg);
  -moz-transform: translateX(0px) rotateY(-180deg);
  -o-transform: translateX(0px) rotateY(-180deg);
  transition-delay: 0.2s;
  -webkit-transition-delay: 0.2s;
  -ms-transition-delay: 0.2s;
  -moz-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  border: 1px solid #3A3939;
  border-radius: 50px 0px 0px 50px;
  width: 30px;
}
input.ShowHideButton ~ .ShowHideMe {
  transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
  -webkit-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);
  -moz-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);
}
input.ShowHideButton:checked ~ .ShowHideMe {
  margin-left: -75px;
}
input.ShowHideButton {
display: none;
}
.twistBlogger-Floating-SocialBar {
  display: inline-block;
  margin: 0px;
  float: left;
  background: #DFDFDF;
  padding: 0;
  z-index: 9999!important;
  border-radius: 1px;
}
.twistBlogger-Floating-SocialBar > ul {
  padding: 0;
  margin:0;
}
.twistBlogger-Floating-SocialBar > ul > li {
  margin: 0px 0px 1px -1px;
  position: relative;
  text-align: center;
  list-style: none;
  list-style-type: none;
  padding: 5px 0px 0px 0px;
  height: 70px;
  width: 63px;
  overflow: hidden;
  display: block;
  box-sizing: border-box;
  background: #000000;
}
.twistBlogger-Floating-SocialBar .tab-overlay .fa {
  font-size: 25px;
  text-align: center;
  text-shadow: 0px 0px 20px #FFFFFF;
  color: #FFFFFF;
  padding: 9px 9px;
  line-height: 1.7em;
}
.twistBlogger-Floating-SocialBar .tab-warp {
  perspective: 500px;
  perspective-origin: 0% 50%;
  -webkit-perspective: 500px;
  -webkit-perspective-origin: 0% 50%;
  -moz-perspective: 500px;
  -moz-perspective-origin: 0% 50%;
}
.twistBlogger-Floating-SocialBar .facebook-button-tab .tab-overlay {
  background: #4965B4;
}
.twistBlogger-Floating-SocialBar .googleplus-button-tab .tab-overlay {
  background: #E06352;
}
.twistBlogger-Floating-SocialBar .tweeter-button-tab .tab-overlay {
  background: #00A8E8;
}
.twistBlogger-Floating-SocialBar .linkedin-button-tab .tab-overlay {
  background: #0077B5;
}
.twistBlogger-Floating-SocialBar .tab-overlay {
  margin-top: -5px !important;
  height: 70px;
  width: 63px;
  position: absolute;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 99999;
}
.twistBlogger-Floating-SocialBar .tab-wrap {
  position: absolute;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.twistBlogger-Floating-SocialBar .tab-flip .tab-overlay {
  display: block;
  transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
}
.twistBlogger-Floating-SocialBar .tab-flip:hover .tab-overlay {
  display: block!important;
  width: 0px;
  opacity: 0.5;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transform: translateX(-5px) rotateY(-95deg);
  -webkit-transform: translateX(-5px) rotateY(-95deg);
  -moz-transform: translateX(5px) rotateY(-95deg);
  transform-origin: 0% 100%;
}
.twistBlogger-Floating-SocialBar .count {
  padding-top: 4px;
  height: 25px;
  position: absolute;
  background: #3A3939!important;
  display: inline-block;
  width: 100%;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  bottom: 100%;
  font-family: sans-serif;
  font-weight: bold;
  left: 0;
  right: 0;
  font-size: 15px;
  z-index: 1!important;
}
.twistBlogger-Floating-SocialBar .count.h4:after {
  content: "\f064";
  top: 5px;
  border-radius: 50px;
  font-family: fontawesome;
  font-size: 15px;
  left: 4px;
  position: absolute;
  width: 0;
  height: 0;
}
.twistBlogger-Floating-SocialBar .share-btn {
  margin: 0px 0px 1px 0;
  background: #3A3939;
  position: relative;
  text-align: center;
  font-family: cursive;
  font-weight: bold;
  font-size: 13px;
  padding: 0px 0px 1px 0px;
  border: 0;
  color: #FFFFFF;
}  
Bước 3: Tiếp tục nhấn tổ hợp phím Ctrl + F và tìm đến thẻ </body>. Sau đó dán đoạn mã Code sau ở phía trên thẻ </body>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='twistMe'>
  <input class='ShowHideButton' id='twiSter' type='checkbox'/>
  <label for='twiSter'><i class='fa fa-backward'/></label>
  <div class='ShowHideMe'>
<div class='twistBlogger-Floating-SocialBar'>
<div class='share'>
    <div class='share-btn' data-service='total'>
        <div class='count h4'/>
        <div class='h6'>SHARES</div>
    </div>
    </div>
<ul>
<li>
<div class='facebook-button-tab tab-flip'>
<div class='tab-wrap'>
<div class='tab-overlay'>
<i class='fa fa-facebook'/>
</div>
</div>
<div class='fb-like' data-action='like' data-layout='box_count' data-share='false' data-show-faces='false'/>
</div>
</li>
<li>
<div class='googleplus-button-tab tab-flip'>
<div class='tab-wrap'>
<div class='tab-overlay'>
<i class='fa fa-google-plus'/>
</div>
</div>
<div class='g-plusone' data-size='tall'/>
</div>
</li>
<li>
<div class='tweeter-button-tab tab-flip'>
<div class='tab-wrap'>
<div class='tab-overlay'>
<i class='fa fa-twitter'/>
</div>
</div>
<a class='twitter-share-button' data-count='vertical' data-via='quangmen93' href='https://twitter.com/share'>Tweet</a>
</div>
</li>
<li>
<div class='linkedin-button-tab tab-flip'>
<div class='tab-wrap'>
<div class='tab-overlay'>
<i class='fa fa-linkedin'/>
</div>
</div>
<script data-counter='top' type='IN/Share'/>
</div>
</li>
</ul>
  </div>
  </div>
</div>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function () {
  var shareUrl = document.location.href.toLowerCase();
    $.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>
<script src='//platform.linkedin.com/in.js' type='text/javascript'> lang: en_US</script>
<script type='text/javascript'>
window.twttr=(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src=&quot;https://platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);t._e=[];t.ready=function(f){t._e.push(f);};return t;}(document,&quot;script&quot;,&quot;twitter-wjs&quot;));
</script>
<div id="fb-root"></div>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
</b:if>
</b:if>  
Bước 4: Khó khăn đây @! Lưu mẫu lại (-_-)

☼ Tùy chỉnh:

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

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

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

·        Nhược điểm Pro Version 1 sẽ được cải thiện ở Pro Version 2 các bạn theo dõi nhé !

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

Backlink: Phân tích hoạt động huy động vốn

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

0 nhận xét:

Đăng nhận xét

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