How To Add CSS Bubbles in blogger

A simple way to animate your posts and render them more attractive is to add bubbles. You can use these bubbles to present short tips, give a definition or to add information.

These bubbles are invisible. They appear only when the reader passes his mouse over a word or a text for which you want to present additional information.

How To Add CSS Bubble In A Post ?

Here is an example of bubble. If you pass the mouse over the underlined text, the bubble appears.

Let's see how we can create bubbles using CSS in very simple way:

Step 1: Add Customized Styles For Bubbles In Blogger Template

In Blogger go to 'Template' and select 'edit html'. Then search the following line:

]]></b:skin>

and paste the CSS styles just before. You will need 3 styles:

A style (1) for the bubble itself. In the case of the small example above I used the following:

.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;
    }
A style (2) for the text that supports the bubble (the bubble will appear when the mouse is over it). In the example I just underlined the text:

.help-needed {
    position: relative;
    text-decoration:underline ;
    }

A style (3) for the bubble when the mouse is over the text (style that triggers the appearance of the bubble):

.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;
    }These styles may be customized to your needs. For instance, to change the size and the color of the bubble, you just have to edit the following property in the style of the bubble itself:  width; height; background-color;.

Step 2: Insert The Bubble Into Your Post:

Once your post is ready, switch to the HTML view. Search for the text that should trigger the appearance of the bubble when the mouse is over it and add the the corresponding style (2). In the example above I used the html span tag:

Here is an <span class="help-needed">example of bubble</span>.

Just before the span closing tag, add the bubble itself with its content and its style. I used another span tag in the example above:

Here is an <span class="help-needed">example of bubble
<span class="help-bubble100">I am the bubble!</span></span>.


CSS bubbles can be versatile and creative. Here is another example:

Enjoy Blogging!

Share on Google Plus

About Mr.Ikram

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.