Floating social bookmark với hiệu ứng rê chuột cho Blogger style 2

Hôm nay mình sẽ chia sẻ cho các bạn một mẫu social bookmark khác, nó bao gồm các nút Facebook, Twitter, Google Plus, RSS và Pinterest. Mẫu này là floating và kết hợp thêm hiệu ứng ẩn khi khi bạn rê chuột vào nút. Bạn có thể xem demo ngay trên bài viết này.

#Thêm tiện ích vào blog

1. Đăng nhập Blogger
2. Bố cục > Thêm tiện ích > HTML/Javascript
3. Dán code dưới vào

<style type="text/css">
ul#social {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 10px;
    left: 0px;
    list-style: none;
    z-index:9999;
}
ul#social li {
    width: 100px;
}
ul#social li a {
    display: block;
    margin-left: -2px;
    width: 100px;
    height: 70px;    
    background-color:#fff;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    -moz-box-shadow: 0px 4px 3px #000;
    -webkit-box-shadow: 0px 4px 3px #000;
}
ul#social .twitter a{
     background:#0F96C6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3USuNUGY4p2HsUxBAoYulhU93_58KKp401uszvufjuddx4268-QlVOh0fLfOg5m7Rn_u0R59HE7FLRYPbGjkEk37NOUuR0OnpeMFpDtKmDwtHSuekHSh9pDh07QUUKlIn5zB5k_LhAIU/s1600/Twitter.png)no-repeat;
background-position:center center;
}
ul#social .googleplus a      {
    background:#D73D27 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7VADAXGIEsi0Vec5rAD5Tg2vNmF-CNKQnJXl5TN4CrACy8LXL9mVatZoTCiCJlYBglaSE5GpsNgFqeKqgBe2nLrAV_vOb3-3ELA0TeX1BkNcXDqI7kZDgJfiKeXwfB4vwdn2BJ7V-kZw/s1600/GOOGLE+PLus.png)no-repeat;
background-position:center center;
}
ul#social .facebook a      {
    background:#1A4B97 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD7aSCl5s40bV2IPd_XZsn2ga7lKXzYWzNMu-1egr2QdS8hp_shUvHyqimmc0T7f0dY5e3irVyWUDqVDvjPIA844EAV4JjgJcIDfNLyfpZoaLRSWmfUbnnZGpTq29fqRqG0Fz3K85C5Mw/s1600/Facebook.png)no-repeat;
background-position:center center;
}
ul#social .rss a      {
    background:#FAAE17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5cEt2l4HP3cr1B_TztmZdP56YwgAdpoE6CeHoz2oCUIWvjxjKYvzjNi8QssstMkfnLYO_nstfSeNqTWhBx8n3mOQHeEavOPTsHX4roWNO7W7KjFhaWOemeBT4WlNVi7aeBPx2WB3N4mw/s1600/rss.png)no-repeat;
background-position:center center;
}

ul#social .pinterest a   {
    background:#963336 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Y7hBPFoly4dKB8Rzzgc5iVpqntQHtReffngK9U2pxrJDFd7pQ6i3Ec30kkA00UFwaI3A1ipXDFobViouldzQdxZ88Sw008CCdiwDxlu_lMukahIcApKiyelx1vm1PCP5yUVQGP9oQ0E/s1600/Pinterest.png)no-repeat;
background-position:center center;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/javascript'>
$(function () {
    $('#social a').stop().animate({
        'marginLeft': '-85px'
    }, 1000);

    $('#social > li').hover(
        function () {
            $('a', $(this)).stop().animate({
                'marginLeft': '-2px'
            }, 200);
        },
        function () {
            $('a', $(this)).stop().animate({
                'marginLeft': '-85px'
            }, 200);
        }
    );
});
</script>
<ul id='social'>
 <li class='twitter'><a href='#' title='Twitter'></a></li>
 <li class='googleplus'><a href='#' title='Google Plus'></a></li>
 <li class='facebook'><a href='#' title='Facebook'></a></li>
 <li class='rss'><a href='#' title='Rss'></a></li>
 <li class='pinterest'><a href='#' title='Pinterest'></a></li>
</ul>

4. Thay # với URL đến profile trên mạng xã hội của bạn
5. Lưu lại
Lưu ý: Nếu tiện ích này hoạt động không tốt trên blog của bạn thì rất có thể là đoạn Jquery 1.9.1 đã có trong template của bạn. Hãy kiểm tra lại, nếu đúng thì xóa đoạn màu cam đi.

blogtipsntricks