• Beginner's Guide
  • Python is free and easy to learn after reading this tutorial.

Saturday, 21 April 2012

Subscribe by Email Widget for Wordpress and Blogger

Last updated on 02:30 - by Ramandeep Singh - Tags :

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

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque volutpat volutpat nibh nec posuere. A die shopuf pogest concludi cum administrasset slushie intus calidum brioche.
Follow me @ramantoday
Subscribe to this Blog via Email :

21 comments:

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

    ReplyDelete
  2. Just comment if you face any problem :)

    ReplyDelete
  3. Doesen't work at my site :(

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

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

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

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

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

    ReplyDelete
  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

    ReplyDelete
  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?

    Link: http://www.tripmagazine.it

    Thank you!

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

    ReplyDelete
  12. i will use it on ma blog

    ReplyDelete
  13. Would you be occupied with exchanging links?

    ReplyDelete
  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.

    ReplyDelete
  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

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

    ReplyDelete
  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.

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

    ReplyDelete
  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 [...]

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

    ReplyDelete

Text Widget

Recent News

About Us

© 2014 DesignRapid. Designed by Ramandeep Singh
Powered by Blogger.
back to top