Today We will go little advanced
and I'll be sharing 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"> </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.
Post a Comment