Add Elegant Email Subscription/Signup Widget To Your Blog

We recently applied the new email subscription widget to our blog's header, and indeed it has produced some amazing results. Today ill be sharing the same widget with you guys with a hope that it produces the same results as it has produced for us.

Getting email IDs of your visitors is one of the most important ways to secure your traffic in long term prospects. Consider how so many of your visitors come by daily, read what they were looking for (through search engines) and fly by. They wont even remember your blog's name.

So the only solution this is to make sure that they subscribe to your blog in some way or another. Whether through social media (Facebook/Twitter etc) or via email subscription widgets.

You may like to read:

 As this widget is great to be used in the header of just below the page navigation bars, it has some amazing results. Its probably one of the first thing that the visitors see and tends to leave out their emails in no time.

Below is the widget that we are going to add.

Follow the steps below to add this email subscription widget to your blog.

Step #1  Add A New Gadget

Go to Blogger >> Design >> Add a new gadget >> HTML/JavaScript Widget.

Now add the following code in it.

 [    <center>
    <div id="feature_box">
              <div id="sleek-subscribe">
                      <div class="newsheadline"><span>Sign-up</span> for <cite>FREE</cite> Regular Newsletter.</div>
    <div id="email-news-subscribe"> <!-- Email Subscribe --> <div class="email-box">
        <form action="" method="post" target="popupwindow" onsubmit="' Feed Burner Feed Name', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> 
                <input class="email" type="text" style="width: 450px; font-size: 15px;" id="email" name="email" value="Your Custom Text Goes Here" onfocus="if(this.value==this.defaultValue)this.value=&#39;&#39;;" onblur="if(this.value==&#39;&#39;)this.value=this.defaultValue;" />     
                <input type="hidden" value="Your Feed Burner Feed Name Here Too" name="uri" />
                <input type="hidden" name="loc" value="en_US" />
                <input class="subscribe" name="commit" type="submit" value="Subscribe" /> 
        </div> </div>
    /*---:[ feature box ]:---*/
    #feature_box { background: #eee; border-style: solid; border-color: #ddd; }
    /*---:[ home page teasers ]:---*/
    .teaser a.teaser_link:hover { text-decoration: underline; }
    .teaser .teaser_author { font-style: italic; }
        .teaser .teaser_author .author { font-style: normal; text-transform: uppercase; letter-spacing: 1px; }
    .teaser .edit_post { letter-spacing: 1px; }
        .teaser .teaser_author a, .teaser a.teaser_comments, .teaser a.teaser_category, .teaser .edit_post a { text-transform: uppercase; letter-spacing: 1px; color: #888; border-bottom: 1px solid #eee; }
        .teaser .teaser_author a { font-style: normal; }
        .teaser .format_teaser a { text-decoration: underline; }
        .teaser .format_teaser a:hover { text-decoration: none; }
    /*---:[ border package ]:---*/
    #header, .post_box, .teasers_box, #footer, .image_box, .custom_box, #feature_box, #archive_intro, .prev_next, #comment_nav_2 { border-width: 0; }
    /*Featured Box*/
    .custom #feature_box{background:#f0f4f4; border:1px solid #d9eaea; padding:10px 15px 5px;}
    /* Subscription Box */
    #sleek-subscribe{display: block; margin:0 auto; }
    .newsheadline {padding-left:20px;color:#222; font-size:20px; line-height:50px; float:left; font-weight:bold;}
        .newsheadline span{font-size:38px; color:#444; line-height:14px; font-family:"Trebuchet MS"; font-weight:normal;}
        .newsheadline cite{font-style:normal; color:#f00;}
    .signform{background:url('images/form-bg.jpg') no-repeat;padding:0 0 10px 100px; float:right; }
          .txt2, .txt2:focus{width:140px; font-size:15px; background:#fff; color:#92c3c3; border:1px solid #E36B0A; margin:0 5px; float:left; padding:10px; width:160px; border-radius: 10px;}
          .btn2, .btn2:focus {background:#E36B0A; margin:0 5px; padding:8px 10px 9px; border:1px solid #AD5513; color:#fff; font-size:15px; border-radius:10px;}
                .btn2:hover{background:#6689b0; }
    #email-news-subscribe .email-box{
            padding: 5px 10px;
            font-family: "Arial","Helvetica",sans-serif;
            border-top: 0;
            border-right: 1px solid #C7DBE2;
            border-left: 1px solid #C7DBE2;
            border-image: initial;
        #email-news-subscribe .email-box{
            border: 1px solid #dedede;
            color: #999;
            padding: 7px 10px 8px 10px;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            -o-border-radius: 3px;
            -ms-border-radius: 3px;
            -khtml-border-radius: 3px;
            border-radius: 3px;
            border-image: initial;
            font-family: "Arial","Helvetica",sans-serif;} 
        #email-news-subscribe .email-box{color:#333} 
        #email-news-subscribe .email-box input.subscribe{
            background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
            background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00));
            background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
            -pie-background: linear-gradient(270deg,#ffca00,#ff9b00);
            font-family: "Arial","Helvetica",sans-serif;
            border:1px solid #cc7c00;
            text-shadow:#d08d00 1px 1px 0;
            padding:7px 14px;
            border-image: initial;}
        #email-news-subscribe .email-box input.subscribe:hover{
            background: #ff9b00;
            background-image:-webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00));
            outline:0;-moz-box-shadow:0 0 3px #999;
            -webkit-box-shadow:0 0 3px #999;
            box-shadow:0 0 3px #999
            background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00));
            background:-moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%);
            border:1px solid #cc7c00;
            text-shadow:#d08d00 1px 1px 0} 
        #other-social-bar {
            background-color: #D8E6EB;
            box-shadow: 0 1px 1px #FFFFFF inset;
            padding: 0px;
            font-family: "Arial","Helvetica",sans-serif;
            overflow: hidden;
            border: 1px solid #B6D0DA;
    <!--[if IE]>
        #email-news-subscribe .email-box input.subscribe{
            background: #FFCA00;

 Step #2 Customization

I have highlighted the parts that you need to change. Change your feed burner feed name and add some interesting custom text.

Note: There is one important thing that you need to take care of. The widget is designed for BloggingeHow's width, so you have to readjust it as per your blog's width.

I have highlighted the width:450px section in green so that you can adjust it later.

Did You Like It?

Share you thoughts and ideas about the widget and let us know if you liked the widget or what else you would love to see in the widget. Also, give the post a social media share smile

You may like to read:



AdSense affiliate marketing Announcement AskHassam Blogger Blogging Tips Blogosphere News Bluehost Building Traffic BuySellAds Contest Customizations Disqus Tutorials Domain Hosting Drop Down Menus eBook Email Marketing Facebook Tutorials Feedburner Freelancing Giveaway Google Google Analytics Google Gmail Google Plus Tricks Guest Post HowTo Interview Making Money Online Monetization Motivation PayPal Pinterest Plugins review SEO Slideshare Social Media Top Lists Twitter Wordpress YouTube
BloggingeHow | Making Blogging Simpler: Add Elegant Email Subscription/Signup Widget To Your Blog
Add Elegant Email Subscription/Signup Widget To Your Blog
BloggingeHow | Making Blogging Simpler
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy

Tools of the Trade