Code tạo nút chia sẻ (share) đẹp đơn giản cho blog là một “thủ thuật” đưa “code” của “nút share” lên 3 mạng xã hội, đơn giản mà hiệu quả. Nếu đối với một số người thích “hiệu ứng đẹp” thì nó không phải là lựa chọn, nhưng đối với những bạn muốn đơn giản để “tăng tốc độ cho blog” thì có lẽ nó sẽ phù hợp hơn.

Ở một số trang đã hướng dẫn về bài tương tự, mình cũng có tham khảo trong đó. Nhưng mình cũng có một cách khác ngoài cách đó, vì mình nghĩ đôi lúc những cách đã viết đó thực sự không hiệu quả trên một số trang vì xung đột một số lỗi nào đó.
I. Chèn nút share ở chân bài viết

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

Đầ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é

Share on Facebook

Share on Twitter

Share on Google Plus

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. Cách khác:Chèn nút share ở đầu hoặc chân bài viết hoặc cả 2(xem trang mình)
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;
}

Share on Facebook

Share on Twitter

Share on Google Plus

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

Rồi xong, có gì chưa được cứ comment cho mình nhé ! Chúc các bạn thành công cùng “thủ thuật blog” này