Planning to start tutorials on WordPress as well!. Pls leave your comments friends.

28 Aug 2012

"Stay on Page or Leave Page" Popup script - v2


stay on page or leave page

In my previous post I have shared "stay on page or leave this page" popup script which really helps you in reducing the bounce rate of your blog. Even I noticed its impact on my bounce rate. Today We will go little advanced and I'll be sharing version 2 of "stay on page or leave this page" popup script which opens a popup box once after choosed to stay on the page. This type of script is usually observed on few marketing sites to provide an offer to visitors who try to jump out of their site. Hope you got it and You can even view the demo of it.



I suggest you to include some curious, interesting sentence in this stay on page box and adding a un-tasteful sentence doesn't gonna help you in attracting the visitors of your blog. You can surely reduce the bounce rate of your blog using stay on page exit popup on your blog if you use it wisely. This widget purely uses Jquery and the fancybox lightbox script is obtained by Fancybox official website.

"Stay on Page or Leave this Page" Exit Popup


1. Go to blogger dashboard -> Template --> Edit Html.

2. Find for </head> and place the following peace of code just above it.

<script type="text/javascript" src="http://kbeezie.com/jquery13.js"></script>
<script src="http://kbeezie.com/fancybox/jquery.fancybox-1.3.1.pack.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://kbeezie.com/fancybox/jquery.fancybox-1.3.1.css" type="text/css" media="screen"/>
<script type="text/javascript">
function PopIt() {
$("a#trigger").trigger('click');
window.onbeforeunload = UnPopIt;
return "Would you like to join our mailing list for other offers?";
}
function UnPopIt()  { /* nothing to return */ }
$(document).ready(function() {
window.onbeforeunload = PopIt;
$("a#trigger").fancybox({
'hideOnContentClick': false,
'showCloseButton': false
});
$("a[id!=trigger]").click(function(){ window.onbeforeunload = UnPopIt; });
});
</script>


3. Find <body> tag and place the following code just below it.

<div style="display: none;">
<a id="trigger" href="#popup">&nbsp;</a>
<div id="popup" style="width: 250px; height: 400px;">
<p>This would be content of popup form</p>
</div>
</div>

Wondering how to customize the content of this popup form!!!?.

Stay on Page Popup form Customization

  • Change 250px with your desired width.
  • Change 400px with your desired height.
  • Replace This would be content of popup form with your form content.

4. Save the Template.


Conclusion

After saving the template, go to your blog and try to exit from your blog. You will notice stay on page exit popup and choose to stay on page, you will notice a new popup box with fancy lightbox effect which holds the content specified. Kindly leave your opinions and feedback about this in the comment section below. Peace and blessings pls.


29 comments:

       
Rohit Malik on 28 August 2012 20:31 said...


bro can you please tell me how to add multi column to the footer section in my blog as in yours...kindly visit and tell me tips

www.hackedbits.blogspot.com

Rohit Malik on 28 August 2012 20:55 said...

Didnot got any response from you bro......

please reply if you are online

Pramod sharma on 28 August 2012 23:10 said...

Yaa curious and interesting sentence can be benificial in reducing bounce rate.Does this script effect loading time of blog? MyTechPromo.com

Vijay Prakash on 29 August 2012 07:52 said...

@Pramod sharma,

Hi Pramod, Thanks for your precious comment here. As I told you in previous post, its surely gonna help you in reducing bounce rate if you use it wisely. This doesn't effect on loading speed at all.

Vijay Prakash on 29 August 2012 07:55 said...

@Rohit Malik,

Hi Rohit, there's nothing on your blog bro, kindly use some other template and if there is any help needed, then come to me and I'll help you pal.

techgod8 on 29 August 2012 15:24 said...

Hello Brother New Info

good Works Thanks For Posted

techgod8 on 29 August 2012 15:25 said...

Template Design IS Nice ..

Improve Your Creativity ..

keep Blogging

Rohit Malik on 29 August 2012 15:51 said...

Bro kindly visit now on blog and tell how to add multi column footer for blog

Vijay Prakash on 29 August 2012 16:27 said...

@techgod8,

Hi tachgod8, glad to see you back after a gap. Thanks for keeping your precious comment here and its my pleasure sharing this with you.

Sunil Bishnoi on 29 August 2012 16:29 said...

brother i subscribed you rss feed my mail is sunilbishnoi.00021@gmail.com please send me design master template please i alredy commented but you cant see that..please send me

Vijay Prakash on 29 August 2012 16:32 said...

@Rohit Malik,

Adding the columns to footer requires a brief explained tutorial. You can go with other templates on blogosphere or kindly wait till I'm going to publish a creative footer design on my blog.

Rohit Malik on 29 August 2012 16:54 said...

@author

bro please send me links to some awesome templates that will suit my blog

Vijay Prakash on 29 August 2012 17:44 said...

@Rohit Malik,

Why can't you try the design master template of me bro. The best thing is you can easily customize anything in it.

Rohit Malik on 29 August 2012 18:04 said...

please send me link bro

awaiting for your comment

Vijay Prakash on 29 August 2012 18:07 said...

@Rohit Malik,

http://www.bloggertricks.biz/2012/05/releasing-design-master-official.html

Rohit Malik on 29 August 2012 18:12 said...

bro i already visited but how do i get the download link

i didn't found any link to download your awesome template

Rohit Malik on 29 August 2012 18:17 said...

even i subscribed to blog bro please send link or file

Vijay Prakash on 29 August 2012 18:19 said...

@Rohit Malik,

kindly dispose your Email Id and I'll send.

Rohit Malik on 29 August 2012 18:25 said...

papaji107@gmail.com

Rohit Malik on 29 August 2012 18:42 said...

thanks brother

Rohit Malik on 29 August 2012 19:19 said...

bro my labels,blog archive and wekly hit posts are not coming into on sction

Vijay Prakash on 29 August 2012 20:53 said...

@Rohit Malik,

Multitab function is not implemented in design master template pal.

Rohit Malik on 29 August 2012 20:58 said...

so how i can do that please explain

Vijay Prakash on 29 August 2012 21:00 said...

@Rohit Malik,

:)..Pls wait dude, I can't cover somuch of tutorials. I'm on the path, keep blogging and you will get the required tutorials soon on my blog.

Rohit Malik on 30 August 2012 19:03 said...

Bro your template i.e. design master is not enabling me to show fb like box even after i added the code for the box

please rply soon bro my visitors thinks that i'm not blogger just somebody newbie

Rohit Malik on 30 August 2012 19:09 said...

even bro your weekly hit posts widget shows half of the content i only want to show the title as you did

rply soon thanks ..............hackedbits.blogspot.com

Vijay Prakash on 30 August 2012 19:28 said...

@Rohit Malik,

You can easily add Facebook like box bro, follow the step by step tutorial of it.

Regarding popular posts widget, go to your template html and expand widget template, then search for div class="item-snippet" and replace it with div class="item-snippet" style="display:none;".

Rohit Malik on 2 September 2012 09:55 said...

@author ,,didn't got your xact query i found the code and replaced too but it didn't work........what to do if som other trick kindly tell.........waiting for rsponse

Vijay Prakash on 2 September 2012 17:27 said...

@Rohit Malik,

Hello Rohit, Don't include the fullstop at the end.. just replace div class="item-snippet" with div class="item-snippet" style="display:none;" and it will work perfect.


Confused? Feel free to ask

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.

Note:

 
Creative Commons License


ALL the content of this site is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.


Republishing any content of this site as it is or with minor modifications is strictly prohibited.

Join the Team:

Recent Comments: