Sliding Google+ Followers Box For Blogger

In the past we have posted about how to add Sliding twitter Followers Box For Blogger. Today i'm going to give you a attractive sliding Google+ followers box for Blogger/Blogspot. Ya one of lust of bloggers is to increase their social followers. So for them I lend this widget.

Google is already offered a Google+ followers box for your blog/website, but i think it's need a large space for it, so by adding this sliding widget we don't need waste space of your sidebar. Sliding Google+ followers box will float on your blog/website. and when the mouse over, it will animate by sliding to left.

Watch the live demo at right side of this Page >>>>>>>>>

How To Add Sliding Google+ Followers Box To Blogger

1. Go to Blogger > Layout > Add Gadget > HTML/JavaScript.
2. Paste the following code in it. Change https://plus.google.com/114636838169087641091 with your Google+ url.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript"> 
//<!-- 
$(document).ready(function() {$(".gplusbox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-330"}, "medium");}, 500);}); 
//--> 
</script> 
<style type="text/css">
.gplusbox{
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzu7-X4KzAN7o8cLp_aUCr1CqJ_gLkwbxpLzFsxpdRnRQkhz6m8wAjalxnGikYoc0_6L2k7F_zh_P8jqDMBOdBmS___AGGW5MlBgS4nEIZfMSUPmuB4IhopbeReDojA5nbZ1DX9yQoRsE/s400/g%252B+softglad.png") no-repeat scroll left center transparent !important;
display: block;
float: right;
height: 275px;
padding: 0 0px 0 46px;
width: 325px;
z-index: 99999;
position:fixed;
right:-330px;
top:20%;
}
.gplusbox div{
padding: 8px;
background: white;
border: 2px solid #D64937;
border-radius: 15px;
border-right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
</style>
<div class="gplusbox"><div>
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/114636838169087641091" data-source="blogger:blog:followers" data-width="320">
</div>
<script type="text/javascript">

      (function() {
        window.___gcfg = {'lang': 'en'};
        var po = document.createElement('script');
        po.type = 'text/javascript';
        po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(po, s);
      })();
    </script>
</div></div>

If you needed any help about this widget then feel free to post your question as comment below..

SHARE

Tweet