Tạo nút chia sẻ lên mạng xã hội cho Blogspot

Sau một hồi lướt qua các blog thủ thuật Blogspot mình thấy răng đa số các blog đều sử dụng chức năng chia sẻ bài viết lên các trang mạng xã hội.
Tuy nhiên những nút share ấy thường được gắn với những đoạn js được kết nối tới một sever bên ngoài. Điều này khiến cho blog của bạn load chậm hơn khá nhiều. Nhất là trong tình trạng đứt cáp như hiện nay :V

Để khắc phục điều này, Việt Blogger xin chia sẻ đến các bạn một đoạn code nhỏ nhằm chia sẻ bài viết của bạn lên Facebook, Twitter và Google+.

Bước 1: Các bạn vào trình chỉnh sửa tem của blog.
Bước 2: Các bạn copy đoạn code sau đây và gián vào bất kỳ vị trí nào bạn muốn hiển thị.

<div id='share-post'>
<a class='facebook' expr:href='&quot;https://www.facebook.com/sharer/sharer.php?u=&quot; + data:post.url' onclick='window.open(this.href, &quot;_blank&quot;, &quot;height=430,width=640&quot;); return false;' target='_blank' title='Chia sẻ lên Facebook'><span/>Facebook</a>
<a class='twitter' expr:href='&quot;https://twitter.com/share?=&quot; + data:post.url' target='_blank' title='Chia sẻ lên Twitter'>
<span/>Tweet</a>
<a class='google' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' onclick='javascript:window.open(this.href,   &quot;&quot;, &quot;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600&quot;);return false;' rel='nofollow' title='Share this on Google+'>
<span/>Google+</a>
</div>

Bước 3: Làm đẹp cho nút share ( Mình lấy style bên terocket.com )
Các bạn copy đoạn CSS sau và dán vào trước thẻ ]]></b:skin> nhé!

#share-post {
  width: 100%;
  overflow: hidden;
  margin-top: 20px;
}
#share-post .facebook {
  background-color: #436FC9;
}
#share-post a {
  display: block;
  height: 32px;
  line-height: 32px;
  color: #fff;
  float: left;
  padding-right: 10px;
  margin-right: 10px;
  margin-bottom: 25px;
}
#share-post .facebook span {
  background-color: #3967C6;
}
#share-post span {
  display: block;
  width: 32px;
  height: 32px;
  float: left;
  margin-right: 10px;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1rFS7dytQRqErnNEQyDJOTCyiSPMmK9GXtdgh-rGqiaOyRD0ORazQtF0bovbT0ZSdtquZEVwwMIwRZUEnLV6VevjUCeZO8NUg5-xaPSLGl5peJZE_j6Bgx5V3OB0L2KwCW1BUy9saT3E/s1600/single-share.png) no-repeat;
}
#share-post .twitter {
  background-color: #40BEF4;
}
#share-post .twitter span {
  background-color: #26B5F2;
  background-position: -72px 0;
}
#share-post .twitter {
  background-color: #40BEF4;
}
#share-post .google {
  background-color: #EC5F4A;
}
#share-post .google span {
  background-color: #E94D36;
  background-position: -144px 0;
}
#share-post .google {
  background-color: #EC5F4A;
}

Xong rồi vào đây là kết quả.

Hi vọng bài viết sẽ có ích với các bạn!