How To Add Email Subscription Popup Widget In Blogger

email subscription popup blogger plugin.

Maintaining email list is one of the important thing in blogging world. With this you can call you loyal readers many time on your blog may be every time whenever you publish the new post.

There are many companies providing email subscription service like marpost, mailchimp etc. All of them are not free but feedburner by google is free for life time.

It doesn't matter whether you are on blogger or wordpress platform. Feedburner allows you to configure for both and allows you to send free email to your subscribers whenever your publish the new post.

But have you ever thought how to collect email id's of your readers and maintain one good email list to increase your blog traffic ?

Must Read :-

Well for that you can put one awesome and stylish subscription box on the right side or at the bottom of every post on your blog and you can also fire email subscription popup box (look at the above snap shot). This is considered the best strategy to collect email id's.

I hope you guys have already configured your blog with feedburner and have already added one email subscription box on your blog. If not, then may be we will see one detailed tutorial about the same on some other day. But today we will see how to add email subscription popup widget.

Also See :- Trick To Automatically Tweet Your Blog Posts Using Google Feedburner

Here I have made one awesome jquery plugin which fires email subscription box once in a week. If users close the box it won't be shown to him again and again. This is important because I guess you also do not want to irritate your reader right.

Must Read :-

Add Email Subscription Popup Widget :

As I said this is jquery plugin. So, to support jquery you have to add one <script> file into your blogger template.

I recommend you to take your blogger template first.

Step 1 :- Go to your blogger template.

Blogger dashboard >> Template >> Edit HTML

Now add the below mentioned code before </head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Now lets add email subscription popup code.

Step 2 :- Now go to blogger layout.

Blogger dashboard >> Layout >> Add a gadget.
Add HTML/Javascript file.

Step 3 :- Add the below mentioned code.

height:100%; width:100%; top:0; left:0; background-color: transparent;       background:rgba(0, 0, 0, 0.5);z-

index:999; }

#popupContact{ display:none; position:fixed; _position:absolute; /* hack for internet explorer 6*/

height:350px; width:500px; background:#FFFFFF; border:4px solid #ddd; z-index:999; padding:8px; font-

size:13px; }

#popupContactClose{    background:url(http://3.bp.blogspot.com/-

V2A37T0PQ24/U3IuYpfg4DI/AAAAAAAAC_8/YzHEp7rFzSc/s1600/close.PNG) no-repeat;    width:25px;    height:29px;

display:inline;    z-index:3200;    position:absolute;    top:-15px;    right:-16px;    cursor:pointer;

text-indent: -99999px;}

#description {    color: #AAAAAA;    font-family: times New Roman;    font-size: 25px;    font-style: italic;

line-height:30px; }

#description img {    float: left;    height: 80px;    padding: 0 25px 0 10px;    width: 80px; }

#btntfollowForm {  padding: 15px; }

#btntfollowForm img {  border:none; }

#btntfollowForm p {  margin: 0 0 10px;}

#btntfollowForm input:not([type="checkbox"]){ width: 93%; margin-top: 10px;        margin-bottom: 20px;

padding: 10px 5px 10px 25px;  border: 1px solid rgb(178, 178, 178); -webkit-appearance: textfield; -webkit-

box-sizing: content-box;   -moz-box-sizing : content-box;       box-sizing : content-box; -webkit-border-

radius: 3px;    -moz-border-radius: 3px;         border-radius: 3px; -webkit-box-shadow: 0px 1px 4px 0px rgba

(168, 168, 168, 0.6) inset;    -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;         box-

shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; -webkit-transition: all 0.2s linear;    -moz-

transition: all 0.2s linear;      -o-transition: all 0.2s linear;   transition: all 0.2s linear; }

#btntfollowForm input:not([type="checkbox"]):active,

#btntfollowForm input:not([type="checkbox"]):focus{ border: 1px solid rgba(91, 90, 90, 0.7); background: rgba

(238, 236, 240, 0.2); -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;    -moz-box-shadow:

0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;         box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9)

inset;}

#btntfollowForm .button input{    background: none repeat scroll 0 0 #3D9DB3;    border: 1px solid #1C6C7A;

border-radius: 3px 3px 3px 3px;    box-shadow: 0 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 0 0 0 3px #FEFEFE, 0

5px 3px 3px #D2D2D2;    color: #FFFFFF;    cursor: pointer;    font-family: 'Arial Narrow',Arial,sans-serif;

font-size: 24px;    margin-bottom: 10px;    padding: 8px 5px;    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);

width: 30%;    float: right; }

#btntfollowForm .button input:hover{    background: #4ab3c6; text-decoration: none; }

#btntfollowForm .button input:active,

#btntfollowForm .button input:focus{ background: rgb(40, 137, 154); position: relative; top: 1px; border: 1px

solid rgb(12, 76, 87);   -webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;    -moz-box-shadow: 0px

1px 6px 4px rgba(0, 0, 0, 0.2) inset;         box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; }
.btntFollowFooter {  color:#222;  text-align: center;    font: 10px Tahoma, Helvetica, Arial, Sans-Serif;

padding: 7px 0;    margin-top: 80px;    text-shadow: 0px 2px 3px #555;    position: absolute;    width: 500px;

}

.btntFollowFooter a {    color: #222;    text-decoration: none; }

.btntFollowFooter a:hover {    color: #fff; }

<!--[if lt IE 7]>

#btnt-container a.btntCloseImg {    background:none;    right:-14px;    width:22px;    height:26px;

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://3.bp.blogspot.com/-

V2A37T0PQ24/U3IuYpfg4DI/AAAAAAAAC_8/YzHEp7rFzSc/s1600/close.PNG',sizingMethod='scale'); }

#btntfollowForm  input{ padding: 10px 5px 10px 32px;    width: 93%; }

#btntfollowForm  input[type=checkbox]{ width: 10px; padding: 0;}

<![endif]-->

</style>

<img alt="Subscribe" border="0" float="center" src="http://2.bp.blogspot.com/-

74BRtm82chU/U3IkWoqLESI/AAAAAAAAC_k/Fl5GWfxK84o/s1600/Subscribe+Via+Email.PNG" />

<img alt="email" border="0" src="http://1.bp.blogspot.com/-

MtuD6J3TCkU/U3IlM3m2t_I/AAAAAAAAC_s/mT_YKzqTw54/s1600/Mail.PNG" />Subscribe to our mailing list to get

latest updates to your email inbox...</div>
/* ---------------------------- Change Feedburner Name ------------------------------- */

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open

('http://feedburner.google.com/fb/a/mailverify?uri=SolveMyHow', 'popupwindow',

'scrollbars=yes,width=550,height=520');return true" target="popupwindow">

<input name="email" placeholder="Enter Your Email..." required="required" type="text" /><input name="uri"

type="hidden" value="SolveMyHow" /><input name="loc" type="hidden" value="en_US" />

/* ---------------------------- Change Feedburner Name Ends ------------------------------- */

<input type="submit" value="Subscribe" /></div>
</form>
</div>
<div class="btntFollowFooter">
Delivered by <a href="http://feedburner.google.com/" target="_blank">FeedBurner</a> | powered by <a

href="http://www.solvemyhow.com/" rel="dofollow" target="_blank">solvemyhow</a></div>
</div>
</div>
<script src="http://yourjavascript.com/24315621361/jquery.cookie.js" type="text/javascript">

</script>

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

Step 4 :- Now look for the comment

/* ---------------------------- Change Feedburner Name ------------------------------- */

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.co/fb/a/mailverify?uri=SolveMyHow', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">

<input name="email" placeholder="Enter Your Email..." required="required" type="text" /><input name="uri" type="hidden" value="SolveMyHow" /><input name="loc" type="hidden" value="en_US" />

/* ---------------------------- Change Feedburner Name Ends ------------------------------- */

Now, change highlighted part with your feedburner name.

Suppose this is my feedburner url :- http://feeds.feedburner.com/SolveMyHow

Step 5 :- Save the widget and close it.
Now view your blog.

That's it. You have successfully added the widget.

Must Read :-

So, this was all about adding email subscription popup widget in blogger blog. I tried to explain this tutorial in simple step by step process. Hope you found this tutorial informative and worth reading. Please share your reviews about this widget/plugin via comments. We love to hear it from you :)

Found this tutorial interesting ? Why not help us by sharing this tutorial with your social media friends. You can find lots of social media buttons on the extreme left side.

Also See :-

How to Hack Wifi Password in 2 Minutes

[Exclusive] Top 10 URL Shortener Websites To Earn Money

5 Free Google Keyword Ranking Checker Tools

Top 5 Fastest Free Online Backlink Checker Tools

How to Get Facebook Unlimited Likes and Comments on Facebook Status and pics

How To Hack WIFI Password Using Android Phone

Top 10 Android Apps To Hack WIFI Password Easily

Solve My How

How To Add Email Subscription Popup Widget In Blogger

Add Email Subscription Popup Widget :

0 comments:

Post a Comment