Hiển thị chú thích khi rê chuột vào chữ cho Blogger/Blogspot

Add CSS Tooltip In A Post For Blogger/Blogspot

Đôi khi chúng ta cần chèn chú thích cho 1 vài từ khóa trong bài viết mà không muốn làm phá vỡ nội dung bài. Thủ thuật sau đây sẽ giúp bạn làm điều đó. Nó cũng là 1 cách giúp cho bài viết của chúng ta trở nên sinh động và hấp dẫn hơn.

Hiển thị chú thích khi rê chuột vào chữ cho Blogger/Blogspot

Bước 1: Thêm CSS vào blog của bạn

Vào tab Mẫu >> Chỉnh sửa HTML tìm thẻ ]]></b:skin> và chèn trước nó đoạn code sau

 /* Tooltip In A Post edited by Iris-Tips.blogspot.com */
.help-bubble100 {
    width: 100px;
    height: 18px;
    top: -100px;
    left: -120px;
    padding: 3px 3px 3px 3px;
    color: #fff ;
    background-color: #228B22 ;
    font-size: 10px;
    font-family: verdana ; 
    border: 1px solid #228B22 ;
    overflow: hidden;
    display: block; 
    position: absolute; /* important */    
    visibility: hidden;      
    opacity: 0; 
    transition: 0.3s ease-out;
    -webkit-transition: 0.3s ease-out;
    }
.help-needed {
    position: relative;
    text-decoration:underline ;
    }
.help-needed:hover .help-bubble100 {
    visibility: visible;
    opacity: 1; 
    top: 0px;        
    z-index: 50;        
    transition: 0.8s ease-out;
    -webkit-transition: 0.8s ease-out;
    }
/* Tooltip In A Post edited by Iris-Tips.blogspot.com */ 

Bước 2: Thêm chú tích vào bài viết của bạn

Khi viết bài bạn cần làm theo cú pháp sau:

 <span class="help-needed">Từ cần chú thích<span class="help-bubble100">Nội dung chú thích</span></span> 

• DEMO

Đây là 1 ví dụ về từ cần chú thích Nội dung chú thích.

Created by probloggertricks/Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm