Add 'Tech Email Subscription Widget with blue background' for blogger

There are many ways to approach visitors and converting them to loyal subscribers. First basic thing is to convert visitor to subscriber you need attractive subscription widget where they can easily enter their email address to get updates to their email address directly. Here after sharing lots of email subscription widgets like popup email subscription widget, KNW subscription widget, hover based email subscription widget, simple subscription widget below blogger posts. In this article we blogtariff presents another attractive blue color background Email Newsletter widget for blogger. Let’s begin tutorial for adding email subscription widget.
Readmore: How to Turn Visitors to Loyal subscribers?
Sign into your blogger account
Select ‘Layout’ link tab
Click on ‘HTML/Javascript’ linktab widget
Now, copy the below code and paste in it

<style>

.blogtariff h4 {
    background: none;
    color: #fff;
    font-size: 26px;
    padding: 0;
    text-align: center;
    text-shadow: 1px 1px #333;
}
    .blogtariff #subbox {
        background: #fff;
        padding: 10px;
        width: 80%;
    }
    .blogtariff #subbutton {
    -moz-border-radius: 3px;
    -moz-box-shadow: 0 1px 1px #a24a1d;
    -webkit-border-radius: 3px;
    -webkit-box-shadow: 0 1px 1px #a24a1d;
    border-radius: 3px;
    box-shadow: 0 1px 1px #a24a1d;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiayzQ4SUqEse47tjKeZg0-Hmo7g9RHwyt62Y8yEejW9L_FFrJETe3CXmHI9agiTByZbT6605caVyBAq7n4avv6GWkl-XtYqRrupo1t7pciZJgj71Ir6JmM9Frwv3AFxVMVSMe6wfTNEQ2w/s1600/1.png) 0 0;
    border: none;
    color: #333 !important;
    font-size: 14px;
    font-weight: bold;
    margin: 0 auto;
    padding: 10px 15px;
    text-shadow: 1px 1px #fff;
    text-transform: uppercase;
}
input[type="button"],
input[type="submit"],
a.more-link {
    -moz-border-radius: 3px;
    -moz-box-shadow: 0 1px 1px #ccc;
    -webkit-border-radius: 3px;
    -webkit-box-shadow: 0 1px 1px #ccc;
    border-radius: 3px;
    box-shadow: 0 1px 1px #ccc;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimmaGqLcdLBNxj2hjaow2dUCitZ-o1j1NIPMyjor_Uz05YkYOKfrJHo9f0ZZswdDVEbD-vSnlm0OVwQvTYcVEBLhXenZZWgI0PR8WW4kBWS9IOWnPwuLdl2Mi2LQGDPFfftwAhKPPIy6fP/s1600/2.png) 0 0;
    border: none;
    border-bottom: 1px solid #b15120;
    color: #fff !important;
    font-size: 13px;
    font-weight: normal;
    padding: 8px 12px 6px;
    text-decoration: none;
    text-shadow: 1px 1px #a1491d;
}
.blogtariff #subbutton:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7XXeInrqSRp7i-BbduPOO5QGNVtSacxHvBPOxipJx38TEIWVYWGl6SgNDxQy_IHiKZSRe85LTfLTWkyZ0fUO6VXszNvjRfRFydILnC4VSAJH9Rp-yESGqf1yupyR1JkJuOmKv734QR91U/s1600/3.png) 0 -40px;
}
input:hover[type="button"],
input:hover[type="submit"],
a.more-link:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7582S_aOzw-hWnxBpwJOPrm1dTMLAPYOlUb68AqwnuSEtQ0tq9jhyglcmJoTPgTfaoSnGdw7jYYkXtEITA-oNqbDJlufJPZDU0SUjWxnX1qWwFMHS1xoGEUM9vlmlm3R6cZmQCZLCEJwb/s1600/4.png) 0 -40px;
    cursor: pointer;
}
.blogtariff h4 {
    background: none;
    color: #fff;
    font-size: 26px;
    padding: 0;
    text-align: center;
    text-shadow: 1px 1px #333;
}
.blogtariff h4 {
    margin-bottom: 10px;
    text-shadow: 1px 1px #a1491d !important;
}
.blogtariff {
    background-color: #0080ff;
    margin: -5px;
    min-height: 201px;
    padding: 20px 10px 20px;
    text-align: center;
}
.blogtariff p {
    color: #fff;
    text-shadow: 1px 1px #a1491d;
}
.blogtariff #subbox {
    -moz-box-shadow: 1px 1px 3px #ccc inset;
    -webkit-box-shadow: 1px 1px 3px #ccc inset;
    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ1-k4qZoHDXvfPcc66TKiiKzjk2x4wnmNMzDchGKiuhehT5N4XXPHKhtrNr-R5URp-yO93b5k2ZZFvUneh5myclBAQaUMAiPi1OvC7p0UlvqgwBXWtOv63Lyp_UZVE7aXeelbBqVn0icP/s1600/5.png) center left no-repeat;
    box-shadow: 1px 1px 3px #ccc inset;
    border-left: 1px solid #9e6e56;
    border-top: 1px solid #9e6e56;
    color: #aaa49f;
    font-size: 11px;
    font-weight: bold;
    margin: 0 10px 15px;
    padding: 14px 10px 12px 50px;
    text-transform: uppercase;
    width: 195px;
}
</style>
<div id="blogtariff-2" class="widget blogtariff-widget"><div class="widget-wrap"><div class="blogtariff"><h4 class="widgettitle">Email Newsletter</h4>
<p>Join our site which has more than 3000 subscribers. </p>
            <form id="subscribe" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open(
'http://feedburner.google.com/fb/a/mailverify?uri=blogtariff', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
                <input type="text" value="Enter your email address …" id="subbox" onfocus="if ( this.value == 'Enter your email address …') { this.value = ''; }" onblur="if (
this.value == '' ) { this.value = 'Enter your email address …'; }" name="email" />
                <input type="hidden" name="uri" value="blogtariff" />
                <input type="hidden" name="loc" value="en_US" />
                <input type="submit" value="Sign Up" id="subbutton" />
            </form>
            </div>
</div>
</div>See more at: http://www.blogtariff.com

Customization:-

• Replace color code 0080ff with your choice color background by using our Color chart or else leave it default
• Replace blogtariff with your RSS subscription ID

Now save your widget and Template to preview your experiment.