Tạo button share cực chất cho blogger

Demo thì các bạn xem dưới bài viết này nhé. Nào, không linh tinh luyên thuyên và dài dòng nữa, chúng ta cùng bắt đầu nhé!

HƯỚNG DẪN THỰC HIỆN

Bước 1: Các bạn đăng nhập Blogger  Chủ đề  Chỉnh sửa HTML.
Bước 2: Chèn đoạn CSS này trước thẻ ]]></b:skin>

.tgb-share-btn{text-align: center; margin:16px 0 27px}
.tgb-share-btn a{display:inline-block; font-size: 22px; line-height: 2em; text-align: center; width: 50px}
.facebook-ico{color:#3B5998; border-bottom:3px solid #3B5998}
.twitter-ico{color:#19BFE5; border-bottom:3px solid #19BFE5}
.gplus-ico{color:#D64136; border-bottom:3px solid #D64136}
.linkedin-ico{color:#007bb6; border-bottom:3px solid #007bb6}
.tumblr-ico{color:#35465c; border-bottom:3px solid #35465c}
.tgb-share-btn a:hover{background:#fff}

Bước 3: Tìm tất cả các thẻ <data:post.body/> và chèn đoạn HTML này vào phía sau nó. (Các bạn có thể chèn vào bất cứ vị trí nào các bạn muốn đặt, miễn là nó hiển thị trong bài viết là được.)

<div class='tgb-share-btn'>
<a class='facebook-ico' expr:href='&quot;https://m.facebook.com/sharer/sharer.php?u=&quot; + data:post.url' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' title='Chia sẻ lên Facebook'><i class='fa fa-facebook' style='color: #3b5998; font-size: 25px;'/></a>
<a class='twitter-ico' expr:href='&quot;https://twitter.com/intent/tweet?text=&quot; + data:post.title + data:post.url' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' title='Chia sẻ lên Twitter'><i class='fa fa-twitter' style='color: #19bfe5; font-size: 25px;'/></a>
<a class='gplus-ico' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' title='Chia sẻ lên Google+'><i class='fa fa-google-plus' style='color: #d64136; font-size: 25px;'/></a>
<a class='linkedin-ico' expr:href='&quot;https://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' title='Chia sẻ lên LinkedIn'><i class='fa fa-linkedin' style='color: #007bb6; font-size: 25px;'/></a>
<a class='tumblr-ico' expr:href='&quot;https://www.tumblr.com/share?v=3&amp;u=&quot; + data:post.url' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' title='Chia sẻ lên Tumblr'><i class='fa fa-tumblr' style='color: #35465c; font-size: 25px;'/></a>
  </div>

Lưu ý: Các bạn có thể thêm (hoặc bớt) các trang mạng xã hội mà các bạn cần share sao cho phù hợp với Blog của bạn, cách thêm hoặc bớt chắc mình cũng không cần nói ở đây rồi chứ nhỉ 😆

Bước 4: Lưu lại vào xem thành quả 😄

TỔNG KẾT LẠI

Chỉ vài bước đơn giản các bạn đã có thể tạo cho Blog của các bạn Button Share cực chất rồi. Nếu thấy hay thì đừng quên cho mình 1 comment & 1 share nha 😋 Còn bạn nào không hiểu hoặc không thực hiện được thì đừng ngần ngại để lại comment ở phía dưới bài viết để mình hỗ trợ nhé. Chúc các bạn thành công và đừng quên truy cập Blog mỗi ngày để xem thêm nhiều bài viết hữu ích & chất lượng hơn nữa nhé

Share this post

La Ngọc Hưng

Chào các bạn đến với blog truyện tổng hợp của mình nhé !

Facebook

WhatsApp

Instagram

Subscribe Our Newsletter

Posting Terkait