How to Add Stylish EMail Subscription Box Below Every Post in WordPress?

03:11 Posted by Nirmal Gupta

Large number of Subscribers gives more value to any blog or website. Most of the new bloggers place their E-Mail subscription box in sidebar. However it would be interesting for you to know that, You can get more subscribers after placing the E-Mail subscription box below every post. It is logical as well because visitors can subscribe to your blog, After finding your content useful. According to me, it is an ideal place to use EMail subscription box. If you have little knowledge of HTML then You can easily do this on Blogger. However WordPress doesn’t provide that much simplicity due to the complex nature of PHP. Today, I will show you the process to add Stylish EMail Subscription Box Below Every Post in WordPress.

127 How to Add Stylish EMail Subscription Box Below Every Post in WordPress?

How to Add Stylish EMail Subscription Box Below Every Post in WordPress?

Log into your WordPress Admin Panel. You can do this by entering your username and password at
http://www.yourblog.com/wp-admin
Navigate to Appearance>>Editor. The screenshot of the same is shown below:

After that, Click on “post-single.php” .You will find this template on the right hand side. The screenshot of the same is shown below:

33 How to Add Stylish EMail Subscription Box Below Every Post in WordPress?

Search for “<?php the_content(); ?>” .
Paste the below given code, Just below <?php the_content(); ?>

'' <style>
.tbisubscribe {
border: 1px solid #D3D3D3;
padding: 8px;
width: 700px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.tbisubscribe:hover {
-moz-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
-webkit-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
}
.tbimailbox {
border: 1px solid #D3D3D3;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset;
-webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
color: #666;
font: 14px “trebuchet ms”, sans-serif;
padding: 7px 15px;
width: 400px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.tbimailbox:hover {
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.tbisubmit {
font: bold 12px Tahoma, Geneva, sans-serif;
font-style: normal;
color: #ffffff;
background: #ff5714;
border: 0px solid #ffffff;
text-shadow: 0px -1px 1px #222222;
box-shadow: 2px 2px 5px #000000;
-moz-box-shadow: 2px 2px 5px #000000;
-webkit-box-shadow: 2px 2px 5px #000000;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
padding: 8px 15px;
cursor: pointer;
margin: 0 auto;
}
.tbisubmit:active {
cursor: pointer;
position: relative;
top: 2px;
}
.tbisubmit::-moz-focus-inner {
border: 0;
padding: 0;
margin: 0;
}
</style>
<link href=’http://fonts.googleapis.com/css?family=Oswald’ rel=’stylesheet’ type=’text/css’ />
<div class=’tbisubscribe’>
<div style=’color: #666666; font-weight: bold; font: 22px Oswald, cursive; margin: 0px 0px 30px 15px;’>Get Free Updates in your Inbox</div>
<div style=’margin: 10px 0 0 6px;’>
<form action=’http://feedburner.google.com/fb/a/mailverify’ class=’emailform’
method=’post’ onsubmit=’window.open('http://feedburner.google.com/fb/a/mailverify?uri=tricksonblogging', 'popupwindow', 'scrollbars=yes,width=600,height=520');return true’
style=’margin: 0pt;’ target=’popupwindow’>
<input name=’uri’ type=’hidden’ value=’tricksonblogging‘ />
<input name=’loc’ type=’hidden’ value=’en_US’ />
<input class=’tbimailbox’ name=’email’ onblur=’if (this.value == "") {this.value = "Enter your email…";}’
onfocus=’if (this.value == "Enter your email…") {this.value = ""}’
type=’text’ value=’Enter your email…’ />
<input alt=” class=’tbisubmit’ title=” type=’submit’ value=’Subscribe’/>
</form>
</div>
<div style=’border: none; color: #666666; font: 22px Oswald, cursive; margin: 25px 0 0 5px;’>Follow us on:</div>
<div style=’margin: -32px 0 0 120px;’>
<a href=’https://www.facebook.com/pages/tricksonblogging/227989713996089‘ target=’_blank’ title=’Join us on Facebook’><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAMwBfftj_GB7ZmYpmB5m3N8rfFSqcW4PyQw8xsmWbtJoHDGfttHwX3apfoA-5pCOWKqWqhLf6VX0nzjbZE5tcfsp03EZDq-NHI5G0qRn_ivjq7PV7U4xojT2CIg6tiI1bGKDDbMBXxGg/s1600/facebook500.png’ alt=’facebook’/></a>
<a href=’https://twitter.com/gupta10nirmal‘ rel=’nofollow’ target=’_blank’
title=’Follow us on Twitter’><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG54g8znuRqcuYX8xxKpdfVhPU1cwV4qx27PCCuTxsfdYUl3TO3yCw82-IY6AIb8WZDkjvSzxqOZxAOmvF0yON0kvcZGYC64e3h3pARMSRooT_tuEf54hhvHMnt7D4YrZPr7E5e0S7cmw/s1600/twitter.png’ alt=’twitter’/></a>
<a href=’https://plus.google.com/115554880628992999071‘ rel=’nofollow’ target=’_blank’
title=’Follow us on Google+’><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLM-nb9g5JdA_6F9vn0jBcHG-jkUzg2qOdeCuG4k4MfqEJK1ZULPPXRKYDRxZYeBs-4kCsI1kosRuDQyWs97XgW5UgaOm2BEq2PS6Mv24sAMrgbOMPUqppByvu0pQgY5-0D8fLmh-NRDI/s1600/googleplus-revised.png’ alt=’gplus’/></a>
<a href=’http://pinterest.com/gupta10nirmal/tricksonblogging/‘ rel=’nofollow’ target=’_blank’
title=’Follow us on Pinterest’><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCbYn3d6XsRT8fqTv9bBosrIMaUtncvtWNvccFriVI1FNhjbwEqW_ynZfAbfuDcU3aXfGtcqQytitQg4DAHZCTWuv7UWI1vEeOgMbRgcIjis1UQsQbcsAdZLTCIq1yxvXgXTwqFRGLndk/s1600/pinterest.png’ alt=’pinterest’/></a>
<a href=’http://feeds.feedburner.com/tricksonblogging‘ rel=’nofollow’ target=’_blank’
title=’Subscribe to RSS’><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5x7Ij4CCAC6SsoidfYsE9mPkcLosznfWbkK7BgZmKHgWVMl4fRz2UJwI2-xDnb7iO1W2iosEljkoB5RMuPafK9svW25lPUzf0zTkKOFWvx8qAoyZvdsZ811V4-J2wHvNg_uz002DQNOo/s1600/rss.png’ alt=’rss’/></a>
</div>
</div> ''

Make the Necessary changes as per the below given instructions.

Replace tricksonblogging with your Feedburner’s feed name.
Replace “https://www.facebook.com/pages/tricksonblogging/227989713996089″ with your own Facebook Fan Page Url.

Replace “https://twitter.com/gupta10nirmal″ with your Twitter Url.

In “https://plus.google.com/115554880628992999071″. Replace 115554880628992999071 with your own profile ID.

Replace “http://pinterest.com/gupta10nirmal/tricksonblogging/” with your own Pinterest Url.

Replace “http://feeds.feedburner.com/tricksonblogging” with your own Feedburner’s Feed url.

Finally click on “Update File ” button and enjoy.

Can I check the Demo?

Obviously. You can check the working demo. There is no need to go anywhere. I have used it in this blog. To check it, simple scroll down this page. You will see the above mentioned subscription box below each post.

Is that cool?

From the Editor’s Desk.

As I mentioned earlier, Placing Stylish EMail Subscription Box Below Every Post in WordPress will increase your chances of attracting more subscriber to your blog. That’s probably the reason why, I always recommend bloggers to use an EMail subscription box at this position. I prefer it over Pop-up box, which can be irritating for users.

Just try it and give your valuable feedback. If you are finding any difficulty then Don’t hesitate to ask anything.

Tags: Blogging Tips, Blogging Tricks, Subscription box, Widgets, Wordpress

Share your views...

0 Respones to "How to Add Stylish EMail Subscription Box Below Every Post in WordPress?"

Blogging Tips and Tricks