Elegant Email Subscription/Signup Widget For Blogger Blog

Today I'll be sharing the elegant email subscription widget with you. Getting more subscribers is one of the most powerful ways to secure your traffic in long term prospects. With the help of attractive Email subscription widget you can convert your readers into subscribers because they wont even remember your blog's name.

In this tutorial learn "How to Add Elegant Email Subscription/Signup Widget For Blogger Blog". Let's start the tutorial.

Email Subscription/Signup Widget Demo

How to Add Elegant Email Subscription/Signup Widget To Blogger Blog

1. Go to Dashboard > Design > Page Elements.
2. Click Add A Gadget. In New Window, Select HTML/Javascript .
3. Copy The Code Given Below and Paste It Inside The Box.
4. Save The Gadget

/* BlogsDaddy Email Subscription Widget*/ 

<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="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=BlogsDaddy', '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="BlogsDaddy" name="uri" />

            <input type="hidden" name="loc" value="en_US" />

            <input class="subscribe" name="commit" type="submit" value="Subscribe" />   

        </form>

    </div> </div> 

      </div>      

</div></center>

<style>

/*---:[ 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;

       height:34px;}

    #email-news-subscribe .email-box input.email{

        background:#FFFFFF;

        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 input.email:focus{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-radius:3px;

        -moz-border-radius:3px;

        -webkit-border-radius:3px;

        border:1px solid #cc7c00;

        color:white;

        text-shadow:#d08d00 1px 1px 0;

        padding:7px 14px;

        margin-left:3px;

        font-weight:bold;

        font-size:12px;

        cursor:pointer;

        border-image: initial;}

    #email-news-subscribe .email-box input.subscribe:hover{

        background: #ff9b00;

        background-image:-moz-linear-gradient(top,#ffda4d,#ff9b00);

        background-image:-webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00));

        filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);

        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%);

        -pie-background:linear-gradient(270deg,#ffda4d,#ff9b00);

        border-radius:3px;

        -moz-border-radius:3px;

        -webkit-border-radius:3px;

        border:1px solid #cc7c00;

        color:#FFFFFF;

        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;

        font-weight:bold;

        overflow: hidden;

        border: 1px solid #B6D0DA;

           height:57px;

    }

</style>

<!--[if IE]>

    <style>

    #email-news-subscribe .email-box input.subscribe{

        background: #FFCA00;

        }

    </style>

    <![endif]-->

Remember Notes : The feed burner user name highlighted in Yellow color, you need to change it to your own. The widget is designed for BlogsDaddy's according to its width, so you have to readjust it as per your blog's width.

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

You May Like To Read:

1. Thesis Email Subscription Widget For Blogger Blog
2. Create Email Subscription Form With Social Buttons
3. Stylish Subscription Widget For Blogger And WordPress

If you need our help regarding this widget then you can ask any time via comment box. I will be back soon with new widgets and blogging tips and tricks.

Author - Gagan Masoun is the owner of Blogs Daddy Blog.Gagan lives in India, has been blogging since 2010 and writing Blogs Daddy Blog since 2011.You can find him in the usual social networks.