Subscription Box Using Tooltip For Blogger

Add This To Del.icio.us Tweet/ReTweet This Share on Facebook StumbleUpon This Add to Technorati Digg This

In my previous article about HTML Tooltip, I mentioned about "callingallgeeks.org". If you missed the article, then check out - Tooltip For Blogger Using jQuery & CSS. Harsh on his blog "callingallgeeks.org" used this effect to display the Tooltip over the share icons - RSS, Twitter, Facebook. You may experience the Tooltip effect on Yahoo! Cricket too - hover your mouse over the player names.

In this article, I'll just share the code which will create the Tooltip effect when you hover your mouse over the subscribe icons. If you need the code for the entire subscription box, well install the widget that appears on this article first - Tutorial to add the subscription box. Later, use the code that appears in this post to realize a proper subscription box. So, let's get started.

1. Navigate to "Design >> Edit HTML" and make a backup of your template by clicking on the "Download full template" link at the top of the page. Once the back up is over, search for the following piece of code.

]]></b:skin>

2. Paste the following piece of code just above the line mentioned in step 1.

#dhtmltooltip {
background-color: #484848;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiNSLYGWg2Nw0cg7D3BBsRtoCV8iEGljRumBojHVNQK-e3FWXOqjnBYt5GV1l4QPH9UUY0-GN3P6RT58M7zc8zZTkgH95laN_aVKpSmI5-W10EnZKefyiv6UfrhuO8LcTCS95yLKclvqs/s800/mouse-hover-bg.png");
background-repeat: repeat-x;
border: 1px solid #AAAAAA;
color: #F2F2F2;
font-size: 12px;
font-weight: bold;
height: 27px;
line-height: 20px;
padding: 10px 20px;
position: absolute;
text-align: center;
z-index: 100;
visibility:hidden;
}
#dhtmlpointer{
position: absolute;
z-index: 101;
visibility:hidden;
}
.social-subscribe ul {
list-style: none outside none;
}
.social-subscribe li {
float: left;
}
.social-subscribe li a.rss {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj0vWVXzJuAnXsCMXp8n8UNZEYtOwOadWULrhpn8h6HOoxSygXQ-7uaB9mo_jXjcFHlOFW_IglD5yPdwCDw3ya22TcNOdhl1Mal9MOxUTW71t_8GJJzsyhAF6SiZxk5gSedL91zipq8UI/s800/icon-rss.gif") no-repeat scroll 0 0 transparent;
padding: 0 2px 0 0;
}
.social-subscribe li a {
display: inline-block;
height: 52px;
width: 57px;
}
.social-subscribe li a.facebook {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBIjqWwXnogKwD_qfiRl5JCJE8ZJp_C36efm5ShMpGrGshguH860h-r2_-DObwDqXkxZMErSYcI0Ek_BAVlGgCocgEuMTKXpeBw2WcrMpm5MazqaH8mVeEUTm9uhQiMMpWXRCsOXOWBx8/s800/icon-facebook.gif") no-repeat scroll 0 0 transparent;
padding: 0 2px 0 0;
}
.social-subscribe li a {
display: inline-block;
height: 52px;
width: 57px;
}
.social-subscribe li a.twitter {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW-0nEvF1sd44hYNNxsZAD9838K4KcKzXChZR96fMn_jbHmLgRiUiubQQgJj5vdj-Sk5yom6tKfrSPDcfBL229eujUySUpRNdq91CWio8HrLottLoUMvtmGBIQkdUSANnUiDfmvNbjjG8/s800/icon-twitter.gif") no-repeat scroll 0 0 transparent;
padding: 0 2px 0 0;
}
.social-subscribe li a {
display: inline-block;
height: 52px;
width: 57px;
}

3. Save your template and navigate to "Design >> Page Elements >> Add a Gadget" and choose "HTML/Javascript".
4. Download the following text document - HTML FOR TOOLTIP EFFECT ON SUBSCRIBE ICONS. Just copy the code present in the text document and paste it on the window that pops up. Make the following customizations before you save the widget.

1. Replace FEEDNAME with the name of your feed obtained from FeedBuner. Your feed name is nothing but your feed title. So, open your FeedBurner account and check out the Feed details. There are two instances where you need to replace FEEDNAME with your feed name.
2. Replace TWITTER-USERNAME with your twitter user name. There are two instances where you need to replace the same.
3. Replace FAN-PAGE-URL with your facebook fan page URL. Similar to the previous two customizations, this replacement should also be made at two instances.

5. Once the above customizations are made, just save the widget and your done!

In case you find the customization part a bit difficult to understand, then take a look at the example coding which I used on my demo blog by downloading this text document -SAMPLE CODE. This effect was tested on all major browsers - Firefox, IE, Safari, Chrome, Opera. If you have some unique ideas to illustrate this same effect in a different manner, then share it via comments! Would love to hear from the CSS and Jquery geeks out there!