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>

Nhận xét

Đăng nhận xét

Nếu phát hiện spam bạn sẽ bị xử lý. Bạn có thể chọn cho mình một kiểu bình luận như bên dưới.

1. Bằng tài khoản Blogger
2. Bằng Tên/URL: Vui lòng nhập tên và Website của bạn nếu có
3. Bình luận với tư cách người dấu mặt

Được xem nhiều nhất

Download OneKey Ghost v14.5.8.215 GPT (UEFI)

Uconvert miễn phí cho Office 2003, 2007, 2010, 2013

Hướng dẫn triển khai AMP trên Blogspot

Sửa lỗi con trỏ chuột bị quay vòng vòng Windows 7/8

Đoạn code Javascript chống Ctrl + U và F12

Chia sẻ template blogspot longanit đang sử dụng

Lấy lại Windows Photo Viewer trên Windows 10 giúp xem ảnh nhanh hơn