Get Started

Another cool email subscription box widget for Blogger

Sanjay Choubey

·

·

,

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 gadget for blogger
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;”>&nbsp;Sign up and receive our free Newsletter &nbsp;</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>

 

Sanjay Choubey

Sanjay Kr. Choubey is a digital marketer from N. Delhi having 7+ years of exp. Discover, What I can do for You!

Leave a Reply

Your email address will not be published. Required fields are marked *

10 responses to “Another cool email subscription box widget for Blogger”
  1. Nirmala Santhakumar Avatar
    Nirmala Santhakumar

    Useful post Sanjay!

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

    I like your template too, is it new?

  2. sanjay choubey Avatar
    sanjay choubey

    Yes Dear I like my new template so much.
    Thanks to like my work.

  3. Nwosu Desmond Mavtrevor Avatar
    Nwosu Desmond Mavtrevor

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

  4. sanjay choubey Avatar
    sanjay choubey

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

  5. Shameem Thaha Avatar
    Shameem Thaha

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

  6. sanjay choubey Avatar
    sanjay choubey

    thanks Shameem brooo. Happy to know its useful for you

  7. Pawan Bawdane Avatar
    Pawan Bawdane

    Hey Sanjay,

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

  8. sanjay choubey Avatar
    sanjay choubey

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

  9. varun saini Avatar
    varun saini

    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 🙂

  10. sanjay choubey Avatar
    sanjay choubey

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

15 Years Experienced SEO freelancer
Call me at – 8802309980 or WhatsApp Now