Subscribe by Email Widget for WordPress and Blogger

Subscribe by email widget is an important widget that creates a sense of attachment with your readers. An email newsletter increases the traffic and hence the conversions. A newsletter provides regular updates to your readers. So today i come up with a subscribe by email widget design for you. It also includes Rss feeds , facebook fan page and twitter profile link.

minimal subscription box

HTML

<div
id="subscribe-box"><div
id="bleft"><div
class='icon'></div><div
class='sub-email'><h4>Subscribe now!</h4><p
class="getposts">Get our latest posts in your email for free.</p></div><form
onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?designrapid', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" method="post" action="http://feedburner.google.com/fb/a/mailverify"> <input
type="email" name="email" class="sbox" placeholder="Your email address here!"> <input
type="hidden" name="uri" value="designrapid"> <input
type="hidden" value="en_US" name="loc">  <input
type="submit" value="Subscribe" class='go'></form></div><div
id="bright"><ul><li
style="background-position: 0 -3px;"><a
href='http://feeds.feedburner.com/designrapid'>RSS Feed</a></li><li
style="background-position: 0 -24px;"><a
href='http://www.facebook.com/pages/DesignRapidcom/213613248684715'>Facebook</a></li><li
style="background-position: 0 -45px;"><a
href='http://twitter.com/designrapid'>Twitter</a></li></ul></div></div><div
id='sideads'><div
id="bsap_1262516" class="bsarocks bsap_750aaa3282b05fec284adf8864a917dc"></div></div>​

CSS

#subscribe-box {
float: right;
width: 300px;
margin: 0 0 10px
}
#bleft {
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
-webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 0 25px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.1) inset;
background: none repeat scroll 0 0 #EEE;
float: left;
height: 160px;
width: 300px;
border: 1px solid #CCC;
position: relative;
border-bottom: 1px solid #BBB
}
#bleft .icon {
background: url(http://dl.dropbox.com/u/26650107/letter.png) no-repeat scroll center center transparent;
display: block;
float: left;
height: 64px;
margin: 16px;
width: 70px
}
#bleft .sub-email {
float: right;
width: 195px;
margin: 10px 0 0
}
#bleft .sub-email h4 {
color: #000;
font-family: arial;
font-size: 20px;
font-weight: bold;
margin: 10px 0;
text-shadow: 0 1px #FFF
}
#bleft .sub-email p.getposts {
color: #777;
font-family: arial;
font-size: 13px;
text-shadow: 0 1px 0 #FFF;
width: 175px
}
#bleft form {
float: left;
margin: 0 0 0 20px
}
#bleft .sbox {
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) inset;
-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) inset;
border: 0 none;
float: left;
height: 20px;
padding: 4px;
width: 165px;
border-bottom: 1px solid #CCC
}
#bleft .go {
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
-webkit-box-shadow: 0 -12px 0 rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 -12px 0 rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 -12px 0 rgba(0, 0, 0, 0.15) inset;
background: none repeat scroll 0 0 #82B832;
border: 1px solid #689328;
color: #FFF;
float: left;
font-weight: bold;
margin: 0 0 0 10px;
cursor:pointer;
padding: 5px
}
#bright {
-webkit-border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
background:#EEE;
background: -moz-linear-gradient(center bottom, #FFF 0%, #EEE 100%) repeat scroll 0 0 transparent;
background:-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(255,255,255)),
color-stop(1, rgb(238,238,238))
);
border: 1px solid #CCC;
float: left;
height: 50px;
margin: -10px 0 10px;
width: 300px;
-webkit-box-shadow: 0 10px 13px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 10px 13px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 10px 13px rgba(0, 0, 0, 0.1) inset
}
#bright ul {
float: left;
list-style: none outside none;
margin: 20px 0 20px 15px !important;
padding: 0 !important
}
#bright ul li {
background: url(http://dl.dropbox.com/u/26650107/subs-icons.png) no-repeat;
float: left;
margin: 3px 0;
width: 95px;
position: relative
}
#bright ul li a {
color: #555;
float: left;
font-family: arial, helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
margin-left: 25px;
margin-top: -2px;
background:0 none;
text-shadow: 1px 1px #FFF
}​

Demo

 

How to use this Subscription Box in WordPress

1) Add the CSS code in style.css file in Appearance –>>Editor

2) Use text widget and paste the above HTML code in it.

3) Dont forget to edit the social profile details

 

How to use this Subscription Box in Blogger

1) Open Html editor

2) Find ]]></b:skin> and just above that paste the CSS code

3) Now select layout, on sidebar select add a widget. Select Html/Javascript.

4) Paste the above Html code, Dont forget to edit details in it.

Hope you like the tutorial. If you face any problem regarding this tutorial than just through me a comment

0
Digg Digg

Comments

  1. Aadith says:

    Going to use this…..Kudos

    • raman2572 says:

      Just comment if you face any problem

      • Comics Paradise says:

        Its not working in my site. http://www.paradiseofcomics.com i have added full code in style.css file and added tht code through widget bt not working

        • raman says:

          Just checked your website, unable to see the css code, Where did you add the css code
          You should add it in style.css or if your theme uses custom.css than add the css code there
          Otherwise the widget is working fine

  2. Darko says:

    Doesen’t work at my site

  3. Mu7hammad Hassan says:

    Awesome, Simple, Cool And Quick To Load Widget With All Basic Features.
    Thanks…

  4. Gautam says:

    nice subscribe box dude, i like it because it’s without plugin.

Speak Your Mind

*