Monday, 2 March 2015

Tagged under: ,

How to add CSS bubbles

CSS Bubbles
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.

Please note that the present post presents a way of coding 'CSS bubbles' for computer screens. It does not work on some android (tablets, smartphones) systems.




How to add CSS bubbles in a post ?

Here is an example of bubbleI am the 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:


And Say What
Enjoy Blogging!
You Have To Say!


Good blogging

28 comments:

  1. Basically, i like anything when it comes creative design to make my website more attractive. I like the idea of bubbles, surly i am going to try this.

    By: Ryan, From: pnr status online

    ReplyDelete
  2. thanks a lot!

    www.pisoandbeyond.com

    ReplyDelete
  3. great. thanks to the tips to add css buble, this work for me :-)

    ReplyDelete
  4. Nice and informative article.

    Click for more about Technology

    ReplyDelete
  5. very nice and useful info you give .this article is very helpful for new bloggers .thanks for this great Post click here for more info about technology

    ReplyDelete
  6. We are waiting for your new article, why you are not sharing? Is everything good...pnrstatusbuzz.in

    ReplyDelete
  7. Thanks for sharing. A wonderful tutorial.

    libguide

    ReplyDelete
  8. That's is very nice bubbles design in personal website pages or post with background level or any other place but is very good. I Will try, I hope It is perfect suit in my website Thanks for admin to share it.

    ReplyDelete
  9. Everything is fine, am happy about your blog. Thanks admin for sharing the unique content, you have done a great job I appreciate your effort and I hope you will get more positive comments from the web users.

    Regards,
    Aamala

    SEO Training in Chennai

    ReplyDelete
  10. Excellent post, some great resources. Styling your blog the right way is key. This information is impressive..I am inspired with your post writing style & how continuously you describe this topic. After reading your post,thanks for taking the time to discuss this, I feel happy about and I am eager to learn more about this topic.

    digital marketing training Chennai

    ReplyDelete
  11. That's Superb Article, Thanks for shared, I appreciate for you to share helpful knowledge, really I have learned something new it

    ReplyDelete
  12. That is very interesting; you are a very skilled blogger. I have shared your website in my social networks!


    SAP training in Chennai

    ReplyDelete
  13. css is a main part of web building , so you have a good explanation regarding it

    ReplyDelete
  14. Great and useful article. Creating content regularly is very tough. Your points are motivated me to move on.


    SEO Company in Chennai

    ReplyDelete
  15. Usually I do not read post on blogs, but I would like to say that this write-up very forced me to try and do it! Your writing style has been surprised me. Great work admin..Keep update more blog..

    Linux Training in Chennai Adyar

    ReplyDelete
  16. I have definitely picked up anything new from right here. I did however expertise a few technical points using this site, since I experienced to reload the web site a lot of times previous to I could get it to load correctly.

    App store optimization services in Chennai

    ReplyDelete

About ProBloggerTricks

Founded in 2013, Pro Blogger Tricks is the ultimate resource for bloggers and marketers. Looking for ways to make money online? Need blogging tips, SEO tips and other business and marketing related content? Probably, the best source of information about monetizing a blog ....Read More

Copyrights @ 2014, Pro Blogger Tricks - Designed By Templateism