POP-OUT DIV From Bottom On-Mouse Hover Widget For Blog And Website

This Article Was Live On June 29th, 2012 And So Far Have: 2 Comments...
Last Updated on June 21st, 2014

On-Demand of our friends, we are here with a new code, Some of your friend want this code so that they can show there important data on every page but due to lack of space, they can’t do anything. Now it is solved so they can show there data to there wanted visitor if he wants it.They can add anything in this DIV like HTML-CSS-JavaScript-PHP-JQuery-Text-Pic-Vdo-Widget Or Anything they want to show there visitor.You can also add your Contact Form here so that visitor will have no problem to contact you.
It will pop-out on mouse hover over tha small image in the right bottom of every page/post. When visitor roll there cursor over there a hidden DIV will slide out toward to and show there data. and mouse out, it will be closed/hide again.

Features:
1.) It Will Slide From Bottom To Top.
2.) POP-OUT On-Mouse Hover Not Click.
3.) You Can Add Anything In It.
4.) Simple, Stylish And Full Customizable.

5.) Easy To Install And Quick To Load.

6.) Best Used For Contact Form etc…

How To Add In Blogspot?
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To Layout.
4.) Click “Add A Gadget” Where You Want To Add It.
5.) Now Scroll To “HTML-JAVASCRIPT”
6.) Click “+” Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty.
9.) Click Save, Now You Are Done.

Recommended For You:

How To Add Grid Style V1 Blogger Posts In Blogspot?

How To Add In Website?
1.) Just Go To Your HTML File.
2.) Now Copy The Below Code And Paste It Between <body> </body>.
3.) Save It, Now You Are Done.

jQuery(document).ready (

function(){jQuery(“#div_top”).hover(function(){ jQuery(this).stop(true,false).animate({bottom: 0}, 400); },

function(){ jQuery(“#div_top”).stop(true,false).animate({bottom: -405}, 400); });

});

</script>

<style>

img, a { border: 0; }

#on {visibility:visible;}

#off {visibility:hidden;}

#div_top_container {width:100%;height: 400px;overflow: hidden;}

#div_top {z-index: 10005;border:2px solid #3c95d9;background-color: #fff;width:99.7%;height: 400px;position: fixed;bottom: -405px;}

#div_top img {position: absolute;right: 0%;top: -35px;}

</style>

<img src=”Image.png” />
+++Your Text Here+++

</div>

Customization:
1.) Change Blue URL With Your Image That Will Appear At Right Bottom Of The Page Where It Will POP-OUT.
2.) Change Red Text With Anything You Want To Show In This DIV.
3.) For More Customization, Feel Free To Contact Us.

2 Responses to “POP-OUT DIV From Bottom On-Mouse Hover Widget For Blog And Website”

Anonymous says:

February 26, 2013 at 6:49 PM

This is awesome but is there a way to make it work in IE 9

- EXEIdeas says:
  
  February 27, 2013 at 9:52 AM
  
  It’s Working In IE+6 And All Other Browser, So It Will Also Work In IE-9 Also…