Email Feedburner Subscription Widget For Blogger And Website

One of the important way to get more audience to your site is to get more subscribers to your site. You can do that by providing a attractive subscription widget to your blog or website. Here is  a simple email subscription box which allows your users to subscribe to your feeds.

Once you get more number of subscribers to your site then automatically your traffic and audience will be increased. Just follow the below steps to get this widget.

Step 1: Goto Blogger Dashboard--> Select Layout.

Step 2 : Click Add a Gadget --> Select HTML/JavaScript.

Step 3 : Now paste the following code and save it and you are done.

<style>

.spiceupblogging h4 {

    background: none;

    color: #fff;

    font-size: 26px;

    padding: 0;

    text-align: center;

    text-shadow: 1px 1px #333;

}

    .spiceupblogging #subbox {

        background: #fff;

        padding: 10px;

        width: 80%;

    }

    .spiceupblogging #subbutton {

    -moz-border-radius: 3px;

    -moz-box-shadow: 0 1px 1px #a24a1d;

    -webkit-border-radius: 3px;

    -webkit-box-shadow: 0 1px 1px #a24a1d;

    border-radius: 3px;

    box-shadow: 0 1px 1px #a24a1d;

    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwwh3ti9kocEaHUg7eS4EFVoikPYx-UUCD3-ErCR8WrQSVxQ5z5k0612jM1DVpEw_ofgprMs2pUrTwLbCculyKQD7CWDsNyJji2Fx2NhT_mSm3V2AFfICD-JfUeT0wypUKqqh7TDwkowP3/s1600/1.png) 0 0;

    border: none;

    color: #333 !important;

    font-size: 14px;

    font-weight: bold;

    margin: 0 auto;

    padding: 10px 15px;

    text-shadow: 1px 1px #fff;

    text-transform: uppercase;

}

input[type="button"],

input[type="submit"],

a.more-link {

    -moz-border-radius: 3px;

    -moz-box-shadow: 0 1px 1px #ccc;

    -webkit-border-radius: 3px;

    -webkit-box-shadow: 0 1px 1px #ccc;

    border-radius: 3px;

    box-shadow: 0 1px 1px #ccc;

    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia8V6L06brt13PARMnaHtdOVHvgKVQe9PPGP6yqf1RmmNEN6x2Gv0L49Gx1w_OEJvuHsOuRCk9SdsabJqOKWS7lSUnfxa0xgzktloTUC107e86A8RukfxENpykQ55xhG2N2OtpgdGxEdWo/s1600/2.png) 0 0;

    border: none;

    border-bottom: 1px solid #b15120;

    color: #fff !important;

    font-size: 13px;

    font-weight: normal;

    padding: 8px 12px 6px;

    text-decoration: none;

    text-shadow: 1px 1px #a1491d;

}

.spiceupblogging #subbutton:hover {

    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg2ibOchcA3M9PN0I1y3HPiGWm9I1lXCfM13M6KB-eZkRLmYqPV_BFbchHomzTj-TBqlPpoFqjh-f54VM4I2U-V_9PxpTr91YzXBTHft3sZkjbrwFK8qP9B0q-5BFHNyxopnjYS-y3DSJl/s1600/3.png) 0 -40px;

}

input:hover[type="button"],

input:hover[type="submit"],

a.more-link:hover {

    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbB4gdtGxq6CZo4aIWEY0QKDT77qkF6da7wkSgE0aEOU3lMrUhQjhvT50nGE2bGzWph1iO98eBLR0oj75ix6HSQhRS0WG0DBXU1NgOwdqBooInn2peTfHwyzHVKJ2JZOeSh57ugmbfj1IC/s1600/4.png) 0 -40px;

    cursor: pointer;

}

.spiceupblogging h4 {

    background: none;

    color: #fff;

    font-size: 26px;

    padding: 0;

    text-align: center;

    text-shadow: 1px 1px #333;

}

.spiceupblogging h4 {

    margin-bottom: 10px;

    text-shadow: 1px 1px #a1491d !important;

}

.spiceupblogging {

    background-color: #00FFFF;

    margin: -5px;

    min-height: 201px;

    padding: 20px 10px 20px;

    text-align: center;

}

.spiceupblogging p {

    color: #fff;

    text-shadow: 1px 1px #a1491d;

}

.spiceupblogging #subbox {

    -moz-box-shadow: 1px 1px 3px #ccc inset;

    -webkit-box-shadow: 1px 1px 3px #ccc inset;

    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNLz0EhH9W83qovc9Ci54IShtEA5VB1muYkUhd_Y7qt7tSIKhjOGmwUM8DNy4XZgsEVq4xjzscjZSytgIdQS2EU4YO04VRQzc3iZtc1msIfHfzp9uCW078n321FmVKZBBGZxBhChJszhcZ/s1600/5.png) center left no-repeat;

    box-shadow: 1px 1px 3px #ccc inset;

    border-left: 1px solid #9e6e56;

    border-top: 1px solid #9e6e56;

    color: #aaa49f;

    font-size: 11px;

    font-weight: bold;

    margin: 0 10px 15px;

    padding: 14px 10px 12px 50px;

    text-transform: uppercase;

    width: 195px;

}

</style>

<div id="spiceupblogging-2" class="widget spiceupblogging-widget"><div class="widget-wrap"><div class="spiceupblogging"><h4 class="widgettitle">Email Newsletter</h4>

<p>Join our site which has more than 3000 subscribers. </p>

            <form id="subscribe" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open( 

'http://feedburner.google.com/fb/a/mailverify?uri=spiceupblogging', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">

                <input type="text" value="Enter your email address …" id="subbox" onfocus="if ( this.value == 'Enter your email address …') { this.value = ''; }" onblur="if ( 

this.value == '' ) { this.value = 'Enter your email address …'; }" name="email" />

                <input type="hidden" name="uri" value="spiceupblogging" />

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

                <input type="submit" value="Sign Up" id="subbutton" />

            </form>

            </div>

</div>

</div>

Just replace spiceupblogging with your feedburner ID.

If you need to replace the background color you can do it by replacing #00FFFF