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.

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
[showmyads]

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

WordPress users can install a premium plugin, download it here

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