Get Free Html

Monday 29 April 2013

SLIDING EGG SOCIAL SHARING WIDGET MOUSE HOVER EFFECT

copy following code and paste it above </head> tag

copy following code and paste it above </body> tag

<div style='position: fixed; bottom: 2%; left: 2%;'><div class='shareEgg' id='shareThisShareEgg'/></div><script type='text/javascript'>stlib.shareEgg.createEgg('shareThisShareEgg', ['facebook','twitter','googleplus','linkedin','blogger','stumbleupon','sharethis'],{title:'<data:blog.pageTitle/>',url:'<data:blog.url/>',theme:'shareegg'});</script>

Automatic Featured Post

Click here to download the codes for free

Saturday 27 April 2013

Free Navigation Menu set 1

<style type="text/css">

.exespotlightmenu{

width: 100%;

overflow:hidden;

}

.exespotlightmenu ul{

margin: 0;

padding: 0;

font: bold 14px Verdana; /* font style and size */

list-style-type: none;

text-align: center; /* "left", "center", or "right" align menu */

}

.exespotlightmenu li{

display: inline-block;

position:relative;

padding: 5px;

margin: 0;

margin-right: 5px; /* right margin between menu items */

}

.exespotlightmenu li a{

display:inline-block;

padding: 5px;

min-width:50px; /* horizontal diameter of spotlight */

height:50px; /* vertical diameter of spotlight */

text-decoration: none;

color: black;

margin: 0 auto;

overflow:hidden;

-moz-transition: all 0.5s ease-in-out; /* CSS3 transition to animate all A properties */

-webkit-transition: all 0.3s ease-in-out;

-o-transition: all 0.3s ease-in-out;

-moz-transition: all 0.3s ease-in-out;

-ms-transition: all 0.3s ease-in-out;

transition: all 0.3s ease-in-out;

}

.exespotlightmenu li:hover a{

color: white;

background: #a71b15; /* background color of spotlight */

-webkit-border-radius: 50%; /* large radius to create circular borders */

-moz-border-radius: 50%;

border-radius: 50%;

}

.exespotlightmenu li a exespan{

position:relative;

top:35%; /* move text down so it appears centered within menu item */

}

</style>

<div class="exespotlightmenu">

<ul>

<li><a href="##########"><exespan>Home</exespan></a></li>

<li><a href="##########"><exespan>About</exespan></a></li>

<li><a href="##########"><exespan>Portfolio</exespan></a></li>

<li><a href="##########"><exespan>Privacy</exespan></a></li>

<li><a href="##########"><exespan>Contact Us</exespan></a></li>

</ul>

</div>