WordPress › Blogger › Feedburner Email Subscription Widget

Two days back we published a famous blogger theme that is CopyBlogger theme which is a mobile compatible theme and overall SEO friendly. The most integrated part of the theme that is blended on the sidebar of template is the email subscription box you may notice on our demo blog. One of my readers asked to drop this widget on my blog so that he can use on his blog. So we decided to share this tutorial with you all. This widget also can function on wordpress blogs if you deliver email feed through feedburner then you can use this widget on your sidebar. The installation procedure is much easier for both Blogger and WordPress. We will show you all both the procedures but before we're gonna take a look of demo

Watch Demo

How to Add The Widget on Blogger

1. Go to Blogger > Page Element
2. Now click on Add a Gadget link
3. From the vertical list of widgets search for HTML/JavaScript
4. Now copy following code and paste inside the empty box

<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/>
<div id='responsiveness'>
            <h5>Subscribe Our Newsletter</h5>

            <form action='http://feedburner.google.com/fb/a/mailverify' method='post'target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=microwbt', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
           <input  class="placer" type='text'  name='email' placeholder='Full Name' />
            <input  class="placer" type='text'  name='email' placeholder='Enter Email ID' />
            <input type="hidden" value="microwbt" name="uri"/>
            <input type="hidden" name="loc" value="en_US"/>
                        <input value="Subscribe" class="button" type="submit" />
            </form>
            </div>

<style>
#responsiveness {
    padding: 15px 25px 20px;
    line-height: 35px;
    text-align: center;
    background: none repeat scroll 0% 0% #1E1E1E;
    margin: -15px;
    border-radius: 3px;
}
#responsiveness h5 {
    font-size: 17px;
    font-weight: 700;
    font-family: 'PT Sans',sans-serif;
    color: #FFF;
    padding: 0px;
    text-transform: uppercase;
    line-height: 1.2;
    margin: 10px 0px 15px;
    letter-spacing: 0.01em;
    text-align: left;
}
input.placer {
    color: #333;
    padding: 15px;
    font-size: 14px;
    font-family: PT Sans,sans-serif;
    border: 1px solid #EEE;
    transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
    margin: 10px auto 0px;
    border-radius: 3px;
    width: 89%;
}
input.button {
    background-color: #BA1A00;
    color: #FFF;
    font-weight: 400;
    cursor: pointer;
    border-radius: 4px;
    text-transform: uppercase;
    font-family: PT Sans,serif;
    padding: 10px 15px;
    border: medium none;
    font-size: 16px;
    width: 100%;
    margin: 15px auto 0px;
}
input.button:hover{
    background: #FFF;
    color: #333;
   }
</style>

5. Finally save the widget and place on your sidebar
6. Next save the page arrangements and you're done!

How to Add The Widget on WordPress

1. Login to your WP Admin Panel
2. Navigate to Appearance > Widgets
3. Add a Text widget on your sidebar a box will open up
4. Now copy codes on step #4 and paste inside the box also keep title bar empty
5. Now hit on save button and close it
6. Now check your blog either it's working perfectly

Make Following Customization Before Saving

1. Change microwbt with your Feedburner username
2. To change the height and width of window simply change 520 for height and 550 for width
3. Change the background color of email subscription box #1E1E1E
4. To change the font family of both email input and button simply change PT Sans,sans-serif
5. Change input button background color #BA1A00
6. To change the value of the button simply change Subscribe
7. Change the margin of subscription box to be fitted on your sidebar area -15px;

Note: If you don't want to add Google font that is PT Sans then please ignore adding the Google font link that is in yellow highlighted at the beginning of the code

Need More Help?

The widget is fully compatible with different dimensions of screen like 959px, 779px, 479px that is for iPhone, iPad and Tablet PCs. Recently we published an awesome recipe of CopyBlogger template for blogger users not this feedburner widget is an integrated part of the widget it works just like awesome with the template.

If you find any error in this widget do let me know i feel proud to handle users problems. Peace and blessings buddies :)