Button chia sẻ mạng xã hội cho Blogger trượt ngang

Thêm button chia sẻ mạng xã hội cho Blogger

Công dụng của các button chia sẻ mạng xã hội này thì khỏi phải nói rồi nhé nó giúp người dùng có thể chia sẻ bài viết của blog lên các mạng xã hội nhanh chóng và tiện lợi hơn, đồng nghĩa với việc chúng ta sẽ có thêm nhiều lượt truy cập….

Mẫu button này mình sưu tầm từ internet và sửa lại chút xíu cho nó phù hợp với blogger điển hình là  link liên kết sẽ khác.

Cách thực hiện bao gồm 3 bước, bạn làm theo từng bước như tôi hướng dẫn nhé
Bước 1: Bạn cần sử dụng Font Awesome, chèn đoạn mã sau vào trước </head> trong template

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>

Bước 2 : Thêm CSS cho nó

 .socials-share {
    text-align: center;
    margin-bottom: 30px;
}
.socials-share a {
    padding: 4px 30px;
    color: #fff;
    line-height: 2em;
    text-decoration: none;
    border-radius: 2px;
    white-space: nowrap;
    display: inline-block;
    margin-bottom: 4px;
}
.socials-share span.fa {
    margin-right: 3px;
}
.bg-facebook {
    background: #3a5899;
}
.bg-facebook:hover, .bg-facebook:focus {
    background: #1d418d;
}
.bg-twitter {
    background: #00acee;
}
.bg-twitter:hover, .bg-twitter:focus {
    background: #0b93c7;
}
.bg-google-plus {
    background: #db4437;
}
.bg-google-plus:hover, .bg-google-plus:focus {
    background: #bb2a1d;
}
.bg-pinterest {
    background: #cb1e26;
}
.bg-pinterest:hover, .bg-pinterest:focus {
    background: #ae0e15;
}
.bg-email {
    background: #dd5348;
}
.bg-email:hover, .bg-email:focus {
    background: #ce3f34;
}

Và cuối cùng là vị trí đặt button cũng giống như bài trước nó thường nằm phía trên bài viết liên quan. Nếu bạn muốn hiển thị phía dưới tiêu đề bài viết thì thêm đoạn code bên dưới vào sau thẻ <div class='post-header'>
Nếu bạn muốn hiển thị phía cuối bài viết thì thêm đoạn code trên vào sau thẻ <div class='post-footer'>

 <div class="socials-share">
    <a class="bg-facebook" expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><span class="fa fa-facebook"></span> Share</a>
    <a class="bg-twitter" expr:href='&quot;https://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><span class="fa fa-twitter"></span> Tweet</a>
    <a class="bg-google-plus" expr:href='&quot;https://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Google Plus Share'><span class="fa fa-google-plus"></span> Plus</a>
    <a class="bg-pinterest" expr:href='&quot;https://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;' target='_blank'><span class="fa fa-pinterest"></span> Pin</a>
    <a class="bg-email" href="" target="_blank"><span class="fa fa-envelope"></span> Gmail</a>
</div>