Email Subscription Widget For Blogger Blog

Newsletter is a great option when you want to engage with your readers through email medium. Visitors can subscribe to your blog to get email updates on daily basis if they like your blog content. In this tutorial I will show you how to add a premium look email subscription widget to your blogger blog.

You can add this widget on your blog/website sidebar in few steps. Follow the given below steps. I am providing a live demo for this widget, Click the below button:


Live Demo Recommend For You:

• Beautiful Email Subscription Box V2 In Blogger Blog
• Thesis Email Subscription Widget To Your Blogger Blog
• Elegant Email Subscription/Signup Widget For Blogger Blog

How To Add Email Subscription Widget To Blogger Blog

• Go To Blogger Dashboard >> Layout >> Click On Add a Gadget
• Select HTML/JavaScript Gadget >> Copy/Paste The Following Code Inside That Gadget.

<style>/* Begin: Sidebar */

.sideTitle {

    color: #414141;

    font-size: 14px;

    font-weight: bold;

    height: 17px;

    padding: 5px 6px;

}

#sidebarA {

    background: #F0F0F0 url("http://1.bp.blogspot.com/-RK_sNJocLIE/TzJ2OPRkk1I/AAAAAAAAA9M/hi6VCdeSyt4/s1600/sideBg.png") left top repeat-x scroll;

    border-radius: 5px;

    float: right;

    margin: 0 0 15px;

    padding: 6px 6px 10px;

    width: 288px;

    box-shadow: rgba(0,0,0,0.8) 0px 4px 4px -4px;

    border: 1px solid #d5d5d5;

}

#sidebarA ul {

    background: url("http://1.bp.blogspot.com/-No-dIvj_Sto/TzJxU0RVuJI/AAAAAAAAA9A/wuZCVDS0A4M/s1600/newsletterBg.png") no-repeat scroll 0 bottom transparent;

    border-radius: 5px 5px 5px 5px;

    color: #424242;

    margin: 0;

    padding: 15px 6px 10px;

}

#sidebarA ul form p {

    margin: 0;

    text-align: center;

}

#sidebarA #emailSubs input#inputText {

    -moz-border-bottom-colors: none;

    -moz-border-image: none;

    -moz-border-left-colors: none;

    -moz-border-right-colors: none;

    -moz-border-top-colors: none;

    background: #fff;

    border-color: #969696 #CCCCCC #E7E7E7;

    border-left: 1px solid #CCCCCC;

    border-right: 1px solid #CCCCCC;

    border-style: solid;

    border-width: 1px;

    color: #999999;

    font-family: Georgia,"Times New Roman",Times,serif;

    font-style: italic;

    height: 32px;

    margin: 0 auto 15px;

    outline: none;

    text-align: center;

    width: 250px;

}

#sidebarA #emailSubs button#inputButton {

    -moz-transition-duration: 0.3s;

    background-clip: padding-box;

background: #95cc3e; /* Old browsers */

/* IE9 SVG, needs conditional override of 'filter' to 'none' */

background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzk1Y2MzZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxZmExMDEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

background: -moz-linear-gradient(top,  #95cc3e 0%, #1fa101 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#95cc3e), color-stop(100%,#1fa101)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top,  #95cc3e 0%,#1fa101 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top,  #95cc3e 0%,#1fa101 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top,  #95cc3e 0%,#1fa101 100%); /* IE10+ */

background: linear-gradient(top,  #95cc3e 0%,#1fa101 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#95cc3e', endColorstr='#1fa101',GradientType=0 ); /* IE6-8 */

border: 1px solid #1E9B01;

border-radius: 3px 3px 3px 3px;

box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.2) inset;

color: #FFFFFF;

cursor: pointer;

display: inline-block;

font: 18px/20px Tahoma,Geneva,sans-serif;

margin: 0 0 0 70px;

padding: 5px;

text-align: center;

text-shadow: 0 0 0 transparent, 1px 1px 0 rgba(0, 0, 0, 0.1);

width: 180px;

}

#sidebarA #emailSubs button#inputButton:hover {

background: #95cc3e; /* Old browsers */

/* IE9 SVG, needs conditional override of 'filter' to 'none' */

background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzk1Y2MzZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2MmE5MzEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

background: -moz-linear-gradient(top,  #95cc3e 0%, #62a931 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#95cc3e), color-stop(100%,#62a931)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top,  #95cc3e 0%,#62a931 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top,  #95cc3e 0%,#62a931 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top,  #95cc3e 0%,#62a931 100%); /* IE10+ */

background: linear-gradient(top,  #95cc3e 0%,#62a931 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#95cc3e', endColorstr='#62a931',GradientType=0 ); /* IE6-8 */

    cursor: pointer;

}

#sidebarA #emailSubs p#newsRSS {

font-size: 13px;

margin: 10px 40px 0;

text-align: right;

}</style>

<aside id='sidebarA'>

<h2 class='sideTitle'>Welcome To Newsletter</h2>

<ul>

<hi id='emailSubs'>

<div>

<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&#39;http://feedburner.google.com/fb/a/mailverify?uri=BlogsDaddy&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true' style='text-align:center;' target='popupwindow'>

<p>

<input id='inputText' name='email' onblur='if(this.value == &#39;&#39;) { this.value=&#39;Enter Your Email Address&#39;; }' onclick='if(this.value == &#39;Enter Your Email Address&#39;) { this.value=&#39;&#39;; } doOpen();' type='text' value='Enter Your Email Address'/>

</p>

<input name='uri' type='hidden' value='BlogsDaddy'/>

<input name='loc' type='hidden' value='en_US'/>

<button class='gradient' id='inputButton' type='submit' value='Subscribe'>Subscribe now!</button>

<p id='newsRSS'>Or subscribe via <a href='http://feeds.feedburner.com/blogsdaddy' target='_blank'>RSS</a>

</p>

</form>

</div>

</hi>

</ul>

</aside>

Customization: Replace The Yellow Highlighted Feedburner Username With Your Own.

• Save The Gadget and Its All Done.

You May Like To Read:

• Stylish Email Subscription Box With Social Media
• Add 'Email Newsletter' Widget Under Every Blogger Blog Post

Please Like, Share, Follow and Subscribe Us. If you are facing any problem with implementing the codes just drop your comment below. We are ready for help. Stay connected with us. God Bless :)

Author - Gagan Masoun is the owner of Blogs Daddy Blog.Gagan lives in India, has been blogging since 2010 and writing Blogs Daddy Blog since 2011.You can find him in the usual social networks.