Elegant Email Subscription Widget for Blogger

Welcome again in Bloggiks if you are a daily visitor then you must know that this week is widgets week for our readers. We shared many subscription, Bookmarking and other sharing widgets this week. Like AWeber Cool Email Subscription Box , Christmas bookmarking gadget and Spinning Bookmarking gadget for Blogger.

If you missed them then don't worry have a look at our widget section .

Elegant Email Subscription Widget for Blogger 

We shared many subscription widgets in the past but today I have come with Elegant Email Subscription Widget for Blogger. The main thing about widget is to place widget. As we know that the place of subscription widget must be a good one to attract people and to force them to subscribe. Header is a best option for that because every visitor must look at the header of the blog.

How To Add Elegant Email Subscription Widget for Blogger

1. Go to blogger dashboard >> Layout >> Add a gadget >> HTML/Javascript

2. Paste the following code In HTML/Javascript Box

/* Bloggiks 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=Your 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" /> 

</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]-->

 3. After putting code in HTML/javascript box change the highlighted text and also set widthaccording to your blog size.

4. After making changes click on save and that's it.

Get paid to share your links!