How To Add jQuery Tool widget To Blogger blogs

Tooltips can be a helpful way to provide information to visitors without creating clutter in a design. If you would like to add an attractive tooltip to your website it doesn’t have to be difficult. There are plenty of quality scripts available for use that will allow you to set up tooltips without coding it from scratch.In this tutorial I will we will see how to Add a jQuery Tool Tip To Blogger very easily.I am dividing this post into three parts.

1. Adding The CSS

.

2. Adding The jQuery Scripts.

 

3. Showing The Tool Tip In Blogger Posts.

STEP: 1

1. Go to Blogger Dashboard > Design > Edit HTML.

2. Backup/Download Your Template.

3. Find "]]></b:skin>" by pressing "CTRL+F" and paste below code just before it.

CSS CODE:

.tooltip { position: relative; display: inline-block; cursor: help; white-space: nowrap; border-bottom: 1px dotted #777; } .tooltip-content { opacity: 0; visibility: hidden; font: 12px Arial, Helvetica; text-align: center; border-color: #aaa #555 #555 #aaa; border-style: solid; border-width: 1px; width: 150px; padding: 15px; position: absolute; bottom: 40px; left: 50%; margin-left: -76px; background-color: #fff; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,.1)), to(rgba(255,255,255,0))); background-image: -webkit-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0)); background-image: -moz-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0)); background-image: -ms-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0)); background-image: -o-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0)); background-image: linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0)); -moz-box-shadow: 1px 1px 0 #555, 2px 2px 0 #555, 3px 3px 1px rgba(0, 0, 0, .3), 0 1px 0 rgba(255,255,255, .5) inset; -webkit-box-shadow: 1px 1px 0 #555, 2px 2px 0 #555, 3px 3px 1px rgba(0, 0, 0, .3), 0 1px 0 rgba(255,255,255, .5) inset; box-shadow: 1px 1px 0 #555, 2px 2px 0 #555, 3px 3px 1px rgba(0, 0, 0, .3), 0 1px 0 rgba(255,255,255, .5) inset; -webkit-transition: bottom .2s ease, opacity .2s ease; -moz-transition: bottom .2s ease, opacity .2s ease; -ms-transition: bottom .2s ease, opacity .2s ease; -o-transition: bottom .2s ease, opacity .2s ease; transition: bottom .2s ease, opacity .2s ease; } .tooltip-content:after, .tooltip-content:before { border-right: 16px solid transparent; border-top: 15px solid #fff; bottom: -15px; content: ""; position: absolute; left: 50%; margin-left: -10px; } .tooltip-content:before { border-right-width: 25px; border-top-color: #555; border-top-width: 15px; bottom: -15px; } .tooltip:hover .tooltip-content{ opacity: 1; visibility: visible; bottom: 30px; }

STEP: 2

Now find </head> tag and paste below code just above </head> tag.

jQuery Script:

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script><script src="http://btsnts.googlecode.com/files/helper-blogger-tooltip01.js" type="text/javascript"></script>

 (Note - If you have already added the jQuery plugin to your blog then remove the code in red line above.)

STEP: 3

If you want to use tool tip in blogger posts or any where on your blog then use below code.

HTML/JavaScript Code.

Goto layout > Add a Gadget > HTML/JavaScript

CODE:

<b data-tooltip="Words Which You Want To Show In Tool Tip">Original Word</b>