Lorem ipsum dolor sit amet, consectetur adipiscing elit. Test link

Search Suggest

Responsive Newsletter Email Subscription Blogger Widgets

Newsletter Email Subscription Blogger Widgets
Email subscription widget for blogger will turn your readers into subscribers fast and easy. Have you added a blogger email subscription widget yet? You need to automate your readers to change them to your content marketing strategy through email marketing. Presently, thousands of bloggers are using Feed Burner email subscription service, But as for me i prefer mail chimp one click subscription. This is an excellent way to increase traffic to your website by embedding a subscribe to newsletter widget that tells the visitor you have more to offer. Actually, when you let your readers subscribe to your blog, they will get updates directly to their email inbox. That's when the returning visitors generate good SEO rank for your website.


Today I'm going to share to you a Blogger subscribe box widgets/gadgets with Name and Email filling box style. From which people can subscribe your blog to get your latest updates on their email account. 
A subscription box widget helps blog owners to grow their mailing list. That is probably the reason why, Most of the pro Bloggers are using unique and attractive email subscription box and they have lots of Subscribers.Believe me you that the more the subscribers, the more the views. The more the views, the more back-links you get. As you get more back-links, the more the SEO rank in search engines. Now i know you now know the impact of Email Newsletter Widgets in a blogger template.

Without much time, let me take you one to one to the top good looking responsive blogger newsletter email subscription widgets. I have labeled them with letters and hence making it easy for you to apply them easily to your preferred blogger blogs. Choose a color and design of the subscription widget that corresponds your blog design.

 The Number one Simple and Responsive newsletter widget is as below . Its a sidebar blogger subscription widget. Its well optimized to avoid loading time increase. The page insights will read the same even after employing the below widget. 

A. Stylish Gradual Email Subscribe Widget For Blogger

 The Number one Simple and Responsive newsletter widget is as below . Its a sidebar blogger subscription widget. Its well optimized to avoid loading time increase. The page insights will read the same even after employing the below widget. 


Email Subscribe Widget For Blogger Blog.

Widget Code.
<style>
/***** Email Subscription Widget For Blogger By https://joecalih.com *****/
//@media(max-width:400px) {.sbox{width:109%!important;}}
//@media(max-width:1024px) and (min-width:400px)  {.sbox{width:106.5%!important;}}
.sbox {background:#009abe;text-align:center;width:100%;}
.sbox span {color:#fff;font-family:roboto;font-size:27px;}
.sbox .small {font-size:18px;}
input.boxinput::placeholder {color:#fff;}
.sbox .hatespam {font-size:15px;}
.sbox .boxinput::placeholder {color:#fff;}
.sbox .boxinput {background:rgba(0,0,0,0.4);color:#fff;border:none;padding-top:13px;padding-bottom:13px;font-family:roboto;margin-bottom:10px;outline:none;transition:.3s;width:86%;text-align:center;border-radius:4px;}
.sbox .boxsubmit {box-shadow:0px 0px 31px 0px rgba(0,0,0,0.2);width:86%;text-align:center;padding-top:13px;padding-bottom:13px;background:#fff;outline:none;border:none;color:#009abe;font-family:roboto;cursor:pointer;border-radius:4px;}
.sbox .boxsubmit:active {background:rgba(0,0,0,0.6);color:#fff;}
.sbox {border-radius:8px!important;padding:0!important;border:none!important;}
.sbox .widget-content {margin:0!important;}
#sidebar-wrap .widget {overflow-x:hidden;}
.sbox {background:linear-gradient(135deg, #667eea 0%, #764ba2 100%)!important;width:100%;}
.sbox .boxsubmit {box-shadow:none!important;border-radius:2px!important;color:#764ba2!important;}
.sbox .boxinput {border-radius:2px!important;}
</style>
<div class='sbox wow rubberBand'>
<center>
<br /><span class='icon'><img height='auto' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge_san69bSalno_kGAqt7YgCOXHe5XHxvUMm-QroO_rZgM4wRFhfH10W-a6XqWk_2q2itofRIx_OJts6PUA1skdotsckQ6z9YfBhxVr3S9ys197skrNx95hHhOHif_djcTeh-gKfGIL2Q/s1600/email.png' width='150px'/></span><br/>
</center>
<span>Newsletter</span><br /><br />
<span class='small'>Get SEO secret tips newsletter directly in your inbox!</span><br /><br />
<center>
<form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&#39;https://feedburner.google.com/fb/a/mailverify?uri=Seoclive&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;); return true' target='popupwindow'><input class='boxinput' name='EMAIL' placeholder='Your Email Address' type='email' required/>
<input class='boxsubmit' type='submit' value='Submit'/><input name='uri' type='hidden' value='shoutersplanet'/>
<input name='loc' type='hidden' value='en_US'/></form><br />
<span class='hatespam'>Get Ranked Today</span><br /><br />
</center></div>

Adding To Blogger
  1. Go to Design > Page Elements.
  2. Click Add A Gadget.
  3. In Add A Gadget window, select HTML/Javascript .
  4. Copy the code below and paste it inside the content box.
  5. Save the gadget.
  6. Drag the gadget and reposition it under Blog Posts gadget.
  7. Click Save button (top right hand corner).

B. Email Subscription Widget With Social Buttons

Even the Blogger platform  provide the Email subscription widget for blogger but that's not much appealing as  considered in custom stylish email subscription box with social media integration.
This is one of the best subscription widgets for blogger.

custom stylish email subscription box with social media

Widget Code. 

<style type="text/css">
    .hbzsub {
        background-color: rgb(87, 98, 105);
        width: 100%;
        height: 100%;
        padding: 5px;
        box-shadow: 0px 0px 5px rgb(87, 98, 105);
    }
    .hbzform-inner {
        text-align: center;
        color: rgb(255, 255, 255);
        font: bold 16px "trebuchet MS","Tahoma";
    }
    .hbzemailform {
        width: 240px;
        margin: 10px auto;
    }
    #hbzemailbox {
        background-color: #798187;
        color: #FFF;
        width: 208px;
        border: 1px solid #697780;
        padding: 15px;
        text-align: center;
        height: 18px;
        box-sizing: content-box;
    }
    #hbzemailbutton {
        background-color: rgb(243, 93, 92);
        border: 1px solid rgb(215, 84, 83);
        color: rgb(255, 255, 255);
        width: 240px;
        font: bold 16px "trebuchet MS","Tahoma";
        padding: 15px;
        text-align: center;
        height: 50px;
        margin: 10px auto;
        cursor: pointer;
    }
    #hbzemailbutton:hover {
        background-color: #E64C4B;
        border: 1px solid #BF4A49;
    }
    .hbzsignup-form {
        margin-top: 15px;
    }
    .hbzsocial-icons {
        overflow: hidden;
        text-align: center;
        border-bottom: 1px solid rgb(133, 133, 133);
        width: 230px;
        display: block;
        margin: 20px auto;
    }
    .hbzsocial-icons ul {
        margin: 0px auto !important;
        text-align: center;
        padding: 0px !important;
        display: inline-block;
    }
    .hbzsocial-icons ul li {
        background: transparent none repeat scroll 0% 0% !important;
        border: medium none !important;
        float: left;
        list-style-type: none !important;
        padding: 0px !important;
        margin: 0px 2px !important;
    }
    .hbzsocial-icons ul li::before,
    .hbzsocial-icons ul li::after {
        display: none !important;
    }
    .hbzsocial-icons ul li a, .hbzsocial-icons ul li a:hover {
        background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA6BdfeVXc2KYK5MZzl09nk87Zqmj_hnWnZTU9KZWDL3XTWsbGVflj6GbjeJYrvVmZQ-z1kYVYbsb-NyTO983Rcn7TvPS5nu-lwrRLnYzVk6VPbfRVhil6a4j6oo18JxNAf8KhH4QOZ33I/s1600/sprite_32x32.png") no-repeat scroll 0 0;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        display: block;
        height: 34px;
        overflow: hidden;
        text-indent: -999px;
        transition: all 0.25s linear 0s;
        width: 34px;
    }
    .hbzsocial-icons ul li.social-facebook a {
        background-position: -62px 1px;
    }
    .hbzsocial-icons ul li.social-facebook a:hover {
        background-color: #3b5998;
    }
    .hbzsocial-icons ul li.social-twitter a {
        background-position: -254px 1px;
    }
    .hbzsocial-icons ul li.social-twitter a:hover {
        background-color: #00aced;
    }
    .hbzsocial-icons ul li.social-gplus a {
        background-position: -95px 0px;
    }
    .hbzsocial-icons ul li.social-gplus a:hover {
        background-color: #dd4b39;
    }
    .hbzsocial-icons ul li.social-pinterest a {
        background-position: -159px 1px;
    }
    .hbzsocial-icons ul li.social-pinterest a:hover {
        background-color: #cb2027;
    }
    .hbzsocial-icons ul li.social-rss a {
        background-position: -190px 0px;
    }
    .hbzsocial-icons ul li.social-rss a:hover {
        background-color: #F87E12;
    }
    </style>
    <div class="hbzsub">
    <div class="hbzsocial-icons">
      <ul>
       <li class="social-facebook"><a href="[Fb url]" target="_blank" title="Facebook">Facebook</a></li>
       <li class="social-twitter"><a href="[Twitter url]" target="_blank" title="Twitter">Twitter</a></li>
       <li class="social-gplus"><a href="[Google+ url]" target="_blank" title="Google+">Google+</a></li>
       <li class="social-pinterest"><a href="[Pinterest url]" target="_blank" title="Pinterest">Pinterest</a></li>
       <li class="social-rss"><a href="[RSS url]" target="_blank" title="RSS">RSS</a></li>
      </ul>
     </div>
     <div class='hbzsignup-form'>
      <div class='hbzform-inner'>
       <h4>Subscribe to my Newsletter</h4>
      </div>
      <div class='hbzemailform'>
       <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=[Your Blog uri]&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
        <input name='uri' type='hidden' value='[Your Blog uri]'/>
        <input name='loc' type='hidden' value='en_US'/>
        <input id='hbzemailbox' name='email' required='' type='text' placeholder='Your Email'/>
        <input id='hbzemailbutton' title='' type='submit' value='Subscribe'/>
       </form>
      </div>
     </div>
    </div>

Configuration The Subscription Box In Blogger..

  • Replace [Your Blog uri] with Your blog Uri which is basically your Feed title. You can get it by visiting http://feedburner.google.com and then navigate to Publicize > Email Subscription and find your uri value in given box. For eg: http://feedburner.google.com/fb/a/mailverify?uri=Seoblur and <input name='uri' type='hidden' value='Seoblur'/>
  • Replace [Fb url] with your Facebook page URL. For eg: https://www.facebook.com/seoblur
  • Replace [Twitter url] with your twitter page URL. For eg: http://www.twitter.com/seoblur
  • Replace  [Google+ url] with your google+ page or account URL. For eg: https://plus.google.com/#
  • Replace [RSS url] with your RSS URL. For eg: http://feeds.feedburner.com/Seoblur
  • Replace [Pinterest url] with your pinterest URL.
  • Replace [Twitter Username] with your twitter account username. For eg : @Seoblur_
  • Replace [Fb Page Name] with your Facebook Page Name. For eg : seoblur
Note: Minimum Sidebar width required - 230px

C : Best Email Responsive

Stylish & Reponsive Blogger Newsletter Email Subscription Widgets

<style type='text/css'>#sidebar-subscribe-box {
    background: url(<a class="vglnk" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE_gE2M8EMXsG1l0WUww7kmLwn4rAOnMdHz5pbNttMrw3YtabslwZF6MoIXvaIduOFbUMN7YfQGb5HJpVCP9egR6xe1Gqf2fWIwJgMoPhtAe97vkiGTf_3QsACBtHoQ-EdJ8D4XMEZv8C2/s1600/colored-strip.png" rel="nofollow"><span>http</span><span>://</span><span>1</span><span>.</span><span>bp</span><span>.</span><span>blogspot</span><span>.</span><span>com</span><span>/-</span><span>IyEBRR8yOQQ</span><span>/</span><span>UBhYdBd23PI</span><span>/</span><span>AAAAAAAAFTU</span><span>/</span><span>aeW3JdAlrCs</span><span>/</span><span>s1600</span><span>/</span><span>colored</span><span>-</span><span>strip</span><span>.</span><span>png</span></a>) repeat scroll 0 0 transparent;
    border: 1px solid #aaa;
    border-radius: 3px;
    padding: 3px 0;
}
.sidebar-subscribe-box-wrapper {
    background: url(<a class="vglnk" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmcZfApMqqyvLwocACvH89abTRnY7oAZC7uXv1ErTrloBv_tu7DbGhTFkx2hQlzAoqXncXKvPd2-yp3sRT_GzvoOXG2SIfgxcuf1fEiBVJmKVwnqNXI4mb1XJ4tcwkFBHsb7jT4Dg1leff/s1600/bg-pattern.png" rel="nofollow"><span>http</span><span>://</span><span>2</span><span>.</span><span>bp</span><span>.</span><span>blogspot</span><span>.</span><span>com</span><span>/-</span><span>tUlo5p5gP8o</span><span>/</span><span>UBhYciGNgwI</span><span>/</span><span>AAAAAAAAFTM</span><span>/</span><span>x22pIuNLVPw</span><span>/</span><span>s1600</span><span>/</span><span>bg</span><span>-</span><span>pattern</span><span>.</span><span>png</span></a>) repeat scroll 0 0 #f7f7f7;
    color: #111;
    font-size: 14px;
    line-height: 20px;
    padding: 1px 20px 10px;
    text-align: center;
    text-transform: uppercase;
}
.sidebar-subscribe-box-form {
    clear: both;
    display: block;
    margin: 10px 0;
}
form.sidebar-subscribe-box-form {
    clear: both;
    display: block;
    margin: 10px 0 0;
    width: auto;
}
.sidebar-subscribe-box-email-field {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    background: #fff url(<a class="vglnk" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3KlCLPPpr2zaoutMPDb8SChU_CbN3QMhVfaaCUthDQUt2wFcW1qOXAoK_SPPN4eBT-bpxzuRibt-t_-NOBJOSGvr2xezGTPaLCavmB3RaxR4a8vk6h9ryOtljzyAeQEC-DqtoUsdzEdl8/s1600/sprites.png" rel="nofollow"><span>http</span><span>://</span><span>1</span><span>.</span><span>bp</span><span>.</span><span>blogspot</span><span>.</span><span>com</span><span>/-</span><span>JMYdQsIa9WQ</span><span>/</span><span>UDZqxqqrTEI</span><span>/</span><span>AAAAAAAAFho</span><span>/</span><span>AocEv70U8K8</span><span>/</span><span>s1600</span><span>/</span><span>sprites</span><span>.</span><span>png</span></a>) no-repeat 0 -27px;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #444;
    margin: 0 0 15px;
    padding: 10px 40px;
    width: 68%;
}
.sidebar-subscribe-box-email-button {
    background: #09f;
    border: 1px solid #007fff;
    box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;
    color: #fff;
    cursor: pointer;
    font-family: verdana;
    font-weight: 700;
    padding: 10px;
    text-shadow: 1px 1px 0 rgba(0,0,0,.4);
    text-transform: uppercase;
    width: 100%;
}
.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus {
    background: #1ca4ff;
}
.sidebar-subscribe-box-email-button:active {
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.5) inset;
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.5) inset;
    box-shadow: 0 1px 4px rgba(0,0,0,0.5) inset;
    outline: 0;
}
iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table {
    width: 100%;
}
embed {
    border-radius: 3px;
    -moz-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    background: #FFF;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    margin: 0;
    padding: 4px 4px 4px;
}
#footer-section {
    background: #f5f5f5 url(<a class="vglnk" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzTqrGd9tOyqYDdmwPNxt3ULMQKzo8gKp4Jb0_1joRUy9VgIJPftHRiuSAoH3JB3qdJsmWWWZpVB0JoT-ruNPGr9LNiZkgCkV7IsTf9bC-9c_DHQHptL54hkQR9Pv0HN0JyL7y7OaJyXTE/s0/bg-pattern.png" rel="nofollow"><span>http</span><span>://</span><span>1</span><span>.</span><span>bp</span><span>.</span><span>blogspot</span><span>.</span><span>com</span><span>/-</span><span>n5s9Bu0JCgg</span><span>/</span><span>UA</span><span>_</span><span>AfQ5qLkI</span><span>/</span><span>AAAAAAAAFMU</span><span>/</span><span>G9FOuh4SP7k</span><span>/</span><span>s0</span><span>/</span><span>bg</span><span>-</span><span>pattern</span><span>.</span><span>png</span></a>) repeat top left;
    border-top: 1px solid #aaa;
    box-shadow: inset 0 4px 6px -3px #aaa;
    font-family: cambria;
    font-size: 14px;
    height: 100px;
    margin: 10px -30px 5px;
    padding: 0 30px;
    text-align: center;
    width: 100%;
}</style>
<div id="sidebar-subscribe-box"><div class="sidebar-subscribe-box-wrapper"><p>Subscribe to our email newsletter & receive updates right in your inbox.
</p><div class="sidebar-subscribe-box-form"><form action="<a class="vglnk" href="http://feedburner.google.com/fb/a/mailverify?uri=Joecalih" rel="nofollow"><span>http</span><span>://</span><span>feedburner</span><span>.</span><span>google</span><span>.</span><span>com</span><span>/</span><span>fb</span><span>/</span><span>a</span><span>/</span><span>mailverify</span><span>?</span><span>uri</span><span>=</span><span>labstrike</span></a>"
class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('<a class="vglnk" href="http://feedburner.google.com/fb/a/mailverify?uri=Joecalih" rel="nofollow"><span>http</span><span>://</span><span>feedburner</span><span>.</span><span>google</span><span>.</span><span>com</span><span>/</span><span>fb</span><span>/</span><span>a</span><span>/</span><span>mailverify</span><span>?</span><span>uri</span><span>=</span><span>labstrike</span></a>',
'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="labstrike" /><input name="loc" type="hidden" value="en_US" />
<input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Enter your email address :)"/>
<input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Subscribe Now!" /></form></div></div></div>

D: Email Subscription box widget | Letter Style

Email Subscription box widget
<style type=”text/css”>
#LS-Newsletter4-Box {
background: url(http://1.bp.blogspot.com/-
65PvPzNlUCo/UEEijEFGUdI/AAAAAAAALTI/5UGflvDEMJ8/s1600/Newsletter-5.png)no-repeat scroll center center
transparent;
height: 299px;
width: 408px;
}
form#LS-Newsletter4-Form {
display: block;
margin: 0;
padding-left: 71px;
padding-top: 63px;
}
form#LS-Newsletter4-Form #s {
background: transparent;
border: none;
color: #444242;
font-family: georgia;
font-size: 15px;
font-style: italic;
height: 28px;
margin-top: 37px;
vertical-align: top;
width: 275px;
outline:0px;
position: relative;
left: -25px;
}
form#LS-Newsletter4-Form #d {
background: transparent;
border: none;
color: #444242;
font-family: georgia;
font-size: 15px;
font-style: italic;
height: 28px;
margin-top: 38px;
vertical-align: top;
width: 275px;
outline:0px;
position: relative;
left: -25px;
}
form#LS-Newsletter4-Form #sbutton {
background: transparent;
border: none;
cursor: pointer;
height: 43px;
position: relative;
left: -36px;
top: 25px;
width: 144px;
border-radius: 5px;
}
</style>
<div id=”LS-Newsletter4-Box”>
<form id=”LS-Newsletter4-Form” action=”#” method=”post”>
<input id=”d” name=”name” value=”Enter Your Name”
onfocus=’if (this.value == “Enter Your Name”) {this.value = “”}’
onblur=’if (this.value == “”) {this.value = “Enter Your Name”;}’/>
<input type=”email” id=”s” name=”email” value=”Enter Your E-Mail”
onfocus=’if (this.value == “Enter Your E-Mail”) {this.value = “”}’
onblur=’if (this.value == “”) {this.value = “Enter Your E-Mail”;}’/>
<input type=”image” src=”http://3.bp.blogspot.com/-D4DL8TMRtd0/UCuQt-
AVn3I/AAAAAAAAJz8/K1sjzXIxyQk/s1600/blank.gif” id=”sbutton”/>
</form>
</div>

 E. Blogger Newsletter Email Subscription Widgets  

The email subscribers are the good source of traffic, and ultimately the more traffic helps in more revenue. But ever you have wondered that you can increase the number of subscribers of your blog. Yes, you read the right thing, you can increase the number of subscribers of your blog by 2 times to 5 times by changing the location of email subscription box.

Blogger Newsletter Email Subscription Widgets

 

<style>
#responsiveness {
padding: 15px 25px 20px;
line-height: 35px;
text-align: center;
background: none repeat scroll 0% 0% #1E1E1E;
margin: -15px;
border-radius: 3px;
}
#responsiveness h5 {
font-size: 17px;
font-weight: 700;
font-family: ‘PT Sans’,sans-serif;
color: #FFF;
padding: 0px;
text-transform: uppercase;
line-height: 1.2;
margin: 10px 0px 15px;
letter-spacing: 0.01em;
text-align: left;
}
input.placer {
color: #333;
padding: 15px;
font-size: 14px;
font-family: PT Sans,sans-serif;
border: 1px solid #EEE;
transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
margin: 10px auto 0px;
border-radius: 3px;
width: 89%;
}
input.button {
background-color: #BA1A00;
color: #FFF;
font-weight: 400;
cursor: pointer;
border-radius: 4px;
text-transform: uppercase;
font-family: PT Sans,serif;
padding: 10px 15px;
border: medium none;
font-size: 16px;
width: 100%;
margin: 15px auto 0px;
}
input.button:hover{
background: #FFF;
color: #333;
}
</style>
<link href=’http://fonts.googleapis.com/css?family=PT+Sans:400,700′ rel=’stylesheet’ type=’text/css’/>
<div id=’responsiveness’>
<p style=” line-height:0px; font-size:7px; font-weight:bold; text-align:right”><a style=”color:#D3D3D3;” href=”http://www.joecalih.com”>widgets</a></p>
<h5>Hume Email Par Subscribe Kare</h5><form action=’http://feedburner.google.com/fb/a/mailverify’ method=’post’target=”popupwindow” onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=Joecalih‘, ‘popupwindow’, ‘scrollbars=yes,width=550,height=550′);return true”>
<input  class=”placer” type=’text’  name=’email’ placeholder=’enter your name’ />
<input  class=”placer” type=’text’  name=’email’ placeholder=’enter your email id’ />
<input type=”hidden” value=”supportmeindia” name=”uri”/>
<input type=”hidden” name=”loc” value=”en_US”/>
<input value=”Subscribe Now” class=”button” type=”submit” />
</form>
</div>

F. Blogger Subscription Box Below Posts 

Blogger Subscription Box Below Posts

Add it to Blogger

  1. Go to Blogger > Design > Edit HTML
  2. Backup your template
  3. Check the "Expand Widget Template" box
  4. Search for this, 
<data:post.body/>
      5.   Just below it paste this code,
<style>      
#mbt-sub-box{background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#1a2638));;border:1px       
solid #1A2638;border-radius:10px; margin-bottom:10px;padding:10px;text-align:center;background: -moz-linear-gradient(top, #333, #1a2638)}
#mbt-sub-box h1{margin-top:5px; color:#FFF;font-family:georgia;font-size:25px;margin-bottom:5px;padding:0;text-shadow:0 2px 3px #000;line-height:35px}
#mbt-sub-box input{background: -moz-linear-gradient(center top , #FFFFFF, #EFEFEF) repeat scroll 0 0 transparent;border:medium none;border-radius:10px 10px 10px 10px;font-size:14px;padding:10px;text-shadow:1px 1px 0 #FFF;width:280px; color:#666; font-family:georgia; margin-bottom:5px;}
#mbt-sub-box .submit{background: -webkit-gradient(linear, left top, left bottom, from(#369a18), to(#205f0d));background: -moz-linear-gradient(center top , #369A18, #205F0D) repeat scroll 0 0 transparent;color:#FFF;cursor:pointer;font-weight:bold;margin-left:20px;text-shadow:0 1px 2px #000;width:120px; font-family:georgia; margin-left:5px;}
#mbt-sub-box .submit:hover{background: -moz-linear-gradient(center top , #46B725, #205F0D) repeat scroll 0 0 transparent}
#mbt-sub-box .submit:active{background: -moz-linear-gradient(center top , #46B725, #205F0D) repeat scroll 0 0 transparent}      
</style>
<b:if cond='data:blog.pageType == &quot;item&quot;'>      
<div id='mbt-sub-box'><h1>Subscribe To Get FREE Tutorials!</h1><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=seoblur&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><center> <input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter Your Email Address...&quot;;}' onfocus='if (this.value == &quot;Enter Your Email Address...&quot;) {this.value = &quot;&quot;}' size='30' type='text' value='Enter Your Email Address...'/> <input name='uri' type='hidden' value='tntbystc'/> <input name='loc' type='hidden' value='en_US'/> <input class='submit' type='submit' value='Subscribe'/></center></form></div>       
</b:if>  
  • Now replace http://feedburner.google.com/fb/a/mailverify?uri=joecalih with your Feedburner Email Feed link. Get it by visiting your feedburner account then you  navigate to Publicize and then to Email Subscriptions.
  • Replace Seoblur with your feed title. It appear at the end of your feed link. In my case it is http://feedburner.google.com/fb/a/mailverify?uri=seoblur
       6.    Save your template and you are all set!


Thank You for being Part of this good article.I hope that i have impacted some good SEO information that can help you Design your Blogger Blog Best for ranking. Incase you face any difficulty while implementing the following fields please reach me by Commenting bellow Or Contact Me.