How to Add Resource Box in Blog Posts

• Tweet

• Tweet

On my other blog i’m using a little box after each posts to show some affiliate products. It is a type of resource boxMany People have ask me about how to add resource box in wordpress in blog posts. In this post i’m going to share the code to add the resource box after each blog posts.

Benefits of Having a resource box

1. Make money by recommending to your blog readers
2. Connect with your blog audience
3. Add a weird message or whatever you want

First of all downalod the image of stop sign from here – Download

Add this code in single.php after the content

<div class="resource_box"> <h3>We Recommend:</h3>
 <ul>
 <li><a href="http://www.technshare.com/go/thesis" rel="external" target="_blank">Thesis Theme</a> because we could add more power to our blog. Thesis is for people who want to take full-control of their site and customize it to their.</li>
 <li><a href="http://wpkeywordwinner.com/recommend/keywordwin" rel="external" target="_blank">Keyword Winner</a> is a premium wordpress plugin that enables you to do the keyword research right from your wordpress dashboard.</li>
 </ul>
 </div>

For Thesis Users

Add this code in single.php after the content

/* Resource Box */
function post_footer2() {
 if (is_single())
 {
 ?>
 <div class="resource_box">
 <h3>We Recommend:</h3>
 <ul>
 <li><a href="http://www.technshare.com/go/thesis" rel="external" target="_blank">Thesis Theme</a> because we could add more power to our blog. Thesis is for people who want to take full-control of their site and customize it to their.</li>
 <li><a href="http://wpkeywordwinner.com/recommend/keywordwin" rel="external" target="_blank">Keyword Winner</a> is a premium wordpress plugin that enables you to do the keyword research right from your wordpress dashboard.</li>
 </ul>
 </div>
  <?php
 }
}
 add_action('thesis_hook_after_post', 'post_footer2');

Add this code in your stylesheet (style.css) and for thesis users add this in custom.css

.resource_box { width:425px; margin-top:15px; height:165px; margin-left:-3px; border: 3.9px dashed #696969; padding-left:160px;padding-bottom:35px; background: transparent url('http://technshare.com/wp-content/themes/thesis_188/custom/images/stop3.png') no-repeat 10px 50%;}
.resource_box:hover {border:dashed 3.9px #2f9dcf; background: #eee url('http://technshare.com/wp-content/themes/thesis_188/custom/images/stop3.png') no-repeat 10px 50%;}
.resource_box h3 { color:#0e87c0; padding-top:0px; margin-top:16px; font-size:20px;color:#0E87C0;font-weight:bold;line-height:0;}
.resource_box ul { width:390px;}

Some sites that show resource box in blog posts are Technshare and FamousBloggers?

• Do you find this post useful or have anything to add?
• Do you ever thought of adding resource box?

Tagged as: resouce box, thesis, Tutorials

About Devesh
Devesh is a WordPress developer and blogger who loves to write about WordPress. You can follow him on Twitter at @devesh.

Google+ · Twitter · Visit my website →