One TIme PopUp for Blogger | Like Box | Subscription Box|..

A one Time Pop Up

Boost your audiences with your exiting readers help

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.

Enough Talks I know you have a creative mind. So I do not need to explain the advantages

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.

<!--One Time Pop Up by Blogtrickstream.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 One Time Pop Up by Blogtrickstream.com -->

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

Credits: The Java script is taken from simplex blog. 

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;
}

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/AVvXsEi2cYok6dKTt3km9-zix81eJT4x6dP82JVkXY3aK-Ed3JJ-J9XsDxzCxop4efRYitBx7xh7jSBR4mzOnhqn64fVmDxm9CAhhGQ4EuV8bhCFzMpGnbjBv3dkS8RlRKpcyJ3g1RDZHhdPqNof/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.!! Hope  you will enjoy the post. Do not forget to leave a Feedback

Note: You must add all three codes (HTML, Java Script and CSS) in your template

You saw a Demo in this blog, no? If you didn't please try deleting your browser cookies. And reloading page.

Incoming search terms:  pop-up email subscription for blogger,  blogs with facebook popup like box,  pop up like icon in blogspot  ,pop up subscription box ,  facebook like box popup for blogger,  pop up facebook likebox , like box pop up for blog , blogger pop up, how to add 1 time pop up message to blogger, jquery one time popup

Subscribe to Get Latest Posts in your Inbox