How To Add Email Subscription Form in Blogger #1

A box which brings high traffic to your blog. People just put their email address in an ordinary box and then click on the "Subscribe" button and then, they would get all your blog's new material right on their email's In box and if you have feedburner's summary feature enabled, they will come to your blog by reading an interesting heading on the reached email.

So today, I am going to tell you how to show a subscribe box on a blogger blog.  Force your blog's visitor to put their email on that ordinary box.

Subscribe box 

Let?s know, how to add it on your blogger blog:

Go to Blogger Dashboard > Template > Edit HTML

Now, you have to add some CSS (Cascade Styling Script) to make the subscribe box beautiful.

000000000000000000000000000000000000000000000000000000000000000000000000000

Search for ']]></b:skin>' on your template.
Paste the following CSS above ']]></b:skin>':
.newsletter-sm {
background:#fff;
width: 100%;height: 253px;
margin: 0;
padding: 20px;
}
.newsletter-sm form {
padding: 10px;
margin-top: -37px;
}
.newsletter-sm h3 {
color: #FFF;
font-family: algerian;
font-size: 24px;
font-weight: normal;
text-align: center;
padding: 10px;
text-shadow: 2px 2px 2px #000;
margin-top: -18px;
box-shadow: 0px 0px 5px 2px #000;
margin-right: -20px;
position: static;
margin-left: -20px;
margin-bottom: 10px;
background: #009EFF;
}
.text {
font-size: 14px;
color: #FFF;
margin-left: -20px;
padding-bottom: 28px;
margin-right: -20px;
background: #009EFF;
font-family: cursive;
line-height: 20px;
}
.newsletter-sm .fa {
float: left;
padding-left: 16px;
padding-right: 16px;
padding-bottom: 16px;
padding-top: 7px;
font-size: 140px;
}
.newsletter-sm .newsletter-input-sm {border: 0;
padding: 5px 10px;
width: 69%;
float: left;
height: 40px;
font-family: oswald;
color: #555;border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px;}
.newsletter-sm .newsletter-sm-bot{ background: #009EFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqWBbhvvN0PDJQ0jS610-mMsLxt4SFvSfFQlt-ToIOXxTDP5ehT1tZaISoPtsFi_1C1gv4aZf7GxlANHWwnGkZEGDxnSz4xNpem49hn2RRYLjvIU6mRGgVzoG4bBjKjP933WZOgeFfC0M/s1600/bg.png) no-repeat;
margin: 27px -30px 0px;
height: 64px;
padding-left: 16px;
padding-top: 16px;
}
.newsletter-sm .newsletter-button-sm {
float: right;
height: 50px;width:23%
display: inline-block;
text-shadow: 2px 2px 1px #000;
font-size: 16px;
font-family: oswald;
padding: 10px 22px;
position: relative;
color: #fff;
text-align: center;
margin-right: 16px;
background: #009EFF;
border: 1px solid #fff;
cursor: pointer;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.6);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 200ms ease-in;
-moz-transition: opacity 200ms ease-in;
transition: opacity 200ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog:target > div {
margin: 8% auto;
}
.modalDialog > div {
-webkit-transition: all 100ms ease-in;
-moz-transition: all 100ms ease-in;
transition: all 100ms ease-in;
width: 500px;
position: relative;
margin: 5% auto;
background: #fff;
min-height: 200px;
}
h2.signup {
background:#00aa9f;
border-bottom: 1px solid #008d84;
font-weight: normal;
text-align:center;
padding: 10px;
color:#fff;
font-size: 18px;
}
.close {
color: #888!important;
position: absolute;
top: 1px;
right: -40px;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 16px;
}
.close:hover { text-decoration:none; }
.close:hover { color:#555; }

000000000000000000000000000000000000000000000000000000000000000000000000000

Now, this is the time to add the main html that is required for this subscribe box.

Search for '</body>' and above it, paste following code:

000000000000000000000000000000000000000000000000000000000000000000000000000

<div class="modalDialog" id="signup">
<div>
<a class="close" href="#close" title="Close"><i class="fa fa-times"></i></a>
<div class="signup-container">
<div class="newsletter-sm">
<h3>Subscribe to Newsletter</h3>
<div class="text"><i class="fa fa-envelope"></i><br><div class="texts">Subscribe us to get all our juicy article fastly. You know how and where? Directly on your inbox! Just enter your nice and good looking email id below and click on subscribe button! After that, verify it through the verification email and start learning more!</div></div>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=tutorialplustricks', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<div class="newsletter-sm-bot">
<input class="newsletter-input-sm" name="email" placeholder="Enter Your Email" type="text">
<button class="newsletter-button-sm" type="submit">Subscribe</button>
</div>
<input name="uri" type="hidden" value="tntbystc">
</form>
</div>
</div>
</div>
</div>

000000000000000000000000000000000000000000000000000000000000000000000000000

Now, save your template.

Customization:

Replace tutorialplustricks with your feedburner username.

You can replace text by editing the highlighted code.
Now, almost everything is done. Whenever you wish to hyperlink a text, so that, the text will show a subscribe box when clicked, you have to use following piece of code:

<a href='#sign-up'>YOUR TEXT HERE</a>

You can use this to hyperlink on an image too! Just use below piece of code:

<a href='#signup'><img src='IMAGE URL GOES HERE' alt='IMAGE DESCRIPTION' title='IMAGE DESCRIPTION'/></a>

Done! You can check it by going on your blog and clicking the text or image for which you have used the above code.

Share on Facebook Share on Twitter Share on Google Plus

About Unknown

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.