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.

Add to Circles CSS Popup  widget

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.

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.

8 thoughts on “Google+ Add to Circles CSS Popup Widget”

  1. Avatar photo
    Nataliya Di Giovanni

    thank you for this code!
    a question: do you happen to know how to add google friend connect to the popup?

    1. Avatar photo
      Vinay Prajapati

      Yes I know. If you need I can provide you that code. But I want to tell you it will only work with Blogger not with WordPress.

      1. Avatar photo
        Nataliya Di Giovanni

        oh, that’d be awesome! thank you!
        i only need it for blogspot anyways
        (can you make it so that it only appears once a week, instead of every load? thank you)

          1. Avatar photo
            Nataliya Di Giovanni

            oh, of course! sorry, I should’ve thought about it: _pipidinko.blogspot.com

            thanx again!

          2. Avatar photo
            Vinay Prajapati

            Please add friendconnect widget to your blog and let me know. Regards

          3. Avatar photo
            Vinay Prajapati

            Well I am working on this widget. I will let you know soon. Regards.

Leave a Comment

Your email address will not be published. Required fields are marked *