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

• Tùy chỉnh Giao diện Google Form để nhúng vào website của bạnHow To Customize Your Google Forms With Themes? Google Form là một công cụ tuyệt vời để bạn thu th
• Tiện ích "Điểm danh hàng ngày" với cookie siêu cute dành cho BloggerHow to create Rollup widget for your Blogger? Đây là một widget khá vui mắt, giúp độc giả có thể c
• Hiển thị chú thích khi rê chuột vào chữ cho Blogger/Blogspot (ver 2)Add CSS Tooltip In A Post For Blogger/Blogspot (ver 2) Như đã trình bày ở bài viết trước: Hiển thị
• Giới hạn số lượng bài viết hiển thị trong trang Labels và Archive trong BloggerLimiting the number of posts in Labels Page & Archive Page Khi xem bài viết trong trang label vả