Kết bạn cùng KhanhNguyen's blog

Cảm nhận tư duy và tổng hợp kiến thức

Thứ Bảy, 6 tháng 2, 2016

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

Facebook Comment Không có nhận xét nào

Thêm nút Share trực tiếp vào bài viết cho Blogspot Pro Version 2Xin 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á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)

DEMO hình ảnh đáp mọi chế độ phân giải khác nhau của màng hình

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.windows2it.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 {


    z-index: 2;

position: relative;
    background: none;




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;


    padding: 0;

text-align: center;




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;


    color: #FF0000;

text-align: center;




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,


    color: #C3C3C3;

.tbn_horizontal_sharebar .Share_buttons .btn_linkdin .share-btn {
    position: relative;




display: inline-block;


    font-weight: bold;

text-align: center;


    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;

}
}


</b:if>  



</style>
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) {


if (count > 1000) {

service = $(el).parents(".share-btn").attr("data-service");
            count = shares[service];




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 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=auto,height=436&quot;   );   return false;' rel='nofollow'>

</li>




<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 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=auto,height=436&quot;   );   return false;' rel='nofollow'>

</li>




  <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 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=auto&quot;   );   return false;   ' rel='nofollow'>

</li>




  <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 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=auto,height=500&quot;   );   return false;' rel='nofollow'>

</li>




  <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 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;   summary=&amp;   source=&quot;   ' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=auto,height=500&quot;   );   return false;' rel='nofollow'>

</li>




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


</ul>

</li>


</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


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

Nguồn Windows2it.com

Socializer Widget by Nguyen D. Khanh
SOCIALIZE IT →
FOLLOW US →
SHARE IT →

Các bạn có thể tham khảo thêm nhiều kiến thức từ các bài viết mà mình đã SEO bằng các Từ khóa bên dưới bài đăng nầy để tìm hiểu thêm về các khái niệm và ứng dụng có liên quan nhé.. 

Share:
LIKE and Share this article: :
Nguyễn Đạt Khánh | Thứ Bảy, tháng 2 06, 2016 | |
author

Được viết bởi Khánh Nguyễn

Blog của tôi, Nguyễn Đạt Khánh là tên của tôi :
Nghề nghiệp: IT Computer Networking - Kỹ thuật viên Mạng máy tính Viễn thông
Bạn đang xem Blog của tôi. Đừng quên nhấn Like và Share để ủng hộ. Một điều tốt nhất mà tôi mong đợi, là những dòng Comments thiện chí với nhau. Xin chân thành cảm ơn tất cả các bạn.
Nơi truy cập vào Nick của Tôi trên mạng:

0 Comments:

Đăng nhận xét

More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa





Thống kê Blogspot

Lưu trữ Blog

Bài có thể xem

Mời tham gia CLB

 
Câu Lạc Bộ Kết bạn & Chia sẻ thông tin
Nhóm Công khai · 1.614 thành viên
Tham gia nhóm
Mục đích phát triển của Câu lạc bộ: - Cảm nhận tư duy và tổng hợp kiến thức.Cùng nhau Kết bạn và chia sẽ những gì tốt đẹp . - Giúp nhau chia sẽ thươn...
 
 
BACK TO TOP