Some of my friends were asking me about Google+ Add to Circles Popup Widget with Lightbox Effect including one time popup for single user in n number of days. I did not found such widget on the web through google search. So I planned to create and share with you friends. I am using GUI of “Facebook Likebox Extended using Colorbox jQuery Lightbox “, that I have published few days ago. I have managed widget GUI with the help of “Colorbox – A jQuery Lightbox” by Jack Moore. I am here launching Google+ Add to Circles widget with white and black lightbox effect. You can choose any of these as per your blog design or choice. This widget’s customization in really simple. No tech expertise is necessary, just read and follow this article carefully. This widget is designed and optimized with HTML5 so your site/blog performance will not be compromised any how.

Add to Circles JS Popup widget

Google+ Add to Circles Popup Widget with Lightbox Effect – WHITE

Google+ Add to Circles Popup Widget - WHITE
Look – Google+ Add to Circles Popup Widget – WHITE

If you want this Widget, copy this Code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//yourjavascript.com/34011553541/jquery-colorbox-min.js"></script>
<script>
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*15;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"440px", height:"500px", inline:true, href:"#tpbox"});
}
jQuery(".open_popup").colorbox({width:"440px", height:"500px", inline:true, href:"#tpbox"});
});
</script>
<div style="display:none">
<div id="tpbox" style="background:#fff;position:scroll;z-index:99999999">
<div style="text-align:center;padding-top:15px">
<h3>
Subscribe us via Google+</h3>
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/+TechPrevue" data-source="blogger:blog:followers" data-width="350"><a href="https://www.techprevue.com">.</a></div>
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
</div>
</div>
<style>
#colorbox,#cboxOverlay,#cboxWrapper{position:absolute;top:0;left:0;z-index:9999;overflow:hidden}#cboxOverlay{position:fixed;width:100%;height:100%;background:#fff}#cboxMiddleLeft,#cboxBottomLeft{clear:left}#cboxContent{position:relative;background:#fff;overflow:hidden}#cboxLoadedContent{overflow:auto;-webkit-overflow-scrolling:touch;margin-bottom:20px}#cboxTitle{margin:0;position:absolute;bottom:0;left:0;text-align:center;width:100%;color:#999}#cboxLoadingOverlay,#cboxLoadingGraphic{position:absolute;top:0;left:0;width:100%;height:100%}#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{cursor:pointer}.cboxPhoto{float:left;margin:auto;border:0;display:block;max-width:none;-ms-interpolation-mode:bicubic}.cboxIframe{width:100%;height:100%;display:block;border:0;background:#fff}#colorbox,#cboxContent,#cboxLoadedContent{box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box}#colorbox{outline:0}#cboxTopLeft{width:25px;height:25px;background:url(//goo.gl/6qCzGf) no-repeat}#cboxTopCenter{height:25px;background:url(//goo.gl/6qCzGf) repeat-x 0 -50px}#cboxTopRight{width:25px;height:25px;background:url(//goo.gl/6qCzGf) no-repeat -25px 0}#cboxBottomLeft{width:25px;height:25px;background:url(//goo.gl/6qCzGf) no-repeat 0 -25px}#cboxBottomCenter{height:25px;background:url(//goo.gl/6qCzGf) repeat-x 0 -75px}#cboxBottomRight{width:25px;height:25px;background:url(//goo.gl/6qCzGf) no-repeat -25px -25px}#cboxMiddleLeft{width:25px;background:url(//goo.gl/95jNER) repeat-y}#cboxMiddleRight{width:25px;background:url(//goo.gl/95jNER) repeat-y -25px 0}#cboxError{padding:50px;border:1px solid #ccc}#cboxCurrent{position:absolute;bottom:0;left:100px;color:#999}#cboxLoadingOverlay{background:url(//goo.gl/X52iQ2) no-repeat 5px 5px #fff}#cboxPrevious,#cboxNext,#cboxSlideshow,#cboxClose{border:0;padding:0;margin:0;overflow:visible;width:auto;background:none}#cboxPrevious:active,#cboxNext:active,#cboxSlideshow:active,#cboxClose:active{outline:0}#cboxSlideshow{position:absolute;bottom:0;right:42px;color:#444}#cboxPrevious{position:absolute;bottom:0;left:0;color:#444}#cboxNext{position:absolute;bottom:0;left:63px;color:#444}#cboxClose{position:absolute;bottom:0;right:0;display:block;color:#444}.cboxIE #cboxTopLeft,.cboxIE #cboxTopCenter,.cboxIE #cboxTopRight,.cboxIE #cboxBottomLeft,.cboxIE #cboxBottomCenter,.cboxIE #cboxBottomRight,.cboxIE #cboxMiddleLeft,.cboxIE #cboxMiddleRight{filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)}
</style>

Demo White Widget

Google+ Add to Circles Popup Widget with Lightbox Effect – BLACK

Google+ Add to Circle Popup Widget - DARK
Look – Google+ Add to Circles Popup Widget – DARK

If you want this Widget, copy this Code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//yourjavascript.com/34011553541/jquery-colorbox-min.js"></script>
<script>
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*15;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"440px", height:"500px", inline:true, href:"#tpbox"});
}
jQuery(".open_popup").colorbox({width:"440px", height:"500px", inline:true, href:"#tpbox"});
});
</script>
<div style="display:none">
<div id="tpbox" style="background:#fff;position:scroll;z-index:99999999">
<div style="text-align:center;padding-top:15px">
<h3>
Subscribe us via Google+</h3>
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/+TechPrevue" data-source="blogger:blog:followers" data-width="350"><a href="https://www.techprevue.com">.</a></div>
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
</div>
</div>
<style>
#colorbox,#cboxOverlay,#cboxWrapper{position:absolute;top:0;left:0;z-index:9999;overflow:hidden}#cboxOverlay{position:fixed;width:100%;height:100%;background:#000}#cboxMiddleLeft,#cboxBottomLeft{clear:left}#cboxContent{position:relative;margin-top:20px;background:#000}#cboxLoadedContent{overflow:auto;-webkit-overflow-scrolling:touch;border:5px solid #000;background:#fff}#cboxTitle{margin:0;position:absolute;top:-20px;left:0;color:#ccc}#cboxLoadingOverlay,#cboxLoadingGraphic{position:absolute;top:0;left:0;width:100%;height:100%}#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{cursor:pointer}.cboxPhoto{float:left;margin:auto;border:0;display:block;max-width:none;-ms-interpolation-mode:bicubic}.cboxIframe{width:100%;height:100%;display:block;border:0;background:#fff}#colorbox,#cboxContent,#cboxLoadedContent{box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box}#colorbox{outline:0}#cboxError{padding:50px;border:1px solid #ccc}#cboxCurrent{position:absolute;top:-20px;right:0;color:#ccc}#cboxLoadingGraphic{background:url(//goo.gl/fJUeaf) no-repeat center center}#cboxPrevious,#cboxNext,#cboxSlideshow,#cboxClose{border:0;padding:0;margin:0;overflow:visible;width:auto;background:none}#cboxPrevious:active,#cboxNext:active,#cboxSlideshow:active,#cboxClose:active{outline:0}#cboxSlideshow{position:absolute;top:-20px;right:90px;color:#fff}#cboxPrevious{position:absolute;top:50%;left:5px;margin-top:-32px;background:url(//goo.gl/Zogv65) no-repeat top left;width:28px;height:65px;text-indent:-9999px}#cboxPrevious:hover{background:bottom left}#cboxNext{position:absolute;top:50%;right:5px;margin-top:-32px;background:url(//goo.gl/Zogv65) no-repeat top right;width:28px;height:65px;text-indent:-9999px}#cboxNext:hover{background:bottom right}#cboxClose{position:absolute;top:5px;right:5px;display:block;background:url(//goo.gl/Zogv65) no-repeat top center;width:38px;height:19px;text-indent:-9999px}#cboxClose:hover{background:bottom center}
</style>

Demo Dark Widget

Customize Google+ Add to Circles Popup Widget with Lightbox effect

Above in both of the widget codes you have to change following values –

1. var fifteenDays = 1000*60*60*24*15; :: No. of Days when Popup widget will appear to same person ::
Number of days when Google+ Add to Circles Popup Widget cookie will expire and this will be visible to re-visited readers. Default value is 15 days, you may set this value to 1, 2, 3, 4, 5,… n. i.e. 7 Days, 15 Days, etc.

2. +TechPrevue :: It is Google+ profile ID ::
Change this value with your Google+ profile ID to work this widget for you.

Adding this widget to Blogger

Go to Dashboard › Select blog › Layout › Add a Gadget › Add HTML/JavaScript Gadget › Paste any widget code › Save Gadget › Done

Now you’re done. Enjoy Google+ Add to Circles Widget with Lightbox effect.