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.
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){
$("#backgroundPopup").css({
"opacity": "0.7"
});
$("#backgroundPopup").fadeIn("slow");
$("#popupContact").fadeIn("slow");
popupStatus = 1;
}
}
//disabling popup with jQuery magic!
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
$("#backgroundPopup").fadeOut("slow");
$("#popupContact").fadeOut("slow");
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 = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
var toppos = windowHeight/2-popupHeight/2+windowscrolltop;
var leftpos = windowWidth/2-popupWidth/2+windowscrollleft;
//centering
$("#popupContact").css({
"position": "absolute",
"top": toppos,
"left": leftpos
});
//only need force for IE6
$("#backgroundPopup").css({
"height": windowHeight
});
}
//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
if ($.cookie("anewsletter") != 1) {
//load popup
setTimeout("loadPopup()",5000);
}
//CLOSING POPUP
//Click the x event!
$("#popupContactClose").click(function(){
disablePopup();
$.cookie("anewsletter", "1", { expires: 7 });
});
//Click out event!
$("#backgroundPopup").click(function(){
disablePopup();
$.cookie("anewsletter", "1", { expires: 7 });
});
//Press Escape event!
$(document).keypress(function(e){
if(e.keyCode==27 && popupStatus==1){
disablePopup();
$.cookie("anewsletter", "1", { 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...!!!
With Twitter's worldwide popularity and with over 200 million users, generating 65 million tweets a day, it has become a must for every web master to use twitter sharing buttons and applications as much on his web as possible. This lets users to easily tweet our blogs and websites which thereby generates traffic for us in return. Harish of 
