Another cool email subscription box widget for Blogger

Blogger subscription box

Hello friends, I am back with another Blogger widget. which is an email subscription box. In past I have shared the related posts how to install email subscription box below Blogger posts and stylish email subscription box Blogger. Purpose of placing this widget here is to give more options for my readers who can select a widget according to her/his requirement. If this widget suits in your template, i will recommend you to add this widget since it will enhance your overall blog beauty.
How to install :

Go to Blogger Dashboard
Click on layout
Select add an html/javascript gadget
Place the code given below
Replace my feedburner id a1bloggerseo (highlighted with yellow color )with yours
Click on save . You are done.!

email subscription widget for blogger

<!–CODE STYLING BY a1bloggerseo.com–>
<style>
a.tt{
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}
a.tt span{ display: none; }
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #993300;
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(bubble.gif) no-repeat;
}
a.tt:hover span.middle{ /* different middle bg for stretch */ display: block;
padding: 0 8px;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
}
::-moz-focus-inner {
padding: 0;
border: 0;
}
:-moz-placeholder {
color: #bcc0c8 !important;
}
::-webkit-input-placeholder {
color: #bcc0c8;
}
:-ms-input-placeholder {
color: #bcc0c8 !important;
}
.input {
font: 12px/20px “Lucida Grande”, Verdana, sans-serif;
color: #404040;
background: #ebc9a2;
}
.input {
font-family: inherit;
font-size: 12px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.login {
padding: 18px 20px;
width: 80%;
background: #3f65b7;
background-clip: padding-box;
border: 1px solid #172b4e;
border-bottom-color: #142647;
border-radius: 5px;
background-image: -webkit-radial-gradient(cover, #437dd6, #3960a6);
background-image: -moz-radial-gradient(cover, #437dd6, #3960a6);
background-image: -o-radial-gradient(cover, #437dd6, #3960a6);
background-image: radial-gradient(cover, #437dd6, #3960a6);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);
}
.login > h1 {
margin-bottom: 20px;
font-size: 24px;
font-weight: bold;
text-align: center;
color: #fff;
text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
}
.login-input {
display: block;
width: 90%;
height: 37px;
margin-bottom: 20px;
padding: 0 9px;
color: white;
text-shadow: 0 1px black;
background: #2b3e5d;
border: 1px solid #15243b;
border-top-color: #0d1827;
border-radius: 4px;
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2);
}
.login-input:focus {
outline: 0;
background-color: #32486d;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6);
}
.lt-ie9 .login-input {
line-height: 35px;
}
.login-submit {
display: block;
width: 100%;
height: 37px;
margin-bottom: 15px;
font-size: 14px;
font-weight: bold;
color: #294779;
text-align: center;
text-shadow: 0 1px rgba(255, 255, 255, 0.3);
background: #adcbfa;
background-clip: padding-box;
border: 1px solid #284473;
border-bottom-color: #223b66;
border-radius: 4px;
cursor: pointer;
background-image: -webkit-linear-gradient(top, #d0e1fe, #96b8ed);
background-image: -moz-linear-gradient(top, #d0e1fe, #96b8ed);
background-image: -o-linear-gradient(top, #d0e1fe, #96b8ed);
background-image: linear-gradient(to bottom, #d0e1fe, #96b8ed);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15);
}
.login-submit:active {
background: #a4c2f3;
-webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1);
}
.login-help {
text-align: center;
}
.login-help > a {
font-size: 11px;
color: #d4deef;
text-decoration: none;
text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
}
.login-help > a:hover {
text-decoration: underline;
}
</style>
<!–ELEGANT SUBSCRIBE BOX ENDS a1bloggerseo.com –>
<center>
<form action=”http://feedburner.google.com/fb/a/mailverify” class=”login” method=”post” onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=a1bloggerseo‘, ‘popupwindow’, ‘scrollbars=yes,width=70%,height=520’);return true” target=”popupwindow”>
<h1> SUBSCRIBE TODAY</h1>
<img align=”LEFT” alt=”Smiley face” src=”http://png.findicons.com/files/icons/2198/dark_glass/128/mail_appt.png” height=”48″ width=”48″ />
<center>
<span style=”color: white; font-size: small;”><span style=”line-height: 25px;”> Sign up and receive our free Newsletter  </span></span>
</center>
<input name=”uri” type=”hidden” value=”a1bloggerseo” />
<input autofocus=”” class=”login-input” name=”email” placeholder=”Email Address” type=”email” />
<input name=”loc” type=”hidden” value=”en_US” />
<input class=”login-submit” type=”submit” value=”Subscribe” />
</form>
</center>

Comments

Nirmala Santhakumar says

July 30, 2013 at 7:14 am

Useful post Sanjay!

Thanks for the code, will add it my health blog.

I like your template too, is it new?
sanjay choubey says

July 30, 2013 at 7:25 am

Yes Dear I like my new template so much.
Thanks to like my work.
Nwosu Desmond Mavtrevor says

July 30, 2013 at 11:28 am

This subscription form looks cool and i am really thinking of trying it out on my blog.
sanjay choubey says

July 30, 2013 at 11:31 am

Thanks dear for your comment about my post. stay in touch
Shameem Thaha says

July 30, 2013 at 3:22 pm

Hey Sanjay its looks cool would like to add on my blog thanks bro
sanjay choubey says

July 30, 2013 at 6:15 pm

thanks Shameem brooo. Happy to know its useful for you
Pawan Bawdane says

July 31, 2013 at 5:46 pm

Hey Sanjay,

Once again, you’ve come up with beautiful email subscription box. Looking pretty nice.
sanjay choubey says

July 31, 2013 at 6:01 pm

Thank you Pawan broo for liking this widget. Hope you will use it on your blog too
varun saini says

July 31, 2013 at 7:04 pm

Hi Sanjay. I am also using blogger for my blog. I was finding a subscribe box for my website and i just came through your post. Nicely explained and i have added the subscription Box to my website. Thanks for the tutorial 🙂
sanjay choubey says

July 31, 2013 at 7:20 pm

Thanks Varun bhai. I am happy u used a1bloggerseo’s widget. be in touch for more tips and tricks

Another cool email subscription box widget for Blogger

Comments

Leave a Reply

Recent Posts

Thank you