Preview And Demo
Below you can see a screenshot of a link with the tool tip message
To see the live working example of the text and image links follow this link - Demo of tool tip
How To Add Tool Tip Bubbles To Your Links
Step 1. In your dashboard click 'Layout' > 'Edit Html'
Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - More Info)
</head>
Step 3. Paste the following code Directly Above / Before </head>
<style type='text/css'>
a.tt{
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}
a.tt span{ display: none; }
/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #993300;
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ12mkXlUTAiHVDNg56ogSxUCLGQ5KwCMrImySdW0A_nZ6qewv7yoNJFeSRZ6-7KJOlijckb-Dg6LRjtL0R6W1NwPwt8LytVo2pdykAxAy22RyVCBUYz_K00dRmoe1mHoWEnQPkh0CVwSc/) no-repeat top;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
display: block;
padding: 0 8px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhajINbFDRS9y0Zw6dhNBzb8jx6Y_bkhxQPZBov_wR-0MisLePJIlb1M4-I9HAE0n3oJrq5jEG32a8qngoY4rInVG_eufpHu851s3my6rtHy93XBp9wFZ6g055IAeJJhIIMTJMg06qLvURj/) repeat bottom;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ12mkXlUTAiHVDNg56ogSxUCLGQ5KwCMrImySdW0A_nZ6qewv7yoNJFeSRZ6-7KJOlijckb-Dg6LRjtL0R6W1NwPwt8LytVo2pdykAxAy22RyVCBUYz_K00dRmoe1mHoWEnQPkh0CVwSc/) no-repeat bottom;
}
</style><a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS2kQvSkN_wlQFDpbPuYf9e7bm-53xJwZV5kRKRUoPOrpK6WSxZ7fZvTIKL9nx2y28a3damYJq21nbQ22FQTbRKcYthPEJLuBNmZHwsytsOU-drKmOGPy1mz057BP2ot35sTQjBxt-7-HX/s1600/best+blogger+tips.png'/></a>
Step 4. You now have the code added to your template to display the tool tips the next step is to add code to your links.
When you create a text link use this code :
<a href="URL HERE" class="tt">TITLE OF LINK HERE<span class="tooltip"><span class="top"></span><span class="middle">TOOL TIP MESSAGE HERE</span><span class="bottom"></span></span></a>
Example :
<a href="http://www.spiceupyourblog.com" class="tt">Spice Up Your Blog<span class="tooltip"><span class="top"></span><span class="middle">Go To Spice Up Your Blog</span><span class="bottom"></span></span></a>
When You Create An Image Link Use This Code :
<a href="URL HERE" target="_blank" class="tt"><img src="IMAGE URL HERE" /><span class="tooltip"><span class="top"></span><span class="middle">TOOL TIP MESSAGE HERE</span><span class="bottom"></span></span></a>
Example :
<a href="http://www.spiceupyourblog.com/" target="_blank" class="tt"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPgqkX1gB4tOuXW5OXIvT3W7q_uD3H_U-0OLKEMnyzAsusUUyGonzvn3DgNWBiG5qU5x92KXvUa6tHxqt9oVWfsjndDlEeejxtjQPKqXBDxwmZHLTmnXJEQbV5uiTfDu6F_f_9RbpY41E1/s320/blogger+black.png" /><span class="tooltip"><span class="top"></span><span class="middle">Go To Spice Up Your Blog</span><span class="bottom"></span></span></a>
Note - The code for the links is a little harder to use than regular hyperlinks so take you time and im sure you will get the hang of it !
Remember you can use the tool tip for any images on your blog not just in the posts, for example in the sidebars and footer.
Feedback
Will you use tool tip bubbles on your blog ?
0 comments:
Post a Comment