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 .

how to create stylish blockquotes in your blogger blog or wordpress blog

It is always best to showcase your important points in the blog post within blockquotes.The blogger templates donot give such a stylish stylesheet to have an impressive blockquote.But dont worry it will just take you 10 seconds to do the process of forming a stylish impressive blockquote in the blog template .

After you make the changes in the blogger template this is what will happen everytime you use a blockquote :

This is an example of a blockquote.Stylish isnt it ? so bookmark this blog :)

Here is the procedure to add stylish blockquotes to the blogger template :

 

 
blockquote { font: 1.2em/1.6em Georgia, "Times New Roman", Times, serif;
width: 340px;
background: url('http://i251.photobucket.com/albums/gg285/itcoll/close-quote.gif') no-repeat right bottom;
text-indent: -18px; }
 
blockquote:first-letter { background: url('http://i251.photobucket.com/albums/gg285/itcoll/open-quote.gif') no-repeat; padding-left: 18px;
font: italic 1.4em Georgia, "Times New Roman", Times, serif;
}
 

 

Just add the above lines under this line in your blogger template :

‘ <style type=’text/css' > ’

To find this line you may go to the blogger "edit html" page and then press 'ctrl+f' and search for the following string :"style" .

After knowing its location just add those lines [ indicated yellowish ] under that location in your template .

here is the screenshot showing you what i mean :

sshot-1

 

NOTE : please backup your blog before doing any changes to the blogger template

see you soon guys :)

Thursday, December 11, 2008

Top firefox add-ons for SEO and bloggers to check page rank and keyword density

SEO is not only about learning things in forums like digitalpoint but it also requires you to closely watch your competitors.Learn whether they do keyword density or not , find where they have their precious backlinks.All these can be done with the help of google.But these two add-ons make it easier for you to check page rank of a site,sitemaps,robots.txt,backlinks and keyword density.

I mostly use the add-on to check keyword density and backlinks.

here are the add-ons :

searchstatus

This add-on is one of the most popular add-on.It gives you a complete report on backlinks,keyword density,indexed pages and lot more.

download search status

Live PR

This add-on is just for knowing the page rank.If you dont want to watch the backlinks ,keywords and want to just have an eye on PR ,this is for you.

download live PR

Monday, December 8, 2008

cool emotion – windows live writer plugin for posting emotions in your blog posts

Cool Emotion is a windows live writer plug-in for posting your blog posts along with some stunning emotions .

There are lots of varieties of emotions .Let me just list out some of them :

Iam especially amazed by the gif images [ posted just above this line ].really cool arent they ?

DOWNLOAD THE COOL EMOTIONS PLUGIN HERE :

http://gallery.live.com/liveItemDetail.aspx?li=652216eb-14eb-4e9e-92da-1d7d9c178a42&bt=9&pl=8

Google Adwords guide to bloggers for traffic enhancement to blogs

Iam not a personal user of Google Adwords but have heard a lot about it.Iam especially stunned by the geo-targeted advertisements.Most of the time the ads are perfectly contextual.So for all those people who want to learn about adwords before trying them out , here is a slideshow explaining what is adwords , steps to register in adwords ,what is a campaign and how you can effectively manage your adwords campaigns.you can read it here :

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