Add Slim Subscription Box in Header to Increase Blog Readers

Not getting enough readers for your blog ? It doesn’t matter if blog content is unique or covers latest news, tRUth is that, a reader will come, read the content or will exit away and never return. While going through thecreatology stats, I analyzed that RSS Subscription was not performing well because of its placement in footer. Guess what, you can now see another slim subscription box above content box on thecreatology blog. It looks similar to the screenshot below:

Slim Subscription Box TheCreatology

The point is that, if you offer FREE Subscription of Blog Updates and maintain a subscriber list then it will certainly help you to get loyal visitors on blog. Well, if you want to add attractive subscription box in WordPress blog, then you can follow rest of the article.

In this article, we will learn to Add Slim Subscription Box in Header to Increase Blog Readers. Below are quick steps for the same:

Getting Started

Before we start with the tutorial, I want you to make sure that your WordPress, Plugins and Theme are updated with latest versions. If you are using Thesis Theme then you can Safely upgrade to latest version Thesis.

Add Subscription Box in Header

In this example, we are going to add RSS Subscription box which I believe is most commonly used and FREE too. Find the code for RSS Subscription box below and paste in single.php or  header.php file of the currently activated theme. If you are using Thesis Theme, then paste the code in custom_functions.php file using thesis hook before content. PHP code is as under:

NOTE: Make sure you take full backup of functions.php file or custom_functions.php file using FTP before modifying the original file or you can also refer to the article about how to safely edit custom_functions.php.

<!--Do not remove this line
Designed by TheCreatology-->
<div id="slim-subscribe">
<span>Need Blog Updates?</span>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=thecreatology', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<h4>Subscribe to TheCreatology via <a href="http://feeds.feedburner.com/thecreatology" target="_blank" rel="nofollow">RSS</a> | <a href="http://feedburner.google.com/fb/a/mailverify?uri=thecreatology">Email</a></h4>
<input type="text" name="email" value="Your e-Mail address..." onblur="if (this.value == '') {this.value = 'Your e-Mail address...';}" onfocus="if (this.value == 'Your e-Mail address...') {this.value = '';}">
<input type="hidden" value="thecreatology" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input type="submit" value="Subscribe">
</form>
</div>
<!--Designed by TheCreatology, Author: Aky Joe-->

Style Subscription Box CSS Code

After adding the HTML part, we definitely require to add CSS code to make it look attractive. Subscription box style code is as under:

NOTE: Make sure you take full backup of style.css or custom.css file using FTP before modifying the original file.

/*
Author: Aky Joe
URL: http://akyjoe.thecreatology.com
*/
#slim-subscribe{ background:#E2F7A8; border: 1px dashed #A6DFFA; height: 70px; margin: 20px 0 0; font-family: Arial;}
#slim-subscribe span{color: #f60; text-decoration: none; font-family: comic Sans MS; font-size: 26px; line-height: 65px; margin: 0 0 0 20px;}
#slim-subscribe h4{font-size: 12px; margin:5px 0;}
#slim-subscribe h4 a:hover{text-decoration: underline;}
#slim-subscribe form{float: right; margin: 5px 20px 5px 0;}
.txt-blog,.txt-blog:focus{background:#fff; border: 1px solid #b7cb80; border-radius:5px; padding: 6px 10px; width: 180px; font-size: 15px; color: #888;}
.btn-blog,.btn-blog:focus{background:#555; border: 0; border-radius:5px; padding: 6px 10px; font-size: 15px; color: #fff; text-shadow:1px 0 2px #333;}
.btn-blog:hover{background:#333;}

Did you Play with the Code ?

Did you copy the code as it is ? Well, if yes then I recommend you to replace HTML part saying “thecreatology” with your RSS feedburner ID. Also you can play with the CSS to change background color of box and font color matching blog theme. Don’t change its size as fat body covers a lot of space, so let it be slim like me mine. 😉

We’re Done!

Wow subscription box looks good now, ‘eh ? If not, I would say NEVER STOP PLAYING. And here we come to the end of tutorial add subscription box in header to increase blog readers. I hope it was easy, if not? you can also hire me to add-style subscription box for you. If you have any query or further assistance is required, post your feedback as a comment below.