Ngày nay mạng xã hội tương tác khá nhiều với bất kỳ một website nào và nếu không bắt kịp với xu hướng này thì website/blog của bạn chắc chắn sẻ thua trên mặt PR trên đấy, vì vậy bài viết này sẻ chia sẻ cho bạn một đoạn code kết hợp giữa css và html để làm Socials to fanpage trên các mạng xã hội phổ biến.

Thêm Social theo dõi mạng xã hội

Như nói trên thì mình chỉ sử dụng css và html nên việc thêm vào trong blog hay website sẻ không có ảnh hưởng gì tới tốc độ load cả mà nó còn mang đến cho website của bạn thêm màu sắc, thêm ấn tượng.

Xem thêm: Thêm bài viết phổ biến đẹp cho blogger/blogspot

Button chia sẻ đẹp cho blogspot

Demo trực tiếp tại đây

Thực hiện:

1. Vào Blogger Dashboard > Template > Edit HTML.
2. Tìm ]]></b:skin> (Nhấn Ctrl + F để tìm) và dán mã CSS sau đây trước thẻ đó.

a{text-decoration: none;} .tips24h-social div{padding-bottom: 10px;}
.tips24h-social{
overflow: hidden;
margin-bottom: 20px;
}
.tips24h-social a{
display: block;
padding-left: 20px;
color: #FFFFFF !important;
font-weight: 600;
font-family: "Open Sans","Tahoma","Verdana","Arial", sans-serif;
border-radius: 15px 15px 15px 15px;
transition: border-radius 0.50s;
-webkit-transition: border-radius 0.50s;
-moz-transition: border-radius 0.50s;
}
.tips24h-social a:hover{
border-radius: 0px 0px 0px 0px;
}
.tips24h-social div{
float: left;
margin-right: 10px;
width: 138px;
}
.tips24h-social .tips24hfacebook a{
padding: 7px 10px 7px 26px;
background: #3B5999 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiubTBKygpUH9RHCj7WnFfxXzs87YbuFpLonLmYgD5qsEnTF8O_jOdFnXMUS_SklzWEZDfA0q7_4vpZgjonOUvFyWlmNsxGrx1f2_wDcEsLAJVwRPmf9QBSswwFMhfxpfQwzaheFDIddTFH/s1600/fb14.png') no-repeat 10px center; }
.tips24h-social .tips24hfacebook a:hover{
background: #555 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiubTBKygpUH9RHCj7WnFfxXzs87YbuFpLonLmYgD5qsEnTF8O_jOdFnXMUS_SklzWEZDfA0q7_4vpZgjonOUvFyWlmNsxGrx1f2_wDcEsLAJVwRPmf9QBSswwFMhfxpfQwzaheFDIddTFH/s1600/fb14.png') no-repeat 10px center;
}
.tips24h-social .tips24htwitter a{
padding: 7px 10px 7px 32px;
background: #01BBF6 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRIWrO01uHypFGsIKVx6V-Kn18rm-QQ5eRAU40hLX1epkDZaZk_GrFfaCqMQof2BEkayU1XmaLWsJOT3Gpl4vmQtKIcUAeKthcf5ejnkqhrLVFinvItvp1iD_-usKPZldBnY58I8v6NQYW/s1600/twitter14.png') no-repeat 8px center;
}
.tips24h-social .tips24htwitter a:hover{
background: #555
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRIWrO01uHypFGsIKVx6V-Kn18rm-QQ5eRAU40hLX1epkDZaZk_GrFfaCqMQof2BEkayU1XmaLWsJOT3Gpl4vmQtKIcUAeKthcf5ejnkqhrLVFinvItvp1iD_-usKPZldBnY58I8v6NQYW/s1600/twitter14.png') no-repeat 8px center;
}
.tips24h-social .tips24hgoogleplus a{
padding: 7px 10px 7px 32px;
background: #D54135 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj-8-kXjY11TKEkDimzQcCUJhpp5GkmFsOcMQbniTYHO8NHMAV8XerkNo8askZAFgRD1lEMb1i5D2aNZ_yxu4PiTlFf_YUqKH6eYaFioclnzuqI6qQDYRVstdyBQHQyDAJP7tcyI8LuIdl/s1600/gplus14.png') no-repeat 10px center;
}
.tips24h-social .tips24hgoogleplus a:hover{
background: #555
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj-8-kXjY11TKEkDimzQcCUJhpp5GkmFsOcMQbniTYHO8NHMAV8XerkNo8askZAFgRD1lEMb1i5D2aNZ_yxu4PiTlFf_YUqKH6eYaFioclnzuqI6qQDYRVstdyBQHQyDAJP7tcyI8LuIdl/s1600/gplus14.png') no-repeat 10px center;
}
.tips24h-social .tips24hlinkedin a{
padding: 7px 10px 7px 35px;
background: #167FB1 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrmKQWg3wVVcN8qBUHPniw2m4ICY-nHsgGhilX5VGGKwHCmAbsUtJQtAYZA1PgqdGxGNMp1zMnV0ZNJ3QPuXn1FN0eQ1jidzYZHoRFvxg2QosIQtzkWT3SfbFQZQ3kvv7sYPChO_L2rOaz/s1600/linkedin14.png') no-repeat 10px center; }
.tips24h-social .tips24hlinkedin a:hover{
background: #555 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrmKQWg3wVVcN8qBUHPniw2m4ICY-nHsgGhilX5VGGKwHCmAbsUtJQtAYZA1PgqdGxGNMp1zMnV0ZNJ3QPuXn1FN0eQ1jidzYZHoRFvxg2QosIQtzkWT3SfbFQZQ3kvv7sYPChO_L2rOaz/s1600/linkedin14.png') no-repeat 10px center;
}
.tips24h-social .tips24hpinterest a{
padding: 7px 10px 7px 32px;
background: #CB2027 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGSacVsZzkSGIZflYDHgUdPXmOAjVwy1M5WkyLLlvoIGadvVmGfmFZg9nlj0VZhbeBQmRMc97pJtdBqbHYr3vQZXX1UjZgByPEvRUmCuvmti6NjTsv_nUAvG855H8Ds8w46FSFEFmRRkIj/s320/pinterest14.png') no-repeat 10px center;
}
.tips24h-social .tips24hpinterest a:hover{
background: #555 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGSacVsZzkSGIZflYDHgUdPXmOAjVwy1M5WkyLLlvoIGadvVmGfmFZg9nlj0VZhbeBQmRMc97pJtdBqbHYr3vQZXX1UjZgByPEvRUmCuvmti6NjTsv_nUAvG855H8Ds8w46FSFEFmRRkIj/s320/pinterest14.png') no-repeat 10px center;

}
.tips24h-social .tips24hdelicious a{
padding: 7px 10px 7px 32px;
background: #3173D1 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgREEWC8k-aKv1ugLcSQPyvIDTEu0h8S8eGsDOk-xZ2ZNW_iBlugYdAH2FPmauzKD70BhL4LXsyxilVhCcZGZ93jeISoqgXCDxhTJlj0aTZCnQkbmboFo_mMF0EKy5XcBPYQUa93mkNX44N/s320/delicious14.png') no-repeat 10px center;
}
.tips24h-social .tips24hdelicious a:hover{
background: #555 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgREEWC8k-aKv1ugLcSQPyvIDTEu0h8S8eGsDOk-xZ2ZNW_iBlugYdAH2FPmauzKD70BhL4LXsyxilVhCcZGZ93jeISoqgXCDxhTJlj0aTZCnQkbmboFo_mMF0EKy5XcBPYQUa93mkNX44N/s320/delicious14.png') no-repeat 10px center;
}
.tips24h-social .tips24hdelicious{
margin-right: 0;
}

Sau khi thêm vào xong bạn ấn lưu mẫu.

Tiếp theo bạn quay ra "Blogger Dashboard" để thêm vào 1 tiện ích HTML. Tùy bạn muốn chúng hiển thị ở đâu.

<div class="tips24h-social">
<div class="tips24hfacebook">
<a href="https://www.facebook.com/tips24h.net" target="_blank">Facebook</a> </div>
<div class="tips24htwitter">
<a href="https://twitter.com/tips24hdotnet" target="_blank">Twitter</a> </div>
<div class="tips24hgoogleplus">
<a href="https://plus.google.com/" target="_blank">Google+</a> </div>
<div class="tips24hlinkedin">
<a href="http://in.linkedin.com/in/" target="_blank">Linkedin</a> </div>
<div class="tips24hpinterest">
<a href="http://pinterest.com/" target="_blank">Pinterest</a> </div>
<div class="tips24hdelicious">
<a href="#Delicious_Profile" target="_blank">Delicious</a> </div>
</div>

Với các url mình tô đỏ bạn hãy thay nó thành profile của site bạn tương ứng trên các mạng xã hội.