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

https://www.longanit.com/2018/09/button-chia-se-mang-xa-hoi-cho-blogger_23.html

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

Lê Hiền 9/23/2018
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>

1 nhận xét:

Một số lưu ý khi bình luận

Tất cả bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy).

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.

Bạn có thể dùng ảnh động hoặc mã hóa code HTML để bình luận.