Login To Blogger Go To > Design > Edit HTML.
and mark the tick box "Expand Widget Templates"
Then, find (CTRL+F) this code in the template.
</head>
And immediately before it, paste this code:<style type='text/css'>
a.tooltip{
position:relative;
text-decoration: none;
}
a.tooltip span{
display: none;
}
a.tooltip:hover span{
display:block;
position:absolute;
top:20px; left:20px;
padding: 5px;
width:200px;
border:1px solid #fff;
background-color:#000000;
filter:alpha(opacity=60);
opacity:0.6;
color:#fff;
}
</style>
Now when your add a link add it as below.a.tooltip{
position:relative;
text-decoration: none;
}
a.tooltip span{
display: none;
}
a.tooltip:hover span{
display:block;
position:absolute;
top:20px; left:20px;
padding: 5px;
width:200px;
border:1px solid #fff;
background-color:#000000;
filter:alpha(opacity=60);
opacity:0.6;
color:#fff;
}
</style>
<a href="YOUR-LINK" class="tooltip">LINK-TEXT<span>YOUR-TOOL-TIP-TEXT</span></a>
Look at the example below.<a href="http://www.royaltutor.net/" class="tooltip">Blogger Tips<span>Latest Blogger Tips,Tricks</span></a>
It will look like this:That's It.
0 comments so far:
Post a Comment