Làm thế nào để thêm CSS Bubbles cho blogspot, Web

Một cách đơn giản để làm sinh động bài viết của mình và làm cho chúng hấp dẫn hơn là thêm hiệu ứng "bong bóng - Bubbles". Bạn có thể sử dụng các bong bóng để trình bày lời khuyên ngắn, đưa ra một định nghĩa hoặc để thêm thông tin về một vấn đề nào đó mà bạn muốn chọn làm điểm nhấn.

Các bong bóng là trong vô hình. Chúng chỉ xuất hiện khi người đọc rê chuột của mình qua một từ hoặc một văn bản mà bạn muốn trình bày thêm thông tin. Nói về lý thuyết thì có vẻ sẽ làm cho bạn khó hiểu được. Và bạn sẽ dễ hiểu hơn về CSS Bubbles với những demo và hướng dẫn mà ITViet360 sẽ trình bày dưới đây.

Demo: Đây là một bài viết SEO PHONG VŨ
SEO và nhiều hơn thế nữa!.

Làm thế nào để thêm CSS Bubbles vào một bài viết?

Hướng dẫn dưới đây được thực hiện trên Blogspot, những mã nguồn Website khác các bạn làm tương tự
Bước 1: Thêm CSS
- Vào bảng điều khiển Blogger -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)
- Tìm tới ]]></b:skin> và dán code dưới đây ngay trên nó
.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;
    }
Bước 2: Thêm  Bubbles vào một bài viết
Sau khi bài viết của bạn đã sẵn sàng, chuyển sang chế độ viết HTML. Tìm kiếm các văn bản cần kích hoạt sự xuất hiện của các bong bóng khi chuột qua và thêm phong cách tương ứng (2). Trong ví dụ trên, sử dụng các thẻ span html:
<span class="help-needed">SEO PHONG VŨ
<span class="help-bubble100">SEO và nhiều hơn thế nữa!</span></span> Chuyên mục: Thu thuat, Thu thuat blogspot, thu-thuat, thu-thuat-blogger