Premuim Social Traffic popup plugin for blogger

A Social Traffic Pop Up with timer function

Boost your blog traffic with your exiting readers help

I have provide most awaited Social traffic Popup widget for blogger  When the Facebook Like box or +1 button placed in your blogs sidebar, It\'ll not be a attractive place to force the readers to click them.But When a +1 button or Like box popes Up (without annoying them) The readers will surely  click on buttons.
Also you can add Email subscription box in the pop up too.

Social Traffic Pop for blogger

Features

• Combined reach of over 1.4 BILLION social media accounts.
• Completely locks all page usability until popup is closed or a social action is completed.
• Popup stays centered as the user scrolls up and down.
• Optional close button.
• Optional advanced close features allow visitors to close the popup by clicking outside of the popup area or by pressing the escape key.
• Cookies remember which users have not completed a social action.
• Like Button and Google +1 with dependent URL configurations.
• Support for both of Twitters Follow and Tweet buttons.
• Setup takes literally seconds!
• 100% customizable CSS.
• Configure everything from the beautiful built in settings panel.
• Set background opacity right from the settings.
• Works on all sites big and small.
• Proven to induce more social shares = more traffic & better rankings = more $$$$

1.Install The java script

First log in to your Blogger account, Then Go to.. Template tab and then BackUp your template in case if you accidentally delete or add a wrong code.

Then Click Edit HTML and search for </head> tag ( Ctrl+F ) . Add the following code just before it.

<!--Start Social Traffic Pop Up by 7terabyte.blogspot.com -->

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js' type='text/javascript'/>
<script src='http://dinhquanghuy.110mb.com/jquery.cookie.js' type='text/javascript'/>
<script type='text/javascript'>
var popupStatus = 0;

//loading popup with jQuery magic!

function loadPopup(){
centerPopup();

//loads popup only if it is disabled

if(popupStatus==0){
$(&quot;#backgroundPopup&quot;).css({
&quot;opacity&quot;: &quot;0.7&quot;
});
$(&quot;#backgroundPopup&quot;).fadeIn(&quot;slow&quot;);
$(&quot;#popupContact&quot;).fadeIn(&quot;slow&quot;);
popupStatus = 1;
}
}

//disabling popup with jQuery magic!

function disablePopup(){

//disables popup only if it is enabled

if(popupStatus==1){
$(&quot;#backgroundPopup&quot;).fadeOut(&quot;slow&quot;);
$(&quot;#popupContact&quot;).fadeOut(&quot;slow&quot;);
popupStatus = 0;
}
}

//centering popup

function centerPopup(){

//request data for centering

var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var windowscrolltop = document.documentElement.scrollTop;
var windowscrollleft = document.documentElement.scrollLeft;
var popupHeight = $(&quot;#popupContact&quot;).height();
var popupWidth = $(&quot;#popupContact&quot;).width();
var toppos = windowHeight/2-popupHeight/2+windowscrolltop;
var leftpos = windowWidth/2-popupWidth/2+windowscrollleft;

//centering

$(&quot;#popupContact&quot;).css({
&quot;position&quot;: &quot;absolute&quot;,
&quot;top&quot;: toppos,
&quot;left&quot;: leftpos
});

//only need force for IE6

$(&quot;#backgroundPopup&quot;).css({
&quot;height&quot;: windowHeight
});

}

//CONTROLLING EVENTS IN jQuery

$(document).ready(function(){
if ($.cookie(&quot;anewsletter&quot;) != 1) {

//load popup

setTimeout(&quot;loadPopup()&quot;,5000);
}

//CLOSING POPUP

//Click the x event!

$(&quot;#popupContactClose&quot;).click(function(){
disablePopup();
$.cookie(&quot;anewsletter&quot;, &quot;1&quot;, { expires: 7 });
});

//Click out event!

$(&quot;#backgroundPopup&quot;).click(function(){
disablePopup();
$.cookie(&quot;anewsletter&quot;, &quot;1&quot;, { expires: 7 });
});

//Press Escape event!

$(document).keypress(function(e){
if(e.keyCode==27 &amp;&amp; popupStatus==1){
disablePopup();
$.cookie(&quot;anewsletter&quot;, &quot;1&quot;, { expires: 7 });
}
});

});
</script>
<!--End Social Traffic Pop Up by 7terabyte.blogspot.com -->

If you are familiar with Java Scripts, The comments marked with Red color is for you.

2.CSS Code

After the Java script, Search for this code   ]]></b:skin>  Just before it add the following code.

#popupContactClose{
cursor: pointer;
text-decoration:none;
}
#backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#popupContact{
        border-top:5px solid #53A9FE;
        border-left:5px solid #53A9FE;
        border-bottom:5px solid #53A9FE;
       border-right:5px solid #53A9FE;
border-radius:30px;
       -moz-border-radius:30px;
       -webkit-border-radius:30px;
       
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:384px;
width:408px;
background:#FFFFFF;
z-index:2;
padding:12px;
font-size:13px;
}
#popupContact h1{
text-align:center;
color:#6FA5FD;
font-size:22px;
font-weight:700;
border-bottom:1px dotted #D3D3D3;
padding-bottom:2px;
margin-bottom:20px;
}
#popupContactClose{
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color#A30101;
font-weight:700;
display:block;
}

3.The Gadgets to appear

You can add anything that fit with the popup box. Such as a feedburner subscription box, Like box, Share buttons or anything. Just with the above format.
And this code should be apear Just before  </body> tag.

<div id='popupContact'>
<a id='popupContactClose'>
<img alt='x' height='20' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUI5vBI43OmWHrCM4TdCnsS9UqlxGAiOSGS_gVfqWZkQVrJlQjWXuO7b61L2lRUK-VRn9VeQ9Dbdt5emTbrjMTbSmYPywnTjPOU1PgbCIIg34S47lfwhSbvbUSDanXABEOEUkWfVEzuOwz/s800/Button-Close-icon.png' width='20'/>
</a>
<h1>PopUp Title</h1>
Code of the gadget you need
<br/>
<p style=" line-height:0px; font-size:10px; font-weight:bold; text-align:center;"><a style="color:#D3D3D3;" href="http://www.blogtrickstream.com/2011/12/one-time-popup-for-blogger-like-box.html">Get This</a></p>
<p id='contactArea'/>
</div>
<div id='backgroundPopup'/>

Just replace " PopUp Title " with a PopUp title of your choice . Also replace " Code of the gadget you need " with your gadged HTML code, It could be a Like box, +1 button, Subscription box, Welcome message.. or any.

Thats all...!!!