If you are running a blog or any kind of website then Subscription widget is the must required blogger widget. The visitors of your blog can easily subscribe to your latest post through this widget. This helps your loyal readers to get updated of your every post through their email. This is the simple subscription widget for blogger blogs that you can add at any part of your blog. But it looks more good and attractive at your sidebar of the blog.
beautiful-blogger-email-subscription-widget
Follow the bellow step to add this Beautiful Email Subscription Widget on blogger blog. But before that you can check the working demo.

Add Envelope Style Beautiful Email Subscription Widget

  • Go to Blogger Dashboard > Template > Edit HTML option.
  • On the Template editor search (ctrl+f) for ]]></b:skin> and add the below code just above / before ]]></b:skin> .
/* SpicyTechTips Envelope Style Beautiful Subscription Widget
-------------------------------------------------------------------------------------*/
.widget.stt_newsletter_widget {
background: url(http://3.bp.blogspot.com/-Y9ZhvmIidl4/VQZ056hjpVI/AAAAAAAAKc8/Z01jdkGNJ_4/s1600/subscription-envelope-bg.png)
no-repeat;
width: 250px;
height: 158px;
padding: 25px;
margin-bottom: 30px;
}
.stt_newsletter_widget h3 {
font-size: 18px;
    line-height: 22px;
margin: 0 0 5px 0;
}
.stt_newsletter_widget h3 p {
background: none;
color: #444444;
padding: 0;
font-size: 18px;
line-height: 2px;
-webkit-box-shadow: 0 0 0 #222222;
  -moz-box-shadow: 0 0 0 #222222;
   box-shadow: 0 0 0 #222222;
}
.stt_newsletter_widget input[type="text"] {
    padding: 9px 10px 9px 10px;
margin-bottom: 10px;
width: 132px;
display: inline;
border-right: none;
-webkit-box-shadow: 0 0 0 0;
  -moz-box-shadow: 0 0 0 0;
box-shadow: 0 0 0 0;
-webkit-border-radius: 3px 0 0 3px;
  -moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
.stt_newsletter_widget input[type="email"] {
    padding: 9px 10px 9px 10px;
margin-bottom: 10px;
width: 128px;
display: inline;
-webkit-box-shadow: 0 0 0 0;
  -moz-box-shadow: 0 0 0 0;
box-shadow: 0 0 0 0;
-webkit-border-radius: 3px 0 0 3px;
  -moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
.stt_newsletter_widget input[type="submit"] {
background: #E53B2C;
width: 90px;
font-size: 13px;
font-weight: bold;
line-height: 21px;
    color: #FFFFFF;
    cursor: pointer;
    padding: 9px 12px;
margin: 0;
border: none;
display: inline;
-webkit-border-radius: 0 3px 3px 0;
  -moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
.stt_newsletter_widget input[type="submit"]:hover {
background: #222222;
}
.stt_newsletter_widget p {
background: none ! important;
margin-bottom: 17px;
}
You have added the CSS code, now its time to add the HTML code to make this widget work.
  • Go to Blogger Dashboard > LayoutAdd a Gadget option.
  • Choose HTML/JavaScript option and add the below HTML code in it.
<div class="row widget stt_newsletter_widget">
<h3 class="widget-title">
Subscribe To Our Newsletter</h3>
Get our new updates. Learn Blogging Tips, Make Money Online Course, Awesome Blogger Widgets and Many More. Choose your preference below.<br />
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?
uri=SpicyTechTips', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="email" type="text" /><input name="uri" type="hidden" value="SpicyTechTips" />
<input name="loc" type="hidden" value="en_US" />
<input type="submit" value="Subscribe" />
</form>
<div class="clear">
<div style="text-align: right;">
<a href="http://www.spicytechtips.com/" rel="nofollow" target="_blank"><span style="font-size: xx-small;">Blogger Widget</span></a>
</div>
</div>
</div>

Customization:

  • Replace SpicyTechTips with your Feedburner username. It occurs two time.
 Save it and view your blog. You will find it working.

If you find this widget useful then share it with your friends. If you have some problem using this widget then feel free to ask us. 

No Comment to " Add Envelope Style Beautiful Email Subscription Widget to Blogger Blog "