Code tạo nút chia sẻ (share) đẹp cho blog

I. Chèn nút share ở chân bài viết

Đầu tiên bạn đăng nhập vào blog => Vào Mẫu => Vào Chỉnh sửa HTML. Dùng tổ hợp phím Ctrl + F để tìm đến dòng sau <data:post.body/> (Đây là cách dùng nhiều ở các trang nhé) nó áp dụng khi bạn chèn 3 nút share này ở chân bài viết, nên phải tìm cho đúng cái dòng này <data:post.body/> thì các nút nó mới giống như hình dưới được.
Sau đó copy dòng code dưới và dán vào bên dưới dòng tìm được nhé

Tiếp tục dùng Ctrl + V tìm đến </b:skin> và copy tiếp dòng code dưới dán phía trên dòng code </b:skin> này nhé. “VL” Lưu ý khi nhấn Ctrl + V bạn nhập vào dòng tìm kiếm nếu sau này quên thì hãy nhớ b:skin và enter 2 lần là nó tìm được, không nhất thiết dài dòng nhé.

/*** www.vlthat.com ***/
.anhao-vlthat {
font-size: 13px;
margin-top: 15px;
}
.anhao-vlthat li {
float: left;
}
.anhao-vlthat a {
display: block;
margin-right: 10px;
text-indent: -9999px;
margin-left: 12px;
background: url(http://4.bp.blogspot.com/-M_utSb-nN04/U6V8Gut9dJI/AAAAAAAAAjE/6g1X58pjjcg/s1600/single-share.png) no-repeat;
-webkit-transition: opacity .2s;
-moz-transition: opacity .2s;
-o-transition: opacity .2s;
transition: opacity .2s;
}
.anhao-vlthat a:hover {
opacity: .7;
}
.anhao-vlthat
.facebook a {
width: 7px;
}
.anhao-vlthat
.twitter a {
width: 18px;
background-position: -47px 0;
}
.anhao-vlthat
.google a {
width: 14px;
background-position: -105px 0;
}
.anhao-vlthat
.pinterest a {
width: 11px;
background-position: -159px 1px;
}
#anhao-vlthat {
width: 100%;
overflow: hidden;
margin-top: 20px;
}
#anhao-vlthat a {
display: block;
height: 32px;
line-height: 32px;
color: #fff;
float: left;
padding-right: 10px;
margin-right: 10px;
margin-bottom: 25px;
}
#anhao-vlthat
.facebook {
background-color: #436FC9;
}
#anhao-vlthat
.twitter {
background-color: #40BEF4;
}
#anhao-vlthat
.google {
background-color: #EC5F4A;
}
#anhao-vlthat
span {
display: block;
width: 32px;
height: 32px;
float: left;
margin-right: 10px;
background: url(http://1.bp.blogspot.com/-XV5mm0DRh6Q/VdxzkSZkQ9I/AAAAAAAAAm4/ft11QQHS98c/s1600/anhao-vlthat.png) no-repeat;
}
#anhao-vlthat
.facebook span {
background-color: #3967C6;
}
#anhao-vlthat
.twitter span {
background-color: #26B5F2;
background-position: -72px 0;
}
#anhao-vlthat
.google span {
background-color: #E94D36;
background-position: -144px 0;
}
Lưu lại thế là xong.

II. Chèn nút share ở đầu hoặc chân bài viết hoặc cả 2 nơi

Dùng tổ hợp phím Ctrl + F để tìm đến dòng sau <data:post.body/> ở cách này nếu muốn hiện ở đầu tìm dòng đầu tiên, hiện ở cuối thì chọn dòng cuối cùng hoặc có thể bạn chèn ở vị trí khác cũng được không nhất thiết là dưới <data:post:body/> cũng có thể là dưới <div class=’post-body entry-content’…
Rồi tiếp tục copy dòng code dưới, ở đây code này cũng giống trên nhưng thay vì dùng đoạn thứ 2 cho vào <b:skin></b:skin> thì ta cho nó vào thẻ <style></style> và đặt kèm phía trên dòng code 1 thế là được.

/*** www.vlthat.com ***/
.anhao-vlthat {
font-size: 13px;
margin-top: 15px;
}
.anhao-vlthat li {
float: left;
}
.anhao-vlthat a {
display: block;
margin-right: 10px;
text-indent: -9999px;
margin-left: 12px;
background: url(http://4.bp.blogspot.com/-M_utSb-nN04/U6V8Gut9dJI/AAAAAAAAAjE/6g1X58pjjcg/s1600/single-share.png) no-repeat;
-webkit-transition: opacity .2s;
-moz-transition: opacity .2s;
-o-transition: opacity .2s;
transition: opacity .2s;
}
.anhao-vlthat a:hover {
opacity: .7;
}
.anhao-vlthat
.facebook a {
width: 7px;
}
.anhao-vlthat
.twitter a {
width: 18px;
background-position: -47px 0;
}
.anhao-vlthat
.google a {
width: 14px;
background-position: -105px 0;
}
.anhao-vlthat
.pinterest a {
width: 11px;
background-position: -159px 1px;
}
#anhao-vlthat {
width: 100%;
overflow: hidden;
margin-top: 20px;
}
#anhao-vlthat a {
display: block;
height: 32px;
line-height: 32px;
color: #fff;
float: left;
padding-right: 10px;
margin-right: 10px;
margin-bottom: 25px;
}
#anhao-vlthat
.facebook {
background-color: #436FC9;
}
#anhao-vlthat
.twitter {
background-color: #40BEF4;
}
#anhao-vlthat
.google {
background-color: #EC5F4A;
}
#anhao-vlthat
span {
display: block;
width: 32px;
height: 32px;
float: left;
margin-right: 10px;
background: url(http://1.bp.blogspot.com/-XV5mm0DRh6Q/VdxzkSZkQ9I/AAAAAAAAAm4/ft11QQHS98c/s1600/anhao-vlthat.png) no-repeat;
}
#anhao-vlthat
.facebook span {
background-color: #3967C6;
}
#anhao-vlthat
.twitter span {
background-color: #26B5F2;
background-position: -72px 0;
}
#anhao-vlthat
.google span {
background-color: #E94D36;
background-position: -144px 0;
}

Chia sẻ cùng các bạn một số nút share đẹp