jQuery Google+ Followers Box Pop Up For Blogger

In our previous post we have shared with you how to add Google+ Followers Box to your blogger blog. And now we are here with an awesome widget which pops up a jQuery window containing Google+ Followers Box, when a visitor lands on your blogger blog. The widget will pop up only on the first visit, so that it may not haunt your visitors. This widget is a great one to increase your followers, which inturn will help you to attain more traffic from Google+. The installation is easy, follow the steps below to do so.

Add Google+ Followers Box Pop Up To Blogger

1) In the Blogger dashboard click the drop down menu for your blog > Choose 'Layout' > Click 'Add A Gadget' > Choose 'Html Javascript':

 

2) Copy and Paste the following code into the Html/Javascript Gadget :

<style>
#backgroundPopup{ display:none; position:fixed; _position:absolute; height:100%; width:100%; top:0; left:0; background-color: transparent;       background:rgba(0, 0, 0, 0.5);z-index:999; }
#popupContact{ float=center; display:none; position:fixed; _position:absolute; height:400px; width:340px; background:#FFFFFF; border:4px solid #ddd; z-index:999; padding:8px; font-size:13px; }
#popupContactClose{    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRLpD-mSZyFJ4jMhybVurFoc7a9Doku5ov44OyiO7TV4sok2UGTT2dByk91Q5-H2vhyPPBB1WjmH2NS_DTLRHiTnNrIBeKw5owJEjw-YOKXKc6VIKGd4Sc4LJULQsx-iakbUUtp7MYGzM/s1600/x.png) no-repeat;    width:25px;    height:29px;    display:inline;    z-index:3200;    position:absolute;    top:0px;    right:0px;    cursor:pointer;    text-indent: -99999px;}
</style> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/> </script>
<div id="backgroundPopup">
<div id="popupContact">
<a href="" id="popupContactClose">x</a>
<div id="btntfollowForm">
<center><img alt="Subscribe" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj966kKzYHAf3WnRN2_3UgHzylhfT1G8EX2VQJHpGqApLUAKOObVPqvf9ouFU8LROCvcLbjYc7CHYqg_vFFF6-YVkGwKZ5RPGCYa8aQGK6FDl2MhZbxdmcazu-GzxuSuZREmSLm3I4YZk/s1600/asdafsasf.png" />
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/117395947435425050465" data-source="blogger:blog:followers" data-width="310">
</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></center>
</div>
</div>
</div>
<script src="http://yourjavascript.com/24315621361/jquery.cookie.js" type="text/javascript">
</script>
<script type="text/javascript">
     var popupStatus = 0;
function loadPopup(){
      if(popupStatus==0){
        $("#backgroundPopup").fadeIn("slow");
        $("#popupContact").fadeIn("slow");
        popupStatus = 1;
    }
}

function disablePopup(){
    if(popupStatus==1){
        $("#backgroundPopup").fadeOut("slow");
        $("#popupContact").fadeOut("slow");
        popupStatus = 0;
    }
}

function centerPopup(){
       var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;
    var popupHeight = $("#popupContact").height();
    var popupWidth = $("#popupContact").width();
       $("#popupContact").css({
        "position": "absolute",
        "top": windowHeight/2-popupHeight/2,
        "left": windowWidth/2-popupWidth/2
    });
       $("#backgroundPopup").css({
        "height": windowHeight
    });

}
$(document).ready(function(){
    if ($.cookie("anewsletter") != 1) {
        //centering with css
        centerPopup();
        //load popup
        loadPopup();
    }    
         $("#popupContactClose").click(function(){
        disablePopup();
        $.cookie("anewsletter", "1", { expires: 7 });
    });
      $(document).keypress(function(e){
        if(e.keyCode==27 && popupStatus==1){
            disablePopup();
            $.cookie("anewsletter", "1", { expires: 7 });
        }
    });
});
</script>

3) Replace 117395947435425050465 with your Google+ Profile ID.

4) Hit the save button.

That's it you have a very cool Google+ Followers Box Pop Up on your blog.

Drop Your Comments And Questions Below.