How To Add jQuery Tooltip To Blogger
How To Add JQuery Tooltip To Blogger?
As I mentioned above the installation and usage of the tooltip is very easy,you just have to put some code in your template,just follow below simple steps.
1. Adding Tooltip Scripts
- Go to Blogger Dashboard > Template
- Download a copy of your template
- Click on Edit HTML
- Hit Proceed button
- Find for below code in your template
1
| </ head > |
add below code just above it,
1
2
| < script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></ script > < script type = "text/javascript" src = "http://code.helperblogger.com/jquery-tooltip.js" ></ script > |
Note - If you have already added a jQuery plugin to your blog then don't add the first line from above code.
2. Adding Tooltip Styles
Find below code in your template,
1
| ]]></ b:skin > |
add below code just above it,
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| .tip { width : 212px ; padding-top : 37px ; overflow : hidden ; display : none ; position : absolute ; z-index : 500 ; background : transparent url (https://lh 6 .googleusercontent.com/ -0 KM 2 ludeMBo/UALZZEBrqBI/AAAAAAAACmc/s-SnyEbuwR 8 /s 1600 /hb_tipTop.png) no-repeat top ; } .tipMid { background : transparent url (https://lh 4 .googleusercontent.com/-Vu 0 rxFVABjQ/UALZYWnIryI/AAAAAAAACmY/M 6 hXn 5 zozh 4 /s 1600 /hb_tipMid.png) repeat-y ; padding : 0 25px 20px 25px ; } .tipBtm { background : transparent url (https://lh 3 .googleusercontent.com/-fcuks 1 eGyhM/UALZXjVS 6 CI/AAAAAAAACmQ/GZF 8 z 7 d 7 S 4 c/s 1600 /hb_tipBtm.png) no-repeat bottom ; height : 32px ; } |
3. Using The Tooltip
If you want to add tooltip in blogger posts,then go to Edit HTML tab and add below code inside it.
1
| < div class = "tTip" title = "Add Tooltip Message Here" >Add Your Text Here</ div > |
- Replace
Add Tooltip Message Here
with the message which you want to appear in tooltip. - Replace
Add Your Text Here
with the text on which you want to appear tooltip.
That's it done...
Please, leave your comments below.
I'm glad it helped you.
ReplyDeleteTake your resorces from http://www.dharamart.in and learn more.
ReplyDeleteThank you