Tạo 3 Nút Chia Sẻ Cho Blogspot

Mẫu nút chia sẻ lên các mạng xã hội nói chung là rất đa dạng và nhiều mẫu mã,loại nào cũng đẹp loại nào cũng hấp dẫn và đầy tiện lợi.Bài viết này xin chia sẻ cách tạo 3 nút chia sẻ cho blogspot với mẫu mã thật đơn giản nhưng cũng không kém phần lạ mắt,lạ mắt đơn giản vì ít người dùng.

Xem hình:

Xem Demo:
DEMO

Áp Dụng Vào Blogspot

Để cài đặt 3 nút chia sẻ gồm có nút tweet,facebook và G+ ta cần làm những bước sau đây:
Bước 1:Thêm CSS
Các bạn đăng nhập blog tới chỉnh sửa HTML và bỏ đoạn code sau vào trước thẻ: ]]></b:skin>

<style type='text/css'>
.promote_post_bg {
    height: 103px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxT9rnMDewl4_uJ2beu02Z6JPWY3jaJ2Nxe8enXQ1Ad3M4qEaTv9_muQtPLInzY7BewHAGrG1X-8q22S-wZNSADZE7Ov7tX8flVsym1f-lXeV5U1JQh8EE1Bk55FkMgC4LAfzrAnX_6JA/s1600/nut-chia-se-dautocrazy.blog.png) 0 -7px no-repeat;
    width: 500px;
    margin-left: 65px;
}
 
.promote_twitter {
    width: 130px;
    height: 38px;
    float: left;
    margin: 0 39px 0 0;
    padding: 65px 0 0 13px;
    text-align: center;
}
 
.promote_facebook {
    width: 115px;
    height: 40px;
    float: left;
    margin: 0 39px 0 0;
    padding: 63px 0 0 28px;
    text-align: center;
}
 
.promote_google {
    width: 65px;
    height: 40px;
    float: left;
    margin: 0 39px 0 0;
    padding: 65px 0 0 28px;
    text-align: center;
}
</style>

Bước 2:Thêm HTML
Vì ta đặt 3 nút chia sẻ này ngay dưới bài viết nên ta cần tìm tới thẻ:
<div class='post-footer-line post-footer-line-1'>
Và dán đoạn code sau vào trước nó:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='promote_post_bg'>
        <div class='promote_twitter'>
            <a class='twitter-share-button' data-via='Dautocrazy' href='https://twitter.com/share'>Tweet</a>
            <script>
                !
                function (d, s, id) {
                    var js, fjs = d.getElementsByTagName(s)[0];
                    if (!d.getElementById(id)) {
                        js = d.createElement(s);
                        js.id = id;
                        js.src = "//platform.twitter.com/widgets.js";
                        fjs.parentNode.insertBefore(js, fjs);
                    }
                }(document, "script", "twitter-wjs");
            </script>
        </div>
        <div class='promote_facebook'>
       <fb:like expr:href="data:post.canonicalUrl" layout='button_count' send='false'
                show_faces='false' font="verdana" action="like" colorscheme="light"></fb:like>
            <div>
                <b:if cond='data:post.isFirstPost'>
                    <script>
                        (function (d) {
                            var js, id = 'facebook-jssdk';
                            if (d.getElementById(id)) {