The NetMediaBlog

  • Home
    • About NetMediaBlog
    • Contributors
    • Guest Posting
    • Contact
  • Technology
    • Computers
      • Softwares
      • Downloads
      • Gaming
    • Smartphones
    • Internet
      • Tech Guide
  • Tutorials
  • Blogging Tips
    • WordPress
    • Blogger
    • SEO
  • Social Media
    • Facebook
    • Twitter
    • LinkedIn

How to add a customized email subscription box in WordPress

April 10, 2012 By Nwosu Desmond 3 Comments

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

Other Posts You May Like...

  • stock-market-3Top WordPress Plugins to Boost Your Site’s Traffic
  • Wordpress-start-image5 Great WP Widgets for Your Blog
  • GoogleAdsense1Preparing for an AdSense Application
  • downloadWhen you should make your AdSense application
  • 5 Tips to Improve Your Blog’s Crawling and Indexing FrequencyHow to Improve Your Blog’s Crawling and Indexing Frequency

Filed Under: Blogging Tips, How-To Tagged With: Customize, customized email subscription box, edit code, email subscription box, Google, program, wordpress

Comments

  1. MD.Nurul Alam says

    April 11, 2012 at 9:41 am

    This is a nice post

    take over lease 

  2. Ramandeep Singh says

    April 23, 2012 at 4:45 pm

    Love it , I also designed a new subscription box widget for blogger and wordpress
    http://www.designrapid.com/minimal-design-subscription-box-tutorial/

    Hope you like it

  3. Darko says

    April 27, 2012 at 2:44 am

    I don’t recommend this. It has inline CSS and don’t support that. Try to separate CSS and HTML for better SEO

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Subscribe To My Blog

Get the latest content first.


Recommended Articles

  • Gol.ge:Download free PC games, movies, music, and software
  • Giveaway #1: Norton 360 (2013) Plus 1Yr License for 1PC
  • Web TV: How I watch TV online for free
  • How to spot fake Samsung Phones
  • Replyz shutting down, what Replyz alternatives are out there?

Recommended from BroadedNet

We are upgrading BroadedNet, Blog Traffic Tool. Please keep reading www.netmediablog.com
Get Netmediablog Extension

Find Us on Facebook

Recent Comments

  • Sugar Daddy on Search Engine Optimization Tips for Images
  • Sugar Mummy on How an Active Blog Affects Your Google Rank
  • Larry Frank on 15 Highly Optimized WordPress Themes for Search Engines
  • Steven on How to transfer Contacts from Samsung Galaxy S2 to Galaxy S4
DMCA.com
  • About NetMediaBlog
  • Contributors
  • Advertise With Us
  • Contact Us
  • Guest Posting
  • Privacy Policy

Disclaimer Copyright © 2021 Netmediablog . Log in