Tạo bộ nút mạng xã hội (Social Buttons) đẹp cho Blogspot

Hiện nay, việc kết nối trang cá nhân hay fanpage trên mạng xã hội với website/blog là việc vô cùng thiết yếu để dễ dàng quảng bá trang web của mình trên các mạng xã hội.

Bộ nút mạng xã hội được làm toàn bộ bằng HTML và CSS nên các bạn có thể yên tâm rằng tốc độ trang sẽ không bị ảnh hưởng nhé.

Xem demo

Các bước thực hiện

Bước 1: Từ trang quản trị blog bạn chọn Mẫu > Chỉnh sửa HTML
Bước 2: Thêm vào trước thẻ đóng ]]></b:skin> đoạn sau:

/* Social Buttons - NvPN Blog - nvpn.blogspot.com */
.social-button {margin-bottom: 20px;verflow: hidden;}
.social-button a {color: #FFFFFF !important;display: block;font-family: "Tahoma","Verdana","Arial",sans-serif;font-weight: 700;padding-left: 20px;}
.social-button div {float: left;margin-right: 10px;width: 138px;padding-bottom: 10px;}
.social-button .face a {background: url("http://goo.gl/fSfqjQ") no-repeat scroll 10px center #3B5999;padding: 7px 10px 7px 26px;}
.social-button .face a:hover {background: url("http://goo.gl/fSfqjQ") no-repeat scroll 10px center #777;}
.social-button .twit a {background: url("http://goo.gl/4HqgFa") no-repeat scroll 8px center #01BBF6;padding: 7px 10px 7px 32px;}
.social-button .twit a:hover {background: url("http://goo.gl/4HqgFa") no-repeat scroll 8px center #777;}
.social-button .gp a {background: url("http://goo.gl/WWkP0u") no-repeat scroll 10px center #D54135;padding: 7px 10px 7px 32px;}
.social-button .gp a:hover {background: url("http://goo.gl/WWkP0u") no-repeat scroll 10px center #777;}
.social-button .linke a {background: url("http://goo.gl/Xtrfcd") no-repeat scroll 10px center #167FB1;padding: 7px 10px 7px 35px;}
.social-button .linke a:hover {background: url("http://goo.gl/Xtrfcd") no-repeat scroll 10px center #777;}
.social-button .pint a {background: url("http://goo.gl/zFQfbu") no-repeat scroll 10px center #CB2027;padding: 7px 10px 7px 32px;}
.social-button .pint a:hover {background: url("http://goo.gl/zFQfbu") no-repeat scroll 10px center #777;}
.social-button .delic a {background: url("http://goo.gl/5f7cP8") no-repeat scroll 10px center #3173D1;padding: 7px 10px 7px 32px;}
.social-button .delic a:hover {background: url("http://goo.gl/5f7cP8") no-repeat scroll 10px center #777;}
.social-button .delic {margin-right: 0;}
.social-button a {color: #3A3A3A;outline: 0 none;text-decoration: none;transition: all 0.2s ease 0s;}
.social-button a:hover{border-radius: 10px;}

Bước 3: Tạo một widget HTML hoặc chèn bất kì chỗ nà trong template bạn muốn với đoạn code bên dưới:

<div class="social-button">
<div class="face">
<a target="_blank" href="Link Facebook">Facebook
</a>
</div>
<div class="twit">
<a target="_blank" href="Link Twitter">Twitter</a>
</div>
<div class="gp">
<a target="_blank" href="Link Google+">Google+</a>
</div>
<div class="linke">
<a target="_blank" href="Link Linkedin">Linkedin</a>
</div>
<div class="pint">
<a target="_blank" href="Link Pinterest">Pinterest</a>
</div>
<div class="delic">
<a target="_blank" href="Link Delicious">Delicious</a>
</div>

Các bạn hãy thay các đoạn màu đỏ thành liên kết đến trang cá nhân hoặc fanpage trên mạng xã hội của mình nhé!