Add Google Plus Add To Circle Widget With Jquery Hover effect

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


Statick popout twitter followers box with hover effect


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


In this post I will show the way to add  Google Plus Add To Circle Widget With Jquery Hover effect .Hover effects are cool and it will add extra beauty to your blog.You can get readers attention easily.Let's see how to add.




First log in to your blogger account and go to design>>edit html
Now press ctrl+f and search for </head> tag.
Then 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;}
#addtcircle_div {width:196px;height: 353px;overflow: hidden;}
/* right side style */
#addtcircle_right {z-index: 10005;border:2px solid #3c95d9;background-color: #fff;width:196px;height: 353px;position: fixed;right: -200px;}
#addtcircle_right img {position: absolute;top: -2px;left: -35px;}
#addtcircle_right iframe {border:0px solid #3c95d9;overflow: hidden;position: static;height: 360px;left:-2px;top:-3px;}
/* left side style */
#addtcircle_left{z-index: 10005;border:2px solid #3c95d9;background-color: #fff;width:196px;height: 353px;position: fixed;left: -200px;}
#addtcircle_left img {position: absolute;top: -2px;right: -35px;}
#addtcircle_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;#addtcircle_right&quot;).hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery(&quot;#addtcircle_right&quot;).stop(true,false).animate({right: -200}, 500); });        });
</script>

Now save your template.


Then go back to design
Click on add a gadget.scroll down and select html/javascript
Paste below code on it.

<div id="on">
    <div id="addtcircle_right" style="top: 18%;">
        <div id="addtcircle_div">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb0kIAdWcHnij0Iwd0YHMYNGPrSWNJ0oLinY7WLTdiI5YEVgUhHcE4p9T6i4sbcotEpr3gFTIN5EUQZmjjTm305mH_Qmwh_O-4kDMv4_bIrbhMKeX3SkoGzTik3jqzs7yVxqW3j7NjFnI/s1600/add+to+circle+widget.png" 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>


            <script type="text/javascript">mbgc='f5f5f5';ww='200';mbc='cecece';bbc='3F79D5';bmobc='3b71c6';bbgc='4889F0';bmoc='3F79D5';bfc='FFFFFF';bmofc='ffffff';tlc='cecece';tc='6a6a6a';nc='6a6a6a';bc='6a6a6a';l='y';fs='16';fsb='13';bw='100';ff='4';lu='6a6a6a';pc='4889F0';wh='340';b='s'; pid='115054700230747411396';</script><script type="text/javascript" src="http://widgetsplus.com/google_plus_widget.js"></script>

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

Replace the red colour id number with your google plus id

Now save it.It is finish now.Is it good???


You can easily customize alignment by changing the value of blue letter number


In my next posts I will show the way to add anything you want with hover effect be with us lot more to come


 if you got something Don't forget to leave a comment

Posted in: Blogging