-->

Cool ?

Saturday, December 31, 2011

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://lh5.googleusercontent.com/-wrS4yypmVzU/Tvxl7B-kIfI/AAAAAAAAAVE/fzga9_tj4aM/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 bloggerjquery one time popup

Subscribe to Get Latest Posts in your Inbox

26 comments:

  1. Replies
    1. I got this popup working on my blog so well, it's amazing. Do check out the new design I intserted.

      Delete
  2. useful info thnx 4 sharing bro

    ReplyDelete
  3. Thanks for letting me know about other good stuff!

    ReplyDelete
  4. Thanks for the great post!
    Is there any way to change the pop up so that it pops up after the reader has read the post? Maybe when the reader has scrolled to the bottem of the post or is about to exit?

    ReplyDelete
  5. I was not able to save the third step. It was always showing the error that there was no matching closing tag for div...Can you please help?

    ReplyDelete
    Replies
    1. try copying the exact code. The / in the line <div id='backgroundPopup'/> is highly required!

      Delete
  6. Thank you for this great code.
    I have two questions:
    Can I control when the popup will appear (let say after 60 seconds)?
    And can we easily (html novice here!) change the size of the popup box?
    Thanks!!

    ReplyDelete
  7. Love it , I also designed a new subscription box widget for blogger and wordpress
    http://www.designrapid.com/minimal-design-subscription-box-tutorial/

    ReplyDelete
  8. i tried this and in the preview worked well, but when tried to closed it gave me an error warning and it give a code to give to blogger assistance....

    ReplyDelete
  9. is their anyway to change the position of the popup box? i want to lower it.






    Free PSP Downloads - www.PSPCollections.net

    ReplyDelete
  10. its nit working on my blog http://www.galaxyyoung.in/

    ReplyDelete
    Replies
    1. It works on mine, infact it works perfectly. Remember to select expand widget box. Thanks

      Delete
  11. Not working in my blog www.fullversionaladin.com. Please tell me brief the last step.

    ReplyDelete
  12. its working correct...thanks
    but i had one problem
    i have slider and not working when setup your code
    the reson are these jquery/1.5.0/jquery.min.js

    the slider contains version query 1.71

    when remove jquery/1.5.0/jquery.min.js is not working the pop up but slider work

    any idea????

    ReplyDelete
  13. I just became alert to your blog through Google, and found that it's truly informative. I’m going to watch out for brussels. I will be grateful if you continue this in future. Lots of people will be benefited from your writing. Cheers! :
    Click Here To Learn Blogger Tricks

    ReplyDelete
  14. saya tidak bisa not english
    saya ucapkn terimaksi atas you post

    ReplyDelete
  15. Thanks its working fine with my blog

    ReplyDelete
  16. Thanks for this wonderful widget code. Looks nice in my blog.

    ReplyDelete
  17. not working on my blog. everything was saved properly without any errors. :( plz help.

    ReplyDelete


  18. Hello! I simply want to offer you a huge thumbs up for your great information you've got here on this post. I am coming back to your website for more soon. my web page
    are want to transfer your docs to wordpress then check it out

    ReplyDelete

  19. Thank you for the auspicious writeup. It in fact was a amusement account it. Look advanced to far added agreeable from you! However, how could we communicate? Look into my page ::Are you hate that your computer crashed everytime, then check it out

    ReplyDelete

x

Please Use 10 seconds to Make Us World Wide

A Pluse One will be a great support...
...........................................................................



Also a Like on the Facebook Page
...........................................................................



Get This