Social Bookmarks với hiệu ứng CSS

Xin chào mọi người, hôm nay em sẽ giới thiệu cho mọi người một thủ thật tạo Social Bookmarks với hiệu ứng CSS mà em vừa "nghiên cứu" được. Demmo nằm ở bên dưới. Di chuột vào để xem hiệu ứng nhé!

• twitter
• Facebook
• pinterest

Mọi người thấy thế nào? Mướt nhỉ? Cái này em nghĩ khá là hợp cho các Personal và Simple Theme. Nào, chúng ta cùng bắt đầu thôi:
Vào   Bố cục  >>  Thêm tiện ích HTML  và dán code sau vào:

<style>
.social_bookmarks {
    margin: 0px 5px 0px 0px;
    position: relative;
    z-index: 150;
    right: -20px;
    bottom: -5px;
}
.social_bookmarks li {
    border-radius: 40px 40px 40px 40px;
    float: left;
    height: 100%;
    margin-left: -9px;
    overflow: hidden;
    padding: 0;
    position: relative;
}
.social_bookmarks li:hover {
    z-index: 10;
}
.social_bookmarks li a {
    word-wrap: normal;
    display: block;
    float: left;
    height: 100%;
    line-height: 40px;
    margin: 0px;
    min-height: 40px;
    outline: medium none;
    overflow: hidden;
    padding: 0px;
    position: relative;
    text-indent: 110%;
    width: 40px;
    z-index: 3;
}
.social_bookmarks_facebook a {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKc45Xv_idHMr2lA6g7i_jNAhDEdKvffXG0ZC44Lcxc74tD0AJb10N0yr2btvbITYBjFcVBZzAbiVQGKTqUuI_p-Zdz1G_nuVdPEMWGGPaasR2pA6cX5g_lPCG_fTj4rPBLlC7dFL1iQ/s512/icon-facebook.png") no-repeat scroll center 0 transparent;
}
.social_bookmarks_twitter a {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmgXu0KwODp6Eh5EVGfqHZJ-ahAh-0DtxBrMZgS_dihQbK0KOas_TRqzLvWbOeSr5pfZTXYvjjrpl8bexzE6-nwPmH57FDEbgo7XIshRnuw30jDRhRAgRoHdut7q26_4uzH3pZBDyf4A/s512/icon-twitter.png") no-repeat scroll center 0 transparent;
}

.social_bookmarks_pinterest a {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLNBZx0DTC_7ElNEUNSSbXMHPFbp230oaJCVnKoo1F_fTzjQjTtt5q4K5l6YDNECd0zXGiqRaMjsSeQnQENlL6nPRhqnZIwzFX8ApxNDEvfcFiqKA7phoixbcU7anK-aejjvtWLDZ-WQ/s512/icon-pinterest.png") no-repeat scroll center 0 transparent;
}
.dark_bg_color .social_bookmarks li a {
    background-position: center -43px;
}
.social_bookmarks_facebook:hover a, div .social_bookmarks_facebook .css_3_hover {
    background-color: #37589B;
    background-position: center -43px;
}
.social_bookmarks_twitter:hover a, div .social_bookmarks_twitter .css_3_hover {
    background-color: #46D4FE;
    background-position: center -43px;
}

.social_bookmarks_pinterest:hover a, div .social_bookmarks_pinterest .css_3_hover {
    background-color: #CB2027;
    background-position: center -43px;
}
#searchform {
    float: left;
    margin: 0;
    position: relative;
}

.header_meta {
    height: 60px;
   margin: 10px;
}
</style>

<div class="header_meta">
<ul class='social_bookmarks icon_count_3'>


<li class='social_bookmarks_twitter'><a href='Địa chỉ Fanpage'>Twitter</a></li>


<li class='social_bookmarks_facebook'><a href='Địa chỉ Fanpage'>Facebook</a></li>



<li class='social_bookmarks_pinterest'><a href='Địa chỉ Fanpage'>Pinterest</a></li></ul>

</div>

Vì trình độ CSS của em còn gà mờ nên chỉ làm được có thế. Có thể có một số lỗi mắc phải trên một số trình duyệt mà em không biết. Vì vậy nếu test xong mà bị lỗi thì mọi người cứ comment bên dưới. Em sẽ cố gắng khắc phục.

Nếu nhiều Like hoặc +1 thì bài sau em sẽ share cách tạo Share box dạng này :)))