5 Ways To Show Email Subscription Form in Blogger 2016

Hey Whats Up Guys! Do you know what a Email subscribe box or Subscription Form is? 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 Inbox and if you have feedburner's summary feature enabled, they will come to your blog by reading an interesting heading on the reached email.One of our user ask me to tell about it.SO today I gonna going to show you the 6 best ways to show a subscribe box on a blogger blog.

SO Let start it below:

5 Ways To Show Email Subscription Form in Blogger

1.Subscribe box from hyperlinked text:

Its like hyperlinking a text but instead of a url, we'll put a subscribe box's link on it that will show a nice subscribe box when clicked. When your blog's visitors will click the hyperlinked text, a small beautiful and light weight subscribe box will appear with a subscription teaser and of course! with a subscribe box and a subscribe button. You can use this on your blog's header and hyperlink a text like 'Subscribe Us' so that, when a blog's visitor click the 'Subscribe Us' text, a small box will appear and ask the email of the visitor.So first see its Demo below:

See DEMO Here

After watching the demo if you like this then follow the give steps to add it in your blog:

1.Go to blogger Dashboard>>Template.

2.Click on Edit HTML.

3.Now search for ]]></b:skin> tag and paste the given code just above it.

.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/AVvXsEiigWxkppeXYjxSu6uiI9PfzWkN2_JLRuWFy7fvk7UhH5VHFJxegAL_3e7b3GE-mvBpSbxl0F4_7C9QviWhR831Zfjb6A0g0tBOz3YFLiZli_-23qUXquKwjDaaR2G1jt7XJsBIgRfAt2U/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; }

4.Now add the main HTML code in template.

5.Search for </body> tag and paste just above it.

<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=tntbystc', '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>

6.Now Save your Template.

Must replace the following things:

1.Replace tntbystc with your feedburner username.

2.You can replace text by editing the yellow highlighted code.

How to hyperlink text to show the subscribe box:

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

Friends that's all Done!!!!

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

2.Subscribe box from hyper-linked and floating images:

Instead of hyper-linking a text, why not we hyperlink a floating image? This will attract your visitor's eyes too! This time, an floating image will appear at the left-bottom or right-bottom or left-top or right-top of the page. When a visitor click on that image, a nice subscribe box will appear teasing them to put their email in the box!

Let see its Demo below:

See DEMO Here

After watching the demo if you like this then follow the give steps to add it in your blog:

1.Go to blogger Dashboard>>Template.

2.Click on Edit HTML.

3.Now search for ]]></b:skin> tag and paste the given code just above it.

#subscribe-button {
float: left;
position: fixed;
bottom: 5%;
left: 0;
z-index: 999;
}

#subscribe-widget {
display: none;
}
/* Overlay */
#mbt-overlay {
background-color: #000;
}
/* Container */
#mbt-container {
height: 350px!important;
width: 63%!important;
min-height: 350px;
min-width: 500px;
color: #222;
background-color: #fff;
border: 4px solid #ddd;
}

#mbt-container .mbt-data {
padding: 8px;
}

#mbt-container a.mbtCloseImg {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV0ewcULaI6FZlOfL_c0-z8hk6BHpzfbHtoa186Sx-fdgIfzfmme_V2pVEJ9MRb5obj2-NAp5M3bqzrPWBDrECkxj0MnntjSwmGTlraXplOIp3eJdsHRt_kN0A7VwJMNlILEwbPqUt0Zpx/s1600/mbt-close-button.png) no-repeat;
width: 25px;
height: 29px;
display: inline;
z-index: 3200;
position: absolute;
top: -15px;
right: -16px;
cursor: pointer;
}
.subscribeheader {
padding: 5px;
padding-left: 21px;
text-shadow: -3px -2px 5px #000;
box-shadow: 2px 2px 11px 1px #000000;
background: #FF8100;
color: rgba(255, 255, 255, 1);
padding-top: 11px;
border-radius: 11px;
text-rendering: optimizeSpeed;
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
margin-bottom: 30px;
letter-spacing: 4px;
text-align: center;
font-family: monotype corsiva;
border: 2px dashed #FFF;
font-size: 50px;
}
#description {
color: #AAAAAA;
font-family: times New Roman;
font-size: 25px;
font-style: italic;
float:left;
line-height: 34px;
}

#description img {
float: right;
height: 100px;
padding: 0 25px 0 10px;
width: 100px;
}

#mbtfollowForm {
padding: 15px;
}

#mbtfollowForm p {
margin: 0 0 10px;
}
input[type="submit"] {
background: #FA9227;
box-shadow: 2px 2px 1px 1px #838383!important;
width: 25%!important;
padding-left: 0px!important;
margin-left: 17px;
}
#mbtfollowForm input:not([type="checkbox"]) {
width: 67%;
margin-top: 20px;
margin-bottom: 20px;
font-family:oswald;
height:33px;
float:left;
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;
}

#mbsfollowForm input:not([type="checkbox"]):active, #mbsfollowForm 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;
}

4.Now add the main HTML code in template.

5.Search for </body> tag and paste just above it.

<div id="subscribe-button">
    <a class="subscribe" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZKTXHPLnAiL0Ec4v4jDhr86ajc-EF37k8BYN9_E92DxEiCL8xZTXAtceI4XMuMV4ZI-xlsmSqGcupPNeNXOwlQhtc9h4v9DjC8rXHiwVRKmRAZbmbUlcZHmZmxCmYEi_m_nq0mYqAZGHQ/s1600/hb-email-icon.png" alt="subscribe" /></a>
</div>
<div id="subscribe-widget">
    <div id="mbtfollowForm">
<div class="subscribeheader">Subscribe Us</div>
<div id="description">
<img alt="email" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyOi6TpyvXXyvkUbK_CjvoXN7-xoICHtGQFul7itgRxZ8WEpNhamzIpwHRoYd1KGI6CK5ogCv62y9aLXgoclMyE-HEjTjTKEv7D6XIFNJfq1n3r5JJi8w8rXjdotiu1dtb_Z7lojj7PKYh/s1600/hb-email-icon1.PNG">Subscribe to our mailing list to get the updates to your email inbox... We can't wait more to have your email in our subscribers email list. Just put your nice email in below box:</div>
        <form
        action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=tntbystc', '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="tntbystc" />
            <input name="loc" type="hidden" value="en_US" />
            <div class="button">
                <input type="submit" value="Subscribe" />
            </div>
            </form>
    </div>
</div>
<script src="https://googledrive.com/host/0B8acxOz46qBZckxsanR6Rm1KTms" type="text/javascript"></script>
<script type="text/javascript">
    jQuery(function (a) {
        a("#subscribe-button .subscribe").click(function (b) {
            a("#subscribe-widget").modal();
            return false
        })
    })
</script>

6.Now Save your Template.

Must replace the following things:

1.If you want that image to be displayed in the top of the page, then change bottom with top.

2.You can replace text by editing the yellow highlighted code.

3.Replace tntbystc with your feedburner username.

3.Subscribe box when visitors going exit the page

Yes! If visitor has enjoyed your articles, he will surely subscribe to your blog if he get a nice subscribe box in front of him. So, its a good idea to show a subscribe box when your blog's visitor goes to exit from a page. This can be done by following all steps of method 2. The only thing you have to do different is-

1.After modifying your settings, Go to Behavior tab from the widget creator.

2.Choose & tick the when the user is leaving the website?

Click on when the user is leaving the website

3.Click on OK button and you have successfully done it!!!!!

4.Subscribe box on floating hidden frame

Did you ever seen floating Facebook like box near scroll bar?. Yeah! why not. floating Facebook like box is today one of the most famous & lovable widget of bloggers. Today, we are going to tell you a widget which works same as that Facebook like box but the difference is, this time, it is floating subscribe box.

Let see its demo below:

See DEMO Here

After watching the demo if you like this then follow the give steps to add it in your blog:

1.Go to blogger Dashboard>>Layout.

2.Click on Add a Gadget>> HTML/Java Script.
3.Paste the given code in it.

Must replace the following things:

1.Replace tntbystc with your feedburner username.

3.Subscribe box pop up after a few seconds:

Nowadays, this one of the most common way to show a subscription box in a blogger blog. Many third party tools are providing this widget for free. One of the best tool that provide the pop up email subscription tool is GetSiteControl. Let's see how to add this:

1.Go to GetSiteControl sign up page

2.Sign up by filling the fields (email, passwords and website) and click on red 'Sign up for free' button.

3.On next page, click on that green 'Create Widget' button and choose 'Subscribe' from the dropdown.

Click on Create Widget

4.Choose and modify your settings while creating the Subscribe Widget and at last, click on 'OK' button.

5.On the next page, click on 'Activate Now' button, So that, it will activate the subscribe widget.

6.Now, are you able to see a red colored bar?

On the next page, four or five line JavaScript would be given. Copy that and place in on your blog's template before '</body>'

Copy the code and place it above </body>

7.Click on that black ?Install? button.

8.Now, just look at the top bar. Their, click on 'Site Settings':

9.After clicking on 'Site Setting', you will see a Mail Chimp option on the screen. On the given box, put your Mail Chimp's API key, click on Connect button.

And friends we have done it successfully Done it!!!!!

So these are the best five ways to show e-mail subscription form in blogger.

I hope that after reading this article you easily know 5 Ways To Show Email Subscription Form in Blogger.If you like this article share it on social media to help other blogger friends.

Let me know you if you have any problem regarding to this article.If you have any problem you can ask me in comment box.Thanks for reading this article.Stay tuned for more lectures.