How To Create CBI Looking RSS Subscription Box Below Each Post : Thesis Tutorial

Last time I shared a tutorial on How To Display Twitter & Facebook Profile Links Of Post Author In Thesis Theme. Today, I received an email from one of our reader Arun, asking for the code of the subscription box that I’ve placed beneath each post. Considering his request I am sharing the code. Though there are various similar codes available on other blogs also but this code of mine is a bit different as it has a RSS icon at the top right corner that makes this code unique. I hope you will like it.

The code

The code below is divided into two sections.

• Code to be entered in Custom_Functions.php file
• Code to be entered in Custom.css

Copy and paste the code in Custom_Functions.php file

function post_beneath_rss() {if (is_single()){ ?>
<div><div><a href="http://feeds.feedburner.com/creativebloggingideas">RSS</a></div>
<h4>Subscribe to CreativeBloggingIdeas.com</h4>
<p>Free with subscription<br/>
"How To Write High Quality Content & 3 Super Ways To Get Huge Traffic From It"</p> <a
href="http://feeds.feedburner.com/creativebloggingideas">Click here to subscribe</a><br />
<font size="1px" color="#909192">You will receive download link in your mailbox in confirmation mail</font>
</div>
<?php }}add_action('thesis_hook_after_post_box', 'post_beneath_rss');

Copy the code below and paste it in Custom.css file

.subscribe-now {
 margin-top: 10px;
 margin-bottom: 10px;
 margin-right: auto;
 margin-left: auto;
 position:relative;
 width:430px;
 border:1px solid #e0d5d5;
 background:#f5f2f2 url(http://i48.tinypic.com/333bvhf.png) no-repeat 10px bottom;
 padding:15px 32px 10px 123px;
 font-weight:bold;
 font-size:14px;
 line-height:16px;
 text-align:center;
}
.subscribe-now div {
 position:absolute;
 right:-9px;
 top:-13px;
 width:42px;
 height:42px;
 background:url(http://i45.tinypic.com/2zr2fj9.png) no-repeat;
}
.subscribe-now div a {
 display:block;
 width:100%;
 height:100%;
 overflow:hidden;
 text-indent:-999em;
}
.subscribe-now h4 {
 font-size:1em;
 color:#f00;
 margin:0 0 1.5em;
}
.subscribe-now p {

 margin:0 0 1.5em;
}
.subscribe-now a,
.subscribe-now a:visited {
 color:#3333f5;
 text-decoration:underline;
}
.subscribe-now a:hover,
.subscribe-now a:focus {
 text-decoration:none;
}

Output

The output will look something like the box I’ve beneath this post.

If you’re facing any type of problem in using this tutorial, feel free to contact me through comment box.

Related posts:

1. How To Display Twitter & Facebook Profile Links Of Post Author In Thesis Theme
2. How To Give Shadow Effect To Post Titles In WordPress Thesis Theme
3. How To Display Custom Message To Your Commentators : Customizing Comment Form In Thesis Theme
4. Does Your Blog Has An Archive Page : Essential Blog Element Series Part 2
5. What Basically Is A Search Engine Optimized Theme

Tagged as: Thesis Theme