How You Could Be Getting More Blogspot Subscribers In Only 15 Minutes

Aim: How to implement a non-intrusive subscription pop-up box using jQuery

One aspect of running a blog I personally hold my hands up and admit struggling with is obtaining new subscribers to Blogspot SEO; and I would imagine I'm not the only one in this boat. It does essentially boil down to producing content that visitors find interesting and valuable. I've found press-releases to be very successful in enticing people to sign up to a blog in exchange for SEO software and e-books. All in all, I've found it alot harder to gain sign-ups on Blogspot compared to other blogging platforms such as WP. This is not the end of the world though! Why not use a non-intrusive (one time) subscription pop-up box that every person will see when visiting your Blogspot blog. We all have our regular readers and guests that stumble on our blog after searching a key phrase in Google, maybe a shove and an arm twist is all it will take to increase your blogs subscribers.

1) Navigate to the 'Blogspot Dashboard' and then go to 'Design'->'Edit HTML'. Make sure to check the box 'expand widget template' to make the next process easier. If your unsure what your doing, please back-up your Blogspot template before moving on to step two!

2) Using the search facility provided with most modern internet browsers (I am using Google Chrome, you can easily access this by holding Ctrl key and press the F key), find ']]></b:skin>' in the template code.

3) Copy and paste the following piece of code and insert it just before ']]></b:skin>'.

#popupContactClose{
cursor: pointer;
text-decoration:none;
}
#backgroundPopup{
display:none;
position:fixed;
_position:absolute;
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;
}

4) Again, using the search facility find '</body>'.

5) Copy and paste the following piece of code and insert it just before </body>'.

<div id="popupContact">

<a id="popupContactClose">x</a>

<h1>Insert your pop-up box title here</h1>

<p id="contactArea">

The content of the pop-up box such as FeedBurner

subscription form goes here.</p>

</div>
<div id="backgroundPopup"></div>

6) Again (again), use the search facility to find '</head>'.

7) Copy and paste the following piece of code and insert it just before '</head>'.

<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: 1 });
    });
    //Click out event!
    $("#backgroundPopup").click(function(){
        disablePopup();
        $.cookie("anewsletter", "1", { expires: 1 });
    });
    //Press Escape event!
    $(document).keypress(function(e){
        if(e.keyCode==27 && popupStatus==1){
            disablePopup();
            $.cookie("anewsletter", "1", { expires: 1 });
        }
    });
});
</script>  

8) Make sure to save all configuration changes and your done. In the above code I have made it so the subscription pop-up only appears once per day for every visitor. If you find this too much, you can edit the above tag '{ expires: 1 }' to  '{ expires: 3 }' , meaning in this case it would only be shown once every three days instead.

Any questions on the code, how it can be modified and problems with the code I will try my utmost best to answer in the comments section below. I hope this has helped; please drop a comment and subscribe to my blog for the latest updates on the goings on at Blogspot SEO.

If you found this article helpful or interesting, why not show it to a friend?