Add Anything You want With Jquery Hover Effect for your blog

In my previous posts I have shown the way to add facebook like box,twitter followers box and google plus add to circle widget with jquery hover effect.If you not seen them read it here.

Add Google Plus Add To Circle Widget With Jquery Hover effect
Statick popout twitter followers box with hover effect

Static popout facebook fanpage like box with hover effect for your blog

In this post I'm going to show the way to add anything you want with jquery hover effect.


First Log in to your blogger account and go to design>>edit html
Press ctrl + f and search for </head> tag.
Now copy and paste below code before </head> tag.

<style> /* dude, this plugin by freddie@kakinetwork.com */ img, a { border: 0; } #on {visibility:visible;} #off {visibility:hidden;} #anywidget_div {width:196px;height: 353px;overflow: hidden;} /* right side style */ #anywidget_right {z-index: 10005;border:2px solid #3c95d9;background-color: #fff;width:196px;height: 353px;position: fixed;right: -200px;} #anywidget_right img {position: absolute;top: -2px;left: -35px;} #anywidget_right iframe {border:0px solid #3c95d9;overflow: hidden;position: static;height: 360px;left:-2px;top:-3px;} /* left side style */ #anywidget_left{z-index: 10005;border:2px solid #3c95d9;background-color: #fff;width:196px;height: 353px;position: fixed;left: -200px;} #anywidget_left img {position: absolute;top: -2px;right: -35px;} #anywidget_left iframe {border:0px solid #3c95d9;overflow: hidden;position: static;height: 360px;right:-2px;top:-3px;} .box-title1 { border:1px solid #ddd; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; box-shadow: 5px 5px 5px #CCCCCC; padding:10px; margin: 10px 0; } .enteryouremail{ background: #fff !important; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 165px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; margin:0px; } .submitbutton{ background:#F66303; border: 1px solid #F66303; text-shadow: 1px 1px 1px #333; box-shadow: 3px 3px 3px #666; font:bold 12px Arial, sans-serif; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; cursor:pointer;}</style> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/> <script src='http://apis.google.com/js/plusone.js' type='text/javascript'/> <script type='text/javascript'> jQuery(document).ready(function(){ jQuery(&quot;#anywidget_right&quot;).hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery(&quot;#anywidget_right&quot;).stop(true,false).animate({right: -200}, 500); }); }); </script>

Then save your template.
Now go back to design  and click on add a gadget
Now scroll down and select html/javascript
Paste the below code on it.

<div id="on">
    <div id="anywidget_right" style="top: 18%;">
        <div id="anywidget_div">
            <img src="Image you want to show on side" alt="" />

<p style=" line-height:0px; font-size:10px; font-weight:bold; text-align:center;"><a style="color:#848484;" href="http://www.tech-cave.com/2012/01/add-google-plus-add-to-circle-widget.html">Get This</a></p>


Widget code you want to add with hover effect


        </div>
    </div>
</div>

Replace red ones with image url and widget codes.

You can easily change the alignment by changing the blue letter number

You can easily change the values of width and hight as you want.

Now save it.It is finish.If you want add more than one widget with hover effect you have to change id.

Is it good???

If you got something don't forget to leave a comment

Posted in: Blogging