Tạo nút share cho blogspot đẹp

Hôm nay mình sẽ hướng dẫn các bạn tạo thêm nút share Facebook, Google +, Twiter..vvv cho blogspot.
Bạn có thể chèn tiện ích này dưới tiêu đề hoặc cuối bài viết trong blogspot để giúp trang web của bạn được phổ biến hơn khi tạo điều kiện cho người dùng chia sẻ nó.

Ảnh demo



Với 2 bước đơn giản là chèn CSS và HTML vào phần mẫu ta sẽ được tiện ích này rất dễ dàng.

Bước 1: Chèn CSS trước /b:skin


.share-art{position: relative;display: block;overflow: hidden;}
.sa-title{display:block;float:left;margin:17px 15px 8px 0;padding:0}
.sa-title strong{font-size:16px;display:block}
.share-art a{float:left;font-size:12px;line-height:30px;color:#fff;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;margin:8px 3px;padding:1px 20px;height:30px;text-align:center}
.share-art a:hover{background-color:#222;color:#fff}
.share-art a i.fa{font-size:12px}
.share-art .facebook{background-color:#003471}
.share-art .twitter{background-color:#00BFF3}
.share-art .googleplus{background-color:#EA4D29}
.share-art .pinterest{background-color:#C6393D}
.share-art .linkedin{background-color:#0077B5}


Bước 2: Chèn HTML bên dưới vào vị trí cần hiện


<div class='share-box'> <div class='share-art'><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-facebook'/><span> Share on Facebook</span></a> <a class='googleplus' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/><span> Share on Google+</span></a><a class='twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a> <a class='pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot; + data:post.snippet' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-pinterest-p'/></a> </div> </div>

Ví dụ để chèn nút share cho blogspot nằm dưới tiêu đề. Bạn chuột phải và Kiểm tra phần tử tại tiêu đề

Như blog mình là tìm dòng post-title entry-title rồi chèn dưới đoạn code đó

Tôi Là Quản Trị Blog
Chúc bạn thành công!
Điểm 4.6/5 dựa vào 87 đánh giá

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

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

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước .

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.

Khi xuất bản bài viết chắc chắn không tránh khỏi lỗi về chính tả, cú pháp.