Google+ Add to Circles CSS Popup Widget

Google+ Add to Circles widget is very useful and its popularity is exponential among professional bloggers. If you are using this widget in your blog’s sidebar then it is good but if you’re looking for a popup widget which can welcome your blog readers and increase your circles (friends) on Google+ profile. Then this article is for you, in which you will learn how a Google+ Add to Circles popup widget is possible on your blog. One thing I want to make you very clear this widget is really simple and it’s installation is very easy i.e. no technical expertise in required. Just read this article carefully and success is on the way. This widget is just using CSS3 popup properties so your blog/site will not slow down.

Google+ Add to Circles widget is an awesome widget for Blogger and other sites. Now techPrevue updating this widget and launching CSS popup version to make it more impressive to your readers.

Demo – Google+ Add to Circles / Followers CSS Popup Widget

How to put Google+ Add to Circles CSS Popup Widget

1. Blogger Draft › Select Blog › Click on Layout › add HTML/Javascript widget › Leave widget title empty
2. Now paste the following code in widget

Note: Don’t forget to change Google+ Profile ID (103741144523748761550) with your own.

Google+ Add to Circles CSS Popup Widget Code

<!-- GOOGLE+ ADD TO CIRCLES CSS POPUP WIDGET
DO NOT REMOVE OR MODIFY THIS CODE BEYOND PERMISSIONS. RESPECT DESIGNER, RESPECT DMCA.
Developer: https://www.techprevue.com
Distributed under license CC BY-NC-ND 3.0 INT
Please keep license information intact while using this widget -->
<style type="text/css">
* html #tpfanbox{position:absolute}
#tpfanbox{display:block;top:0px;left:0px;width:100%;height:100%;margin:0;overflow-y:auto; z-index:9999}
#tpfanboxx{background-color:#fff;overflow:none}
.tpfanboxx{width:320px;height:380px;position:fixed;top:45%;left:50%;margin-top:-200px; margin-left:-200px;border:7px solid #CF3E2C;padding:20px;z-index:9999}
.tptitle{background:#CF3E2C;color:#fff;font-size:16px !important;font-weight:bold;margin:5px 0;border-left:20px solid #C64A28;padding:10px;line-height:25px;font-family:Arial !important; float:left;z-index:9999;width:auto}
</style>
<!--[if lte IE 6]>
<style type="text/css">
/*<![CDATA[*/
html {overflow-x:auto;overflow-y:hidden}
/*]]>*/
</style>
<![endif]-->
<div id="tpfanbox">
<div id="tpfanboxx" class="tpfanboxx">
<h3 class="tptitle">WANT UPDATES, ADD TO CIRCLES</h3>
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/103741144523748761550" data-source="blogger:blog:followers" data-width="350">
</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>
<br/>
<center style="float:left; margin-left:10px;cursor:pointer;"><a style=" font-size:xx-small; color:#3B78CD; text-decoration:none;" onmouseup="document.getElementById('tpfanbox').style.display='none'">[X] CLOSE</a></center>
<center style="float:right; margin-right:10px;"><span style="font-size:xx-small; color:#000; text-decoration:none;">+Get this at</span> <a target='_blank' style="font-size:xx-small; color:#3B78CD; text-decoration:none;" href="https://www.techprevue.com">Tech Prévue</a></center>
</div></div>
<!-- GOOGLE+ ADD TO CIRCLES CSS POPUP WIDGET
DO NOT REMOVE OR MODIFY THIS CODE BEYOND PERMISSIONS. RESPECT DESIGNER, RESPECT DMCA. -->

One important thing is this widget works for all blogs and websites if you paste and save the widget code just above </body> in HTML template.