Stay in page or leave page codes for blogger
Do you have seen that when you leave a unsaved
change page, a pop-out with saying stay on page or leave this page. We are
going to place this popup on our blog/site so whenever one leave your page you
can show additional message such as your new or popular post which will engage
him in your site. Now we are going to add addition change on it , when you
viewer choose stay on this page a new popup will open that show your desired
content like popular post, new post etc. It will increase your page views, as
well as helps you in reducing the bounce rate of your blog/site.
I suggest you to add some interesting, attractive
texts line in this stay on page box. This will reduce the bounce rate of your
blog/site using stay on or leave page popup on your blog/site but you must use
it wisely.
Also read How to get free alexa account.
Stay on Page or Leave this Page Exit Popup
1. Login to your blog, go to template and click on
edit html.
2. Find for </head> tag and place the
following codes 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. Now search for <body> tag and place the
following codes just below it.
<div style=”display: none;”>
<a
id=”trigger” href=”#popup”> </a>
<div
id=”popup” style=”width: 250px; height: 400px;”>
<p> Write you message here</p>
</div>
</div>
You can also change the width 250px and 400px with
your desired width/height.
4. Now save the template.
When you done it, go to your blog and try to exit
from your blog. You will notice a popup, stay or leave in this page and choose
to stay on page, now a new popup box with fancy light box effect will open with
your desired content.
0 comments:
Post a Comment