Email Subscription Blogger Widget

Beautiful email subscription blogger widget is a beautiful email subscription blogger widget that helps you to increase your subscription list and helps in increasing your website traffic.

You can have the preview of this email subscription widget below. You will find many email subscription widget for blogger on internet but I think this is amazing and if you want more amazing widgets for blogger then stay connected to this blog and subscribe to the newsletters on this blog.


Preview:
This simple snapped preview of this email subscription blogger widget you can have a look on it below.

I think you may have seen the preview and now it's time to build it for that follow the steps provided below and make this email subscription widget for blogger yours.

Steps to make email subscription blogger widget:

1. Go To Blogger Dashboard
2. Then Go to Layout Section
3. Click Add new widget Button
4. Make new HTML/Javascript Widget
5. Now copy the code provided below and paste it as a widget content.

<style>
#subscribebox {background:#314d5b; padding:20px;font-family: 'PT Sans', sans-serif;
max-width:300px;width:100%}
.widget_follow_subscribe .widget-detail {
  padding: 36px 30px 40px 30px;}

#subscribebox p {
color: white;
    font-size: 15px;
    text-align: center;
    font-weight: 700;
}

.follow-subscribe-social {
 margin: 0 0 15px;
 padding: 0 0 14px;
 border-bottom: #858585 solid 1px;
}

.follow-subscribe-social ul {
 list-style: none;
 margin: 0;
 padding: 0;
 text-align: center;
}

.follow-subscribe-social ul li {
 display: inline;
 margin: 0 15px 0 0;    border-bottom: none;
}

.follow-subscribe-social ul li:last-child {
 margin: 0;
}

.follow-subscribe-social ul li a {
 font-size: 17px;
 color: #cacaca;
 
 -webkit-transition: color 0.2s ease-in-out;
 -moz-transition: color 0.2s ease-in-out;
 -ms-transition: color 0.2s ease-in-out;
 -o-transition: color 0.2s ease-in-out;
 transition: color 0.2s ease-in-out;
}

.follow-subscribe-social ul li a:hover {
 color: #fff;
}

form.subscribe {
 margin-top: -7px;
}

form.subscribe input {
 display: block;
 width: 100%;
}

.subscribe-email {
 height: 45px;
 border: none;
 margin: 0 0 10px;
 font-size: 0.928571em;
 background-color: #ffffff;
  text-align: center;
  color:efefef;
}

.subscribe-email:focus {
 outline: 0;
}

/* ===== Placeholder color ===== */
form.subscribe .placeholder { /* Internet Explorer 9 */
 color: #cacaca;
}

form.subscribe input:-ms-input-placeholder { /* Internet Explorer 10+ */
 color: #cacaca;
}

form.subscribe input::-webkit-input-placeholder { /* WebKit browsers */
    color: #cacaca;
}

form.subscribe input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #fafafa;
}

form.subscribe input::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #fafafa;
}

.subscribe-button {
 height: 45px;
 font-weight: 700;
font-size:16px;
 color: #fff;
 text-transform: uppercase;
 border: none;
 background-color:#ea5217;
 
 -webkit-transition: background-color 0.2s ease-in-out;
 -moz-transition: background-color 0.2s ease-in-out;
 -ms-transition: background-color 0.2s ease-in-out;
 -o-transition: background-color 0.2s ease-in-out;
 transition: background-color 0.2s ease-in-out;
}

.subscribe-button:hover {
 background-color: #f4b458;
}

.subscribe-button:focus {
 outline: 0;
}

.creadit a {background:#F35D5C;color:white;margin-top:30px;padding:20px;font-size:15px;}
</style>
<center>
<div id="subscribebox">
<div class="follow-subscribe-social">
<ul>
<li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-google"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-pinterest-p"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-dribbble"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
<img border="0" alt="Subcribe" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjITJUJCZCJciYF4Os6_eMS58Y5O355x7fKxVxGoIJRxBREjWM2dqh2mUnnpXFWD93jil3bNcXmWwOdrSdeXjphFLnfkCpJzAVEL4ERKDmna3Tg7FXnd1bDNQrg_A7MfhqqXlWdiQjAFc7z/" width="100" height="100">
<p>Subscribe to my Newsletter</p>
<form class="subscribe" action='https://feedburner.google.com/fb/a/mailverify?uri=softwebtuts' method='post' onsubmit='window.open('https://feedburner.google.com/fb/a/mailverify?uri=softwebtuts, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='softwebtuts'/>
<input name='loc' type='hidden' value='en_US'/>
<input class="subscribe-email" type='text' name='email' onblur='if (this.value == "") {this.value = "Your Email";}' onfocus='if (this.value == "Your Email") {this.value = "";}' value='Your Email'/>
<input class="subscribe-button" type="submit" value="Subscribe" />
</form>
<p style="font-size:60%;">We will not share your information with anyone <a href='https://www.softwebtuts.com'>Make This Widget Yours</a></p>
</div>
</center>

I haven't compressed the code above you can compress is using online compression tools.
6. Save Widget

You are all done you have just added email subscription blogger widget to your blogger blog and I think you will like it before stepping into closing this window you have to focus on the things which are highlighted in the above code you have to replace them according to your requirements.

In the above code you have to replace your links of social media profiles and after that your feedburner username.

source:softwebtuts.com