Stylish - Sidebar Subscription Box Widget For Blogger

Do you want to add email subscription widget to your Blogger sidebar? In this article, I will show you how to add email subscription widget to your Blogger and start building your email list.

While social media is a great way to interact with your readers, email is the most reliable and direct way of communication. By offering email subscription on your blog, you can build a steady stream of regular visitors for your site. Email subscription also gives your users yet another way to consume your content as some folks may not be on social media.

Live Demo

So, let see how to add an email subscription widget in blogger sidebar. As usual Go to Blogger Dashboard >> Template >> Edit HTML:

Find this code ]]:</b:skin> and just before that, paste the CSS code given below:

/*------- Stylish Sidebar Subscription Box Widget by smartpik.in------*/ 
#smartpik-sub {
padding: 0;
margin: 0;
width: 100%;
border-radius: 1px; border: 0;
background: #ff6600;
}
#smartpik-sub .heading {
padding: 10px 10px 5px 10px;
font-family: "Oswald", sans-serif;
font-size: 30px;  color: #FFF;
text-align: center;
margin: 0;
line-height:1.5;
}
#smartpik-sub .rssform {
padding: 0px 20px;
margin: 16px 0px -15px 0px;
color:#fff;
}
#smartpik-sub .rssform input {
padding: 8px;
font-size: 13px;
color:#fff;
font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;
font-weight: normal;
background:#cc5200;
width: 100%;
outline: none !important;
border: none;
border-radius: 1px;
box-sizing: border-box !important;
-moz-box-sizing:border-box;
}
#smartpik-sub .rssform .button {
background: #FFF;;
color:#cc5200!important;
border: 0;
margin-top: 15px;
outline: none !important;
transition: all .3s ease-in-out;
width: 100%;
padding: 6px !important;
float: none;
text-transform: uppercase;
font-family: "Oswald", sans-serif;
font-size: 18px;
font-weight: normal;
cursor: pointer;
}
#smartpik-sub .credit a {
color:#FFF;
text-align:center;
font-family: "Oswald",sans-serif;
text-decoration:none !Important;
}
#smartpik-sub .credit {
font-family: "Oswald",sans-serif;
text-align: center;
font-size: 12px;
padding: 0px;
line-height: 30px;
}

Now we are done with CSS code so now it's time to add HTML part of this widget through Template Layout section.

Go to Layout area of your blog then on the sidebar just add a new HTML/JavaScript widget. Now paste the HTML code after making compulsory Changes to it.

<div id='smartpik-sub'><div class='heading'>GET OUR LATEST POSTS IN YOUR INBOX</div> <div class='rssform'> <form action='http://feedburner.google.com/fb/a/mailverify' method='post' target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=smartpik', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input type='text' name='email' placeholder='Enter your email address...' /> <input type="hidden" value="smartpik" name="uri"/> <input type="hidden" name="loc" value="en_US"/>
<input value="Subscribe Now" class="button" type="submit" />
</form>
</div>
<div class="credit">
<a href="http://www.smartpik.in/2016/01/stylish-sidebar-subscription-box-widget-for-blogger.html">Get This Widget</a>
</div>
</div>

Now just change the highlighted things accordingly. Most important step to change is my Feed burner address smartpik to yours otherwise you will be giving free subscribers to me. Save this HTML/JavaScript widget and check out your blog for the changes. It must be working perfectly. 

Hope you added this attractive subscription widget to your blog. In case you need any more customization, feel free to mention via comment provided below.