Saturday, December 13, 2008

How to create stylish tooltips in the blogger blog

What are Tooltips ?

Tooltips are the contents you see in a small box when you roll over a hyper link .for example :

ROLLOVER TO SEE TOOLTIPS

But it is not a stylish one.Lets add some impressive styles to the tooltips .After you finish implementing this tutorial here is what you will see :

Roll over for tooltip

If you dont the font colour to be green within the tooltip dont worry its fully customizable within seconds .Before i continue with this tutorial i want to thank Alen Grakalic (http://cssglobe.com) for the script used for the tool tip.Thanks Alen.

Creating Tooltips in blogger :

STEP 1 :

go to blogger –> edit html

add the below 2 lines in the html  [ below the <head> tag ] :

<script src='http://h1.ripway.com/itcoll/blogger%20tooltips/jquery.js'/>
<script src='http://h1.ripway.com/itcoll/blogger%20tooltips/main.js'/>

screenshot  :

sshot-1

 

Step 2:

add the below lines now in the  html code :

#tooltip{
    position:absolute;
    border:3px solid #333;
    background:#f7f5d1;
    padding:2px 5px; 
    display:none;
    font-style:italic;
    font-size:large ;
    color:green; }

screenshot :

sshot-2

 

you have to add it below the <style> tag as shown in the screenshot .

STEP3  - final step :

Whenever you want to add a tooltip in your blog post , you just have to add two things in the html page.It will just take 20 seconds – very effective in giving your readers valuable information .So dont be lazy in implementing this guys.

so lets say i want to tell my readers the definition of “blog” with in my blog post.So instead of directing them to a wikipedia article and making them crazy , i will let them know what it is , in simple sentences without loading any other foreign site .here is how you should do it :

<a href=”#” class=”tooltip” title=”blogging is blah blah blah …”>WHAT IS A BLOG ? </a>

ADD THE ABOVE CODE IN THE BLOG POST WHENEVER YOU NEED TOOLTIPS .just remember the these things :

1.class=”tooltip”

2.title=”     /*  JUST TYPE ANYTHING WHATEVER YOU WANT TO SHOW YOUR READER WITHIN THE TOOL TIP*/     ”

3.remember to change the anchor text – (i.e) change “what is a blog ?”  in the code to whatever you want as a link .

CUSTOMIZING THE TOOLTIPS :

#tooltip{
    position:absolute;
    border:3px solid #333;
    background:#f7f5d1;
    padding:2px 5px; 
    display:none;
    font-style:italic;
    font-size:large ;
    color:green; }

you can  change the font-size ,font style to your desire by changing the code above.If you want the font colour to be yellow instead of green  , just change tis line in the above code :

CHANGE :          color:green;     

                                 TO

                         color:yellow;

hope the tutorial was nicely explained.Pls give me your comments and tell me if you had any trouble implementing it .

It is also possible to show images and snapshots of  a URL in the  tooltip boxes.I will cover those topics soon .Take care pals .

1 comments:

Seodocuments said...

I learned many things about blogging especially stylish tooltips, its useful for me.

Thank u

 
Copyright 2009 Make Money Blogging Online. Powered by Blogger Blogger Templates designed by Deluxe Templates