Tuesday, June 4, 2013

How to Add Google Plus Pop Up Follow Box to Blogger Blog

Author: Gagan Masoun
Google Plus Pop Up Follow BoxWith a lot of hard work bloggers and webmaster are trying to increase their social profiles fan following. Google+ one of the best way to increase blog's popularity. A small Google+ gadget which can really help you to increase G+ followers. Recently, one of our readers asked us, how he can add Google Plus Pop Up Follow Box to his Blogger blog. Today in this short article we will show you an amazing Google+ JQuery pop up light box widget to blogger blog.

How to Add Google+ Pop Up Follow Box

  1. Go to Blogger Dashboard ›› Design ›› Page Elements.
  2. Click Add A Gadget ›› In New Window, Select HTML/Javascript .
  3. Copy The Code Given Below and Paste It Inside The Box.
  4. Save The Gadget and Its Done
<style type="text/css">
/***********************************************
    www.BlogsDaddy.com    
***********************************************/
* html #exestylepopupdiv {position:absolute;}
#exestylepopupdiv {display:block; top:0px; left:0px; width:100%; height:100%; position:fixed; background-image:url('http://1.bp.blogspot.com/-h5HAXYuMROo/Ua2LQ74em3I/AAAAAAAA4AM/pRP-73WWozA/s1600/exeideasopacity0.5.png');margin:0; overflow-y:auto;}
#exestylepopup {z-index:9999;background-color: #fff; overflow:none;}
.exestylepopup {width:400px; height:440px; position:fixed; top:45%; left:50%; margin-top:-220px; margin-left:-200px; border: 10px solid #999; padding: 20px;}
.exe-title {background:#000;color: #fff;font-size: 20px !important;font-weight:bold;margin:5px 0;border:20px solid #ddd;padding:10px;line-height:25px; font-family:arial !important;}
</style>
<!--[if lte IE 6]>
<style type="text/css">
/*<![CDATA[*/
html {overflow-x:auto; overflow-y:hidden;}
/*]]>*/
</style>
<![endif]-->
<div id="exestylepopupdiv">
<div id="exestylepopup" class="exestylepopup">
<center><h3 class="exe-title">Receive All Updates Via Google+. Just Click The Follow Button Below</h3></center>
<center>
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/117100549673033253859" 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>
<br />
<center style=" float:right; margin-right:35px; font-size:9px;" >Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.blogsdaddy.com">Blogs Daddy</a></center>
<center style=" float:left; margin-left:35px; font-size:9px;cursor:pointer;" ><a style=" font-size:9px; color:#3B78CD; text-decoration:none;" onmouseup="document.getElementById('exestylepopupdiv').style.display='none'">Skip To Continue</a></center>
</div>
</div>
<!-- www.BlogsDaddy.com -->

Customization:

  1. Replace the red color code with your own Google+ profile URL.
  2. Replace the pink color title with your own if you want.
Congratulations! its all done. Visit your blog and enjoy. We hope you like this simple pop up Google plus gadget. 
Very soon we will come other awesome tutorials and article. Please follow us on G+ for getting our latest updates. Happy Blogging & Stay Blessed :)

Author
Author - is the owner of Blogs Daddy Blog. Gagan lives in India, has been blogging since 2010 and writing Blogs Daddy Blog since 2011.You can follow him on twitter @BlogsDaddyYou can also follow him on Google+.

2 comments:

  1. Is there any demo available for this google plus follow up box ?

    any way thanks for sharing

    ReplyDelete
    Replies
    1. Hello,

      Oh I forgot it. Providing screenshot for this widget :)

      Thanks

      Delete