LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » Blogspot / Blogspot POP UPs / Website / Website POP UPs » POP-OUT DIV From Bottom On-Mouse Hover Widget For Blog And Website

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

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

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:
Pros And Cons Of Having Single Page Website

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.

<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js’ type=’text/javascript’></script>
<script type=’text/javascript’>
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>
<div id=”on”>
<div id=”div_top” style=”left: 0%;”>
<div id=”div_top_container”>

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

</div>
</div>
</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.

You Like It, Please Share This Recipe With Your Friends Using...

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

  1. Anonymous says:

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

Leave a Reply

Your email address will not be published. Required fields are marked *