Customize Feedburner Email Subscription Form for Sidebar

In my previous post I teach you on how to completely setup your RSS Feedburner. But this time I will share a customized subscription form where your visitor can subscribe to your blog easily. Why do we need to have a customized subscription form? We know that there is a free code for subscription form that we can get when we setup our RSS Feedburner. But you will notice when you implement it on your blog that the subscription form is very simple, so it needs to customize to make it presentable.

As a blogger, Google Feedburner has a two major features that we like. It is the ability of Feedburner to allow visitors to easily subscribe to our blog via Email. And also Feedburner gives user a better place to view our RSS feed together with different social media sharing buttons.

The Subscription Form

  • It is simple, but presentable.
  • It can modify easily according to your template design.
  • It will load faster on any browser.
  • Attractive to visitor.

To add this customized subscription form on your sidebar the first thing you will do is go to your Blogger Dashboard->>Layout->>Add a Gadget->>HTML/JavaScript then paste the following code below.

<link href=’,400italic,600italic,400,300,600,700′ rel=’stylesheet’ type=’text/css’/>
<div id=’Subscription’> <div class=’heading’>
Sign Up in Seconds</div> <p>
Sign up with your email address to receive hot updates straight in your inbox.</p><div class=’emailsub’>
<form action=’’ method=’post’target=”popupwindow” onsubmit=”‘
Internetsmash‘, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520′);return true”>
<input type=’text’ name=’name’ placeholder=’Your Name’ /><input type=’text’ name=’email’ placeholder=’Your Email’ /><input type=”hidden” value=”
Internetsmash” name=”uri”/><input type=”hidden” name=”loc” value=”en_US”/><input value=”Sign Up Now!” class=”button” type=”submit” />
</form><p id=’credit’>Powered By: <a href=’’style=”color:#F4836A” rel=’nofollow’>Internetsmash</a></p></div></div>
<style type=’text/css’>
#Subscription {
width: 313px; height: 290px; border: 1px solid #51C0F9; border-radius: 5px 5px 0px 0px; }
#Subscription .heading { padding: 10px 20px; line-height: 20px; font-size: 20px; font-weight: 600; font-family: open sans; color: rgb(38, 38, 38); text-align: center; text-shadow: 0px 1px rgba(255, 255, 255, 0.75); background: none repeat scroll 0% 0% rgb(81, 192, 249); }
#Subscription p { font-family: open sans; font-size: 13px; color: rgb(12, 12, 12); line-height: 25px; padding: 5px 15px 0 15px; margin: 0; }
#Subscription .emailsub { padding: 0px 20px 10px 20px; }
#Subscription .emailsub input { color: rgb(170, 170, 170); padding: 10px; margin-top: 10px; font-size: 15px; font-family: open sans; width: 92%; border: 1px solid #ccc; border-bottom: 2px solid #ccc; border-radius: 5px; transition:border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s; }
#Subscription .emailsub input:focus { border-color:#F4836A; outline: none; box-shadow: 0 0 2px 1px #F4836A; }
#Subscription .emailsub .button { background: #F4836A; color: white!important; border:none; outline: none; border-bottom: 3px solid #B3614E; transition:background .4s linear; width: 90%; margin-right: 5%; margin-left: 5%; font-weight: 600; cursor:pointer; }
#Subscription .emailsub .button:hover{background: #DD7761;}
#credit {margin: -5px 0 0px 15px!important;text-shadow:none; opacity:.6;}

Customize the Subscription Form

Red Color: Just replace the text with your own Feed Address. For example your Feed Address is “ just copy only the Internetsmash text and rewrite the color red text above.
Purple Color: You may also change the text if you are not confortable with it.
Blue Color: To change the width and height of the subscription form just change its value.


If you don’t want to make a multiple CSS file on your template you may put the subscription form CSS file together with your Template CSS. To do this just follow the steps below.

Cut the codes between <style type=’text/css’> and </style> and go to your Blogger Dashboard->>Template->>Edit HTML->> just above this code ]]></b:skin> paste the CSS code you copied between <style type=’text/css’> and </style> and click Save template.

Note: Delete the code <style type=’text/css’> and </style> after you cut the codes between them because it’s no longer using.

Please follow and like us:

Leave a Reply

Your email address will not be published. Required fields are marked *