Many of bloggers said that a subscription pop-up very helpful in increasing the number of subsriber . Some bloggers such as Johnchow use subscription pop-up to show his new books and ask for subscription from readers .As you can see ,the number of subscriber in Johnchow website is very impressive .
Pop-up good or bad ? I do not mentioned here ^^ In this post ,I've just want to show you how to make a subscription pop-up for your blog . This pop-up will appear in the first-time you visit and it only appear again after several days .
Live Demo
Here are steps for making a pop-up in Blogspot
1,Open template file by go to Blogspot Dashboard ->Design ->Edit HTML . Check the box "Expand widget templates"2,Add this CSS code right before ]]></b:skin>
#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{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:384px;
width:408px;
background:#FFFFFF;
border:2px solid #cecece;
z-index:2;
padding:12px;
font-size:13px;
}
#popupContact h1{
text-align:left;
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:#6fa5fd;
font-weight:700;
display:block;
}
3,Add this HTML code right before </body>
<div id="popupContact">
<a id="popupContactClose">x</a>
<h1>Pop-up title goes here</h1>
<p id="contactArea">
your pop-up content and subscription form ... goes here
</p>
</div>
<div id="backgroundPopup"></div>
This is HTML code of your subscription pop-up .
Replace the text in bold with title of pop-up and pop-up content .
To make this popup becomes a subscription pop-up ,you can add Feedburner subscription code into pop-up content . Like this
<div id="popupContact">
<a id="popupContactClose">x</a>
<h1>Subscription to SimplexDesign</h1>
<p id="contactArea">
<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Simplex', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<p>Enter your email address:</p>
<p><input type="text" style="width:140px" name="email"/></p>
<input type="hidden" value="Simplex" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input type="submit" value="Subscribe" />
</form>
</p>
</div>
<div id="backgroundPopup"></div>
The text in bold is the code of Feedburner subscription form .
You might ask me : how to get Feedburner subscription form ?
It's very easy .If you are using Feedburner ,login to your feedburner account -> click on your blog feed ->click on Publicize tab -> Click on Email Subscriptions -> Active this service -> code of subscription form is in text box .
If you do not use Feedburner ,you can add other code to pop-up content ....
4, Now it's time to add Jquery code . This code will make the pop-up work .
Add this code right before </head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<script src="http://dinhquanghuy.110mb.com/jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
var popupStatus = 0;
//this code will load popup with jQuery magic!
function loadPopup(){
//loads popup only if it is disabled
if(popupStatus==0){
$("#backgroundPopup").css({
"opacity": "0.7"
});
$("#backgroundPopup").fadeIn("slow");
$("#popupContact").fadeIn("slow");
popupStatus = 1;
}
}
//This code will disable popup when click on x!
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
$("#backgroundPopup").fadeOut("slow");
$("#popupContact").fadeOut("slow");
popupStatus = 0;
}
}
//this code will center popup
function centerPopup(){
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
//centering
$("#popupContact").css({
"position": "absolute",
"top": windowHeight/2-popupHeight/2,
"left": windowWidth/2-popupWidth/2
});
//only need force for IE6
$("#backgroundPopup").css({
"height": windowHeight
});
}
//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
if ($.cookie("anewsletter") != 1) {
//centering with css
centerPopup();
//load popup
loadPopup();
}
//CLOSING POPUP
//Click the x event!
$("#popupContactClose").click(function(){
disablePopup();
$.cookie("anewsletter", "1", { expires: 7 });
});
//Click out event!
$("#backgroundPopup").click(function(){
disablePopup();
$.cookie("anewsletter", "1", { expires: 7 });
});
//Press Escape event!
$(document).keypress(function(e){
if(e.keyCode==27 && popupStatus==1){
disablePopup();
$.cookie("anewsletter", "1", { expires: 7 });
}
});
});
</script>
The pop-up will show if you are first-time visitor to the blog and will not displayed again for 7 days .
With this feature ,reader will not be annoyed by pop-up each time they visit your blog . After 7 days ,the pop-up will show again to remind visitor to subscribing your blog . You can set the number of days pop-up will be appeared again by set the value of expires: 7 to other value ,for example ,expires: 6 ^^
Note : If error occured when uploading template ,you must encode the script in step 4 by copying the code ,and go to this page ,paste the code in textbox and click on encode . After that copy the result and paste it back to template file .
That's all for subscription pop-up .
You can save template and back to your blog to see the changes.
I hope this post will be helpful
0 comments:
Post a Comment