Tạo Button Share cực chất dành cho Blogspot

Xin chào tất cả các bạn, chào mừng các bạn đã quay trở lại Blog của Tính Getter!
Ngồi mò CSS và HTML thì tự nhiên mình bỗng nghĩ ra cái ý tưởng này, nên mình lên kế hoạch bắt tay vào làm và share cho anh em luôn :v Nhìn cũng khá là bắt mắt đấy chứ 😆 Hôm nay mình xin hướng dẫn các bạn tạo Button Share cực chất dành cho Blogspot. 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é!