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.

subscribe by email widget


class='sub-email'><h4>Subscribe now!</h4><p
class="getposts">Get our latest posts in your email for free.</p></div><form
onsubmit="'', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" method="post" action=""> <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
style="background-position: 0 -3px;"><a
href=''>RSS Feed</a></li><li
style="background-position: 0 -24px;"><a
style="background-position: 0 -45px;"><a
id="bsap_1262516" class="bsarocks bsap_750aaa3282b05fec284adf8864a917dc"></div></div>


#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( 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;
padding: 5px

#bright {
-webkit-border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
background: -moz-linear-gradient(center bottom, #FFF 0%, #EEE 100%) repeat scroll 0 0 transparent;
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( 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


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 :)

Pencil drawing online course - Download here

Join 40,000+ readers and get free notes in your email


  1. Going to use this.....Kudos

  2. Just comment if you face any problem :)

  3. Doesen't work at my site :(

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

  5. Its not working in my site. i have added full code in style.css file and added tht code through widget bt not working

  6. 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 :)

  7. Please provide me the link to your website so that i can troubleshoot it

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

  9. I'm not that good at coding, You said "dont forget to Edit the details in the tutorial (am on blogger) details like what"...give me example

  10. Hello,

    thank you, it works very well and has a good design! I have only a little problem with the icons of Social Network, below the three icons, I see again two half icons under...Can you help me to fix this?


    Thank you!

  11. hi, its not getting aligned properly. please guide.

  12. i will use it on ma blog

  13. Would you be occupied with exchanging links?

  14. Aw, this was a really nice post. Spending some time and actual effort to create a top notch article… but what can I say… I hesitate a lot and never manage to get anything done.

  15. Great blog here! Also your website loads up fast! What host are you using? Can I get your affiliate link to your host? I wish my web site loaded up as quickly as yours lol

  16. Hi...I tried it to my blog followed your instruction but the result is a misalign one... I placed it at help thanks

  17. I think you are not using this widget on your blog now.
    A simple tip for all blogspot users :-
    Place css code first and then place html code in "html/javascript widget" widget, which can be placed anywhere in your blogspot blog.

  18. Sorry for very late reply, please give me link of your website.

  19. [...] box. Search for social media icons set from Google , for subscription box i wrote a tutorial for subscription box without any plugin. You can use social media icons in header, footer, sidebar or anywhere else where your design [...]

  20. Its worked in my blog :) thanks for your sharing