Floating Social Bookmark Sidebar

Hôm nay mình cũng vừa mới làm xong thêm một mẫu social bookmark đặt ở sidebar. Nó có kết hợp thêm hiệu ứng chuyển động khi rê chuột khá là vui mắt. Cái này mình lấy ý tưởng từ trên TV, khi mà họ thường đặt username Facebook, Twitter... của họ ở sau các icon.

Social bookmark sidebar

VIEW DEMO

#Thêm social bookmark

1. Đăng nhập Blogger

2. Mẫu > Thêm tiện ích > HTML/Javascript

3. Dán code dưới vào 

<style type="text/css">
#khanh98-social-flat{ border:solid 1px #000; }
#khanh98-social-flat a{display:inline-block;padding:1px; margin:1px; width:100%;text-decoration:none;font-family:arial; font-weight:bold;overflow:hidden
}
#khanh98-social-flat a i {width:25px; height:25px;display:inline-block;text-align:center;line-height:25px;color:#fff;}
#khanh98-social-flat a:nth-child(1) i{background:#3B5998;height:25px;}
#khanh98-social-flat a:nth-child(3) i{background:#55ACEE;}
#khanh98-social-flat a:nth-child(5) i{background:#EB7352;}
#khanh98-social-flat a:nth-child(7) i{background:#F35D5C;}
#khanh98-social-flat a:nth-child(9) i{background:#4D8CB0;}
#khanh98-social-flat a span{padding:4px 4px 4px 0;margin-left:0}
#khanh98-social-flat a:nth-child(1) span{background:transparent;color:#3967C6;box-shadow:inset 0px 0  0 0 #ea5a59;transition:all 0.5s ease-in-out;}
#khanh98-social-flat a:nth-child(1) span:hover{color:#fff;box-shadow:inset 300px 0  0 0 #3967C6;}
#khanh98-social-flat a:nth-child(3) span{background:transparent;color:#55ACEE;box-shadow:inset 0px 0  0 0 #ea5a59;transition:all 0.5s ease-in-out;}
#khanh98-social-flat a:nth-child(3) span:hover{color:#fff;box-shadow:inset 300px 0  0 0 #55ACEE;}
#khanh98-social-flat a:nth-child(5) span{background:transparent;color:#ea5c35;box-shadow:inset 0px 0  0 0 #ea5a59;transition:all 0.5s ease-in-out;}
#khanh98-social-flat a:nth-child(5) span:hover{color:#fff;box-shadow:inset 300px 0  0 0 #ea5c35;}
#khanh98-social-flat a:nth-child(7) span{background:transparent;color:#F02C2C;box-shadow:inset 0px 0  0 0 #ea5a59;transition:all 0.5s ease-in-out;}
#khanh98-social-flat a:nth-child(7) span:hover{color:#fff;box-shadow:inset 300px 0  0 0 #F02C2C;}
#khanh98-social-flat a:nth-child(9) span{background:transparent;color:#6FBFF0;box-shadow:inset 0px 0  0 0 #ea5a59;transition:all 0.5s ease-in-out;}
#khanh98-social-flat a:nth-child(9) span:hover{color:#fff;box-shadow:inset 300px 0  0 0 #6FBFF0;}

</style>
<div id="khanh98-social-flat">
<a href="https://facebook.com/USERNAME/">
<i class="fa fa-facebook"></i>
<span>/khanh98.blogspot.com</span>
</a>

<br/>
<a href="https://twitter.com/USERNAME/">
<i class="fa fa-twitter"></i>
<span>/@chelskivn29</span>
</a>

<br/>
<a href="https://plus.google.com/USERNAME/">
<i class="fa fa-google-plus"></i>
<span>/+QuốcKhánhBùi26498</span>
</a>

<br/>
<a href="https://pinterest.com/USERNAME/">
<i class="fa fa-pinterest"></i>
<span>/QuocKhanh.Bui.50</span>
</a>
<br/>

<a href="https://linkedin.com/USERNAME/">
<i class="fa fa-linkedin"></i>
<span>/Chưa có</span>
</a>

</div><!-- bổ sung code -->

Thay USERNAME thành username trên các mạng xã hội của bạn vào
Các bạn có thể thay phần màu cam cho phù hợp

Lưu ý: Nếu trong template của bạn chưa có cài font Awesome thì hãy bổ sung đoạn dưới vào cuối code HTML ở trên

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" media="all"/>

4. Lưu mẫu lại và kiểm tra kết quả