How to add CSS bubble in a blogger post ~ Khatris Creation

Image result for How to add CSS bubble in a blogger post

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.

now how to add CSS bubble in a blogger post......Follow the steps..

Step 1: Add customized styles for bubbles in blogger template.

go to blogger dashboard>template>edit>template>and search for the code

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

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 example of bubble
I am the bubble!.

now the visitors can see the versatile and creative in your blog..

if you have any problem just leave a comment below....

happy blogging..

About sudarshan khatri

Welcome To khatriscreation And Let Me First Introduce Myself. I’m Sudarshan khatri From Nepal And I Manage khatriscreation. I’m Not A Professional Blogger By Education I’m Self Trained Guy And I Am 13 Years Old. Well Talking About Me I’m A Normal Guy Who Lives The Life Fullest, Loves Searching New Things On Internet.I love to share my expenience and education to the peoples so i have managed this blog .khatriscreation is totally about blogging,seo,widgets and blogging tips.