NOTICE

Adfly Links not working Find Direct Links HERE

How to Auto Show Image/Thumbnail Tooltip PopUp on Hovering a Link Using jQuery in Blogger Blogs.

A little ago i was desperately finding any service which can give a view to image whenever we hover over a link or image of our choice.Then i landed snapshot site which gives that service .BUT.. the drawback of that service was that it shows the thumbnail to each and every link which are also not required.After getting annoyed that one i found web .. oops i don't remember name he he.. the draw back of that site was that it keeps you in a QUE :( that it will show your image in a second after a minute i found the same folks all in vane.Then i found this method just have a look in DEMO it will definitely solve what we want is a Thumbnail of our choice in a second on any place where we want it to be.



Installation:




Please Download Scripts And Upload in Your Own Server Then use Direct Links to files In Below Code.
Where To Upload These Scripts ?Click Here To Know :)






Java script

Step 1 : Login your BLOGGER account And click on Layout in the sub menu click EDIT HTML

Step 2: Now find ]]></b:skin>


Paste the below code Below ]]></b:skin> code

<script src='http://files-teckzest.bravehost.com/jquery.js' type='text/javascript'/><script src='http://files-teckzest.bravehost.com/main.js' type='text/javascript'/>

Step 3:

CSS

Now comes the CSS part

Find ]]></b:skin>

Paste below code ABOVE ]]></b:skin>

#screenshot{    position:absolute;    border:1px solid #ccc;    background:#333;    padding:5px;    display:none;    color:#fff;    }

Step 4:

HTML

This HTML part will be used where you want to show Thumbnails / Images .Just use Below Format of code where you want to shoe Image on link hover


<p>Blah Blah <a href="http://bloggerplugnplay.blogspot.com/" class="screenshot" rel="http://www.hotlinkfiles.com/files/2400338_nfmeu/57screen-cut.png" title="Blogger Plug n Play - Just Plug up your desires.....">Plug it</a> link.</p>


If you like the post please comment below : )

Credits : Author: Css Globe Distributed for Blogger Blogger Plug n Play

7 comments :

  1. Hy!
    I want only to say THANKS!
    You have a very helpful site!
    Do the good job also in the future!

    ReplyDelete
  2. Thanks VasiaUVI for your feedback and welcome to my site.I always try to provide quality and useful content :)

    ReplyDelete
  3. @ Shrinath and j-t-r Welcome my blog.I am pleased that this post is helpful.Subscribe Blogger Plug n Play to stay updated :)

    ReplyDelete
  4. Maximum bandwidth has been exceeded and this page has been temporarily disabled. Please go to your service manager to purchase more and reactivate.

    to ips.jolly: Everything seemed to be fine until today :-). Do you have any experience dealing with this problem?

    ReplyDelete
  5. Here is a solution:

    Just change urls from step 2 for these ones:

    http://www.yourjavascript.com/1923170611/jquery.js
    http://www.yourjavascript.com/1096151131/main.js

    ReplyDelete

Feel free to leave comment if you like above widget, have any questions or just say Hi! :)