Social subscribe color full cho blogspot

Ngày nay mạng xã hội tương tác khá nhiều với bất cứ 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, chính vì như thế post này sẻ share cho khách hàng một đoạn code kết hợp giữa css và html để triển khai Socials to fanpage facebook trên những 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ì tôi chỉ sử dụng css và html nên việc thêm vào trong blog hay website sẻ không có tác động gì tới vận tốc load cả mà nó còn mang tới cho website của bạn thêm màu sắc, thêm ấn tượng.

Button share đẹp cho blogspot

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 dưới đâ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/AVvXsEhGc1-00zeGC4hwhKdOIGHu8JhoVFHBlG9i8Nz4alLpibY1F4KdFyQ5QYP_mccmdrY5rS-DBq91C0wcJpJJ0inpyW-IMkqzN0whEhdqqlaYhhyU_NQhjVhc_FdPY5EDbdNwKm3Q2hssJ0v7/s1600/fb14.png') no-repeat 10px center;}
.tips24h-social .tips24hfacebook a:hover{
background: #555 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGc1-00zeGC4hwhKdOIGHu8JhoVFHBlG9i8Nz4alLpibY1F4KdFyQ5QYP_mccmdrY5rS-DBq91C0wcJpJJ0inpyW-IMkqzN0whEhdqqlaYhhyU_NQhjVhc_FdPY5EDbdNwKm3Q2hssJ0v7/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/AVvXsEjQWdylGj3Rb_TNBHSJPjr_sT8MVZG437avLuzgkjBHeTZir75H3XZ2kOKVFGLCeB3H3mzuLnhb9jVk2Vs6ywMhLZ35TAznyVA3ZEU_sbpFgAhJtEuj5ZETfjP-FuMbsuxq2mSEdjzGpm_v/s1600/twitter14.png') no-repeat 8px center;
}
.tips24h-social .tips24htwitter a:hover{
background: #555
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQWdylGj3Rb_TNBHSJPjr_sT8MVZG437avLuzgkjBHeTZir75H3XZ2kOKVFGLCeB3H3mzuLnhb9jVk2Vs6ywMhLZ35TAznyVA3ZEU_sbpFgAhJtEuj5ZETfjP-FuMbsuxq2mSEdjzGpm_v/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/AVvXsEgCwuE5FBv47Z4KcL5wFLh3Vb8tBBEhKxxn1fi12aguHM8e6Qx01tXq6PlTsFYVJ1RU7z5IVNQC25i4lumNFmIZu41acTW2SuxYc-F52jzdFZ7-KDaNv2ucudPqrDyIDMjmWPzsUYo2KzxU/s1600/gplus14.png') no-repeat 10px center;
}
.tips24h-social .tips24hgoogleplus a:hover{
background: #555
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCwuE5FBv47Z4KcL5wFLh3Vb8tBBEhKxxn1fi12aguHM8e6Qx01tXq6PlTsFYVJ1RU7z5IVNQC25i4lumNFmIZu41acTW2SuxYc-F52jzdFZ7-KDaNv2ucudPqrDyIDMjmWPzsUYo2KzxU/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/AVvXsEhfMwt0JAj-dB9Lm8smqBUB68bY5x7PVK80Pf6YlUHAAOB9QGhTeoiM6AkJJ2kSSno2g54Ls0t253xekKZcCl4qNqiQnXp1WeeWJzTHmzt4icoEHaESfyggA6Mi2swbv6SEDPX3f68jchQS/s1600/linkedin14.png') no-repeat 10px center;}
.tips24h-social .tips24hlinkedin a:hover{
background: #555 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfMwt0JAj-dB9Lm8smqBUB68bY5x7PVK80Pf6YlUHAAOB9QGhTeoiM6AkJJ2kSSno2g54Ls0t253xekKZcCl4qNqiQnXp1WeeWJzTHmzt4icoEHaESfyggA6Mi2swbv6SEDPX3f68jchQS/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/AVvXsEj_UVlps2NjdB5pEeskG8w0f7Qp8LUsZeFa9WU4gFjMOj5JDXfa0XW0xC3aLrjSuuMZhopNkr1mUKkz99i-5VeCmWuOmSIW342l9ZE71uZ5NvX4kGVLtHwWnijUNETwyy-SJgqbYflg-NKb/s320/pinterest14.png') no-repeat 10px center;
}
.tips24h-social .tips24hpinterest a:hover{
background: #555 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_UVlps2NjdB5pEeskG8w0f7Qp8LUsZeFa9WU4gFjMOj5JDXfa0XW0xC3aLrjSuuMZhopNkr1mUKkz99i-5VeCmWuOmSIW342l9ZE71uZ5NvX4kGVLtHwWnijUNETwyy-SJgqbYflg-NKb/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/AVvXsEjsrc2pL5cfIenMlKc24n5M6-PEE9_sLTCSvVF1Wq-UFCn4J9qjkv7h3Y26M2iVuJjWqw1jOgRSDuLztMEuttOzvizcxOhoMUGOTwZoICWXApyL45LhzGASi-FW8BbH-c_zflbBKzJxWC0T/s320/delicious14.png') no-repeat 10px center;
}
.tips24h-social .tips24hdelicious a:hover{
background: #555 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsrc2pL5cfIenMlKc24n5M6-PEE9_sLTCSvVF1Wq-UFCn4J9qjkv7h3Y26M2iVuJjWqw1jOgRSDuLztMEuttOzvizcxOhoMUGOTwZoICWXApyL45LhzGASi-FW8BbH-c_zflbBKzJxWC0T/s320/delicious14.png') no-repeat 10px center;
}
.tips24h-social .tips24hdelicious{
margin-right: 0;
}

Sau khi thêm vào dứt 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/isharevietnam.blogspot.com" 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 những url tôi tô đỏ bạn hãy thay nó thành profile của site bạn tương ứng trên những mạng xã hội.

Share!Tweet

Chúc các bạn thành công!

Nội dung chính