How To Add A Css Bubble In Post Blogger 2015

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:

]]>

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 example of bubble.

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

Here is an example of bubble
I am the bubble!.

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

Enjoy Blogging!

SHARE

Milan Tomic

Hi. I’m Designer of Blog Magic. I’m CEO/Founder of ThemeXpose. I’m Creative Art Director, Web Designer, UI/UX Designer, Interaction Designer, Industrial Designer, Web Developer, Business Enthusiast, StartUp Enthusiast, Speaker, Writer and Photographer. Inspired to make things looks better.

• 
• 
• 
• 
•