Benefits Of These Tool Tips
- Any link is easily understandable while on the post page.
- The user can verify that the link is not malicious.
- Fast,attractive and cluster free.
- Any body can install it easily any where on the web.
- Build with light weight language no compromise on your blog performance.
Simple Looking Tool Tip
You can see it in the demo it is the simple tool tip that can be used on any type of links if you want to add it on your blog follow the instructions.
- Go to Templates > > Edit HTML > > Just after the <head> paste the following scripts.
<script src="http://simplejquery.googlecode.com/files/jquery.js" type="text/javascript"></script>Now find ]]></b:skin> and just before it paste the following css code.
<script src="http://simplejquery.googlecode.com/files/jquery.js" type="text/javascript"></script>
body {
margin:0;
padding:40px;
background:#fff;
font:80% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}
h1{
font-size:180%;
font-weight:normal;
color:#555;
}
a{
text-decoration:none;
color:#f30; }
p{
clear:both;
margin:0;
padding:.5em 0;
}
pre{
display:block;
font:100% "Courier New", Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9; margin:.5em 0;
overflow:auto;
width:800px;
}
/* */
#tooltip{
position:absolute;
border:1px solid #333;
background:#f7f5d1;
padding:2px 5px;
color:#333;
display:none;
}
/* */
Now when ever you want to add this tool tip in your post you just have to add this code
<p><a href="http://Blogging-Heaven.com" class="tooltip" title="Best SEO Blog For Your Blog">Roll over here for tooltip</a></p>
Change the Red color with the link Blue color with the caption to be shown in the tool tip and Purple with the text to be shown to your visitor
Url Screen Shot Preview Tool Tip
This is a bit more attractive one toll tip which will surely the main attention of your readers because it shows an image while the mouse comes over it the image is set by you 250x160 suits best for it you have already seen it rocking in the demo so if you want to add this tool tip on your blog follow the instructions.
- Go to Templates > > Edit HTML > > Just after the <head> paste the following scripts.
<script src="http://tayyabrecentpostsd.googlecode.com/files/jquery.js" type="text/javascript"></script>
<script src="http://tayyabrecentpostsd.googlecode.com/files/main.js" type="text/javascript"></script>
Now find ]]></b:skin> and just before it paste the following css code.
body {
margin:0;
padding:40px;
background:#fff;
font:80% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}
h1{
font-size:180%;
font-weight:normal;
color:#555;
}
h2{
clear:both;
font-size:160%;
font-weight:normal;
color:#555;
margin:0;
padding:.5em 0;
}
a{
text-decoration:none;
color:#f30; }
p{
clear:both;
margin:0;
padding:.5em 0;
}
pre{
display:block;
font:100% "Courier New", Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9; margin:.5em 0;
overflow:auto;
width:800px;
}
img{border:none;}
ul,li{
margin:0;
padding:0;
}
li{
list-style:none;
float:left;
display:inline;
margin-right:10px;
}
/* */
#screenshot{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}
/* */
<p>In order to test screenshot preview roll over the <a href="http://Blogging-Heaven.com" class="screenshot" rel="http://i48.tinypic.com/1pjgyd.gif">Blogging-Heaven</a> link.</p>
Change the Red color with the link Blue color with the picture url 250x160 will be best for it to be shown in the tool tip and Purple with the text to be shown to your visitor.
Url Screen Shot Preview With Caption Tool Tip
It works same like the above url screen shot preview the only difference is that it shows a caption under the picture as seen in the post image all the css coding is same.If you want to add url screen shot preview with caption so add this code in your post any where you want.
<p>If you want to see screenshot with caption, roll over this <a href="http://Blogging-Heaven.com" class="screenshot" rel="http://i48.tinypic.com/1pjgyd.gif" title="The Best SEO BLog For you">Blogging-Heaven</a> link.</p>
Change the Red color with the link Blue color with the picture url 250x160 will be best for it to be shown in the tool tip.Change Pink color with the caption you want to show under the picture and Purple with the text to be shown to your visitor.
Author`s Desk > > >
I can surely say that this will enhance your posts beauty and blog beauty as well so if there is any kind of error or problem you face installing the widget so don`t hesitate to comment and question down here.I will be always there to help you till then stay blessed and happy blogging !
nice one
ReplyDeleteWidget Generators
sir i realy need to know how to use your blog title same recent post are scrolling on top can you guide me please...
ReplyDelete