Floating bookmark với hiệu ứng tooltip

Floating bookmark thì đã có nhiều nhưng mình chưa thấy có mẫu nào có hiệu ứng tooltip nên đã quyết định làm một cái. Với tiện ích này, ngoài hiệu ứng tooltip thì còn có thêm chút hiệu ứng hover đổi màu và sử dụng các icon mạng xã hội của font Awesome. Hôm nay vừa xong nên đem chia sẻ với các bạn luôn.

Floating bookmark với hiệu ứng tooltip

Các bạn có thể demo ngay trên bài viết này hoặc tại Codepen

Follow via Facebook Follow via Twitter Follow via G+ Follow via Pinterest Follow via Linkedin

#Thêm CSS

1. Đăng nhập Blogger

2. Mẫu > Chỉnh sửa HTML

3. Tìm thẻ ]]></b:skin>

4. Dán code dưới vào trước(trên) thẻ mà bạn vừa mới tìm

/* http://www.khanh98.blogspot.com/2015/07/floating-bookmark-voi-hieu-ung-tooltip.html */
#kb-social{
 position: fixed;
    top: 20%;
    
    z-index: 9999; 
 right:0px
}
#kb-social a{text-decoration:none; color:#fff;margin:1px 0 1px 0px;font-size:200%;display:inline-block;text-align:center;}
#kb-social .kb-social-facebook,#kb-social .kb-social-twitter,#kb-social .kb-social-google-plus,#kb-social .kb-social-linkedin,#kb-social .kb-social-pinterest{
background:#000;width:45px;height:45px;line-height:45px;padding:5px;display:block;
}

#kb-social .kb-social-facebook:hover{background:#435F99;}
#kb-social .kb-social-twitter:hover{background:#70ABD9}
#kb-social .kb-social-google-plus:hover{background:#D55A4B}
#kb-social .kb-social-linkedin:hover{background:#4D8CB0}
#kb-social .kb-social-pinterest:hover{background:#C6383D}
#kb-social a span{ 
 position:Absolute;
    
    
 
    white-space:nowrap;
    font-size:19px;
    font-family:arial;
    padding:0 05px 0 5px;
    
    color:white;
    background-color:#101010;
 visibility:hidden;
    opacity:0;
 -moz-transition:top 0.4s,opacity 0.4s ease;
    -webkit-transition:top 0.4s,opacity 0.4s ease;
    -o-transition:top 0.4s,opacity 0.4s ease;
    transition:top 0.4s,opacity 0.4s ease;
}
#kb-social a span:after{
    content:"";
    width:0;
    height:0;
    position:absolute;
    left:100%;
 bottom:40%;
    
    border:6px solid transparent;
    border-left:7px solid #101010;
}  
#kb-social a:hover span{
    visibility:visible;
    right:58px;
    opacity:1;
}

@media only screen and (max-width:479px){
#kb-social a{font-size:100%}
#kb-social .kb-social-facebook,#kb-social .kb-social-twitter,#kb-social .kb-social-google-plus,#kb-social .kb-social-linkedin,#kb-social .kb-social-pinterest{
width:20px;height:20px; padding:5px;line-height:20px}
#kb-social a span{display: none !important
}
}

Trong đoạn css trên bạn có thể thay giá trị top:20% thành một giá trị khác(120px chẳng hạn) - nó chính là khoảng cách của social với trên cùng. Thực ra các bạn cũng không cần đổi vì giá trị 20% khá là hợp lí rồi.

Như vậy là xong phần css, tiếp theo ta thêm chút HTML nữa là xong.

#Thêm HTML

1. Tìm thẻ </body>

2. Dán code dưới vào trên(trước) thẻ mà bạn vừa tìm

<div id="kb-social"><!--http://www.khanh98.blogspot.com/2015/07/floating-bookmark-voi-hieu-ung-tooltip.html -->
<a href="https://facebook.com/USERNAME/" class="kb-social-facebook">
<i class="fa fa-facebook"></i>
<span>Follow via Facebook</span>
</a>


<a href="https://twitter.com/USERNAME/" class="kb-social-twitter">
<i class="fa fa-twitter"></i>
<span>Follow via Twitter</span>
</a>


<a href="https://plus.google.com/USERNAME/" class="kb-social-google-plus">
<i class="fa fa-google-plus"></i>
<span>Follow via G+</span>
</a>


<a href="https://pinterest.com/USERNAME/" class="kb-social-pinterest">
<i class="fa fa-pinterest"></i>
<span>Follow via Pinterest</span>
</a>


<a href="https://linkedin.com/USERNAME/" class="kb-social-linkedin">
<i class="fa fa-linkedin"></i>
<span>Follow via Linkedin</span>
</a>

</div>

Thay thế các đoạn màu cam thành một đoạn text thích hợp, nó chính là nội dung của tooltip
Thay thế USERNAME thành username trên các mạng xã hội của bạn

Nếu như trong template của bạn đã có cài font Awesome phiên bản 4.3.0 thì lưu lại và kiểm tra kết quả. Nếu chưa có font Awesome thì ta phải làm thêm bước nữa để cài nó.

#Thêm font Awesome

1. Tìm thẻ </head>

2. Dán thẻ dưới vào trên (trước) thẻ mà bạn vừa tìm

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

3. Lưu lại và kiểm tra kết quả thôi nào.

Nếu có thắc mắc nào về tiện ích này hoặc tiện ích này hoạt động không tốt trên blog của bạn thì hãy để lại một bình luận kèm URL blog của bạn để mình tiện giúp.