How to add a customized email subscription box in WordPress

Customizing the email subscription box definitely can make the difference between the number of visitors that visited your blog and the number of people that were attracted to subscribe to your feeds. By default the email subscription box looks like this

One may worry it is not pretty enough to attract visitors to subscribing to your feeds. I worried same until I decided to customize the email subscription box to make it look better just maybe more visitors can subscribe to my feeds. So I started my search on the internet, I visited so many websites all to no avail. Their explanations or customizations weren’t satisfactory to me so I decided to do it myself since I have a lot of web designing experience. Below is a sample of the customized email subscription box on my blog.

I know there are so many people like me out there who want to customize their email subscription box and couldn’t find a perfect solution to this problem. I am going to save you a lot of troubles.

 

<style type=’text/css’>
.sub-box{
width: 300px;
background: #fff;
padding: 2px 5px 7px 7px;
border: 1px solid #000;
border-radius: 15px;
}
.sub-box:hover{
border-style:dashed; 1px solid: #389af2;
}
.followlinks h1{
font-family:Cabin Condensed;
font-weight: bold;
color: #000;
padding: 0px 0px 2px 40px;;
font-size:17px;
}
.followlinks ul{
font-family:Cabin Condensed;
font-weight: bold;
}
.followlinks ul li{
float:left;
width:90px;
padding-left:40px;
margin:0 0 0 5px !important;
line-height:35px !important;
}
.followlinks ul li a{
font-size:20px !important;
text-decoration:none;
font-weight:normal;
}
.followlinks ul li.otrss{
background:url(http://3.bp.blogspot.com/-xOwt1EX4VX4/TteO7sxzSxI/AAAAAAAABFk/RNFj1bsukpQ/s1600/rss-ot.png) no-repeat scroll left center transparent;
}
.followlinks ul li.otgoogleplus{
background:url(http://3.bp.blogspot.com/-GW70c2ukQsI/TteO6ikOudI/AAAAAAAABFc/Cjqxp-ZVbX4/s1600/googleplus-ot.png) no-repeat scroll left center transparent;
}
.followlinks ul li.ottwitter{
background:url(http://1.bp.blogspot.com/-LTDd7jrc55s/TteO8nMa6uI/AAAAAAAABFs/r6aMf7ApC6Q/s1600/twitter-ot.png) no-repeat scroll left center transparent;
}
.followlinks ul li.otfacebook{
background:url(http://4.bp.blogspot.com/-RtDc-xIqgtg/TteO56LVTgI/AAAAAAAABFU/iWhsfa01wEo/s1600/facebook-ot.png) no-repeat scroll left center transparent;
}
form.emailform{
margin:5px 0 0;
display:block;
clear:both;
}
.emailtext{
background:url(http://4.bp.blogspot.com/-DMrSxx8BJqo/TteQx1ijO2I/AAAAAAAABF0/Qd1ROb_8oeA/s1600/ot-mail.png) no-repeat scroll 4px center transparent;
padding:7px 15px 7px 35px;
color:#444;
font-weight:bold;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
width: 220px;
}
.emailtext:focus{
outline: none;
}
.sub-button{
color:#444;
font-weight:bold;
text-decoration:none;
padding:6px 10px;
border:1px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-goog-ms-border-radius: 5px;
border-radius: 5px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#FBFBFB&#39;, endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
.joinemailupdates{background:-moz-linear-gradient(top,#57ABFE 0%,#0080ff 100%); background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#0080ff)); border: 1px solid #0080ff; text-transform: none; font:bold 12px arial; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; cursor:pointer;}
.mbtbar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 34px; vertical-align: middle; }
.mbtbar .emailsub .emailupdatesform input.joinemailupdates{background:#0080ff; border: 1px solid #0080ff; text-transform: uppercase; font:bold 12px arial; color: #fff; height: 25px; padding: 3px 12px 0 12px; margin: 0 0 0 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; cursor:pointer;}
.sub-button:hover{
background: -moz-linear-gradient(top, #e7e7e7 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e7e7e7), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#e7e7e7&#39;, endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );
background: linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);
}</style>
<script type=’text/javascript’>
WebFontConfig = {
google: { families: [ &#39;Cabin+Condensed::latin&#39; ] }
};
(function() {
var wf = document.createElement(&#39;script&#39;);
wf.src = (&#39;https:&#39; == document.location.protocol ? &#39;https&#39; : &#39;http&#39;) +
&#39;://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js&#39;;
wf.type = &#39;text/javascript&#39;;
wf.async = &#39;true&#39;;
var s = document.getElementsByTagName(&#39;script&#39;)[0];
s.parentNode.insertBefore(wf, s);
})(); </script>
<div class=’sub-box’>
<div class=’followlinks’>
<div dir=”ltr” style=”text-align: left;” trbidi=”on”>
<img alt=”SUBSCRIBE.gif (300&#215;52)” src=”https://lh5.googleusercontent.com/-nc3U0dsJMsc/TXiAnZP_S2I/AAAAAAAADWA/ZAy1U4dQgsg/s1600/SUBSCRIBE.gif” /></div>
<ul>
<li class=’otrss’><a href=’http://feeds.feedburner.com/netmediablogfeeds‘ target=’_blank’>RSS</a></li>
<li class=’otgoogleplus’><a href=’https://plus.google.com/b/117016552386591209118/‘ target=’_blank’>Google+</a></li>
<li class=’ottwitter’><a href=’http://twitter.com/mavtrevor‘ target=’_blank’>Twitter</a></li>
<li class=’otfacebook’><a href=’http://www.facebook.com/pages/NetMediaBlog/295675637144325‘ target=’_blank’>Facebook</a></li>
</ul>
</div>
<br/>
<div style=’text-align: left; display: inline-block;’>
<form action=’http://feedburner.google.com/fb/a/mailverify’ class=’emailform’ method=’post’ onsubmit=’window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=netmediablogfeeds&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true’ target=’popupwindow’>

<div class=”emailupdatesform”>
<form action=”http://feedburner.google.com/fb/a/mailverify” method=”post” target=”popupwindow” onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=netmediablogfeeds‘, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520′);return true”><input gtbfieldid=”10″ class=”emailupdatesinput” name=”email” value=”Enter your email here…” onblur=”if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here…&#39;;}” onfocus=”if (this.value == &#39;Enter your email here…&#39;) {this.value = &#39;&#39;;}” type=”text” /><input value=”netmediablogfeeds” name=”uri” type=”hidden” /><input value=”Submit” class=”joinemailupdates” type=”submit” /></form></div></div></div>

Steps to customizing the email subscription box:

1. Copy the code above
2. Login to your blog’s Dashboard
3. Navigate to appearance>Widgets
4. Choose a Text Widget and past the code
5. Save the widget
6. Refresh your blog and see the change.

Customization note:  Please edit the texts in RED and replace it with your appropriate links.

I hope you love this post, if you have any contributions please use the comment box below . You should also Subscribe to NetMediaBlog Feeds by Email. Remember to share this post with your friends. Hope you read my earlier post on “How to add Twitter follow me button on your WordPress” ?