Creating a "post-options" box beneath each of your posts

When a visitor to your blog has finished reading a post, it can be helpful to see options of what they could do next. In this blog, I have added a "post options" box after the body of my posts (like the image on the right), which offer links to post a comment, email the post and AddThis buttons for readers to add the post to their favorite social bookmarking sites. In this tutorial, I'll explain how you can feature s similar "post options" menu beneath your own blog posts.

First I will explain how to add a post options menu which you can add simply by copying and pasting the relevant code. After installation, this will need no further customization to work correctly in your blog. Afterwards, I will demonstrate some customization options which you may like to add to this, such as "email the author" and the drop-down AddThis button. These extra options will require some customization on your behalf, which is why I'll discuss them separately from the main hack.

There are three main steps to installing this hack in your blog template. It is slightly more complicated than other hacks I have posted, but once installed this can add great value to the interactivity of your posts, and can also help keep visitors on your site for longer.

Here is the step by step installation for the "post-options" box:

1. Make a back up of your existing template
   
   Before making any changes to your template, you should always make a back up of your existing template, in case you make a mistake and need to revert back to this later.
   
   You can do this by going to Template>Edit HTML in your Blogger dashboard and clicking on the "Download full template" link near the top of the page.


2. Add some code to the posts section of your template
   
   This part of the installation cab be quite awkward as the method differs depending on where you want the post-options box to be displayed.
   
   The easiest place to place the code directly beneath the post body section. In this case, you should find the following line of code in your template:
   

   <p><data:post.body/></p>

   
   Immediately after this line, you should add the following block of code:
   
   If you are confident in editing your template, you may prefer to insert the code above into your post-footer section, or after the backlinks section instead.
   
   You may wish to save your template at this point.


3. Add some style to the "post-options" box"
   
   The section you have added to your template should now display the "post-options" box beneath your posts on post pages. However, you may prefer to style this box to have a border and some padding, as this makes it more distinctive from the main body of the post.
   
   In the post-options box used in this blog, I added the following lines to the b:skin section of my template:
   

   
   .what-next {
   
   width: 250px;
   
   border: 1px solid $bordercolor;
   
   padding: 0 10px 10px 10px;
   
   margin: 10px 10px 0 0;
   
   float: left;
   
   }

   
   
   The easiest place to add this code is immediately before the closing </b:skin> tag.
   
   If you prefer, you can modify this style to better suit your own blog template.

Once you have saved the modifications to your template, take a look at a post-page and see the new post-options box featured beneath your blog posts.

The "email this post" link

If you have chosen to display "email post links" beneath your blog posts, these should already be displayed in the post-options box. If you haven't yet enabled this option, simply go to Template>Page elements in your Blogger dashboard and click on the "Edit" link in the Blog Posts section. You can then tick the "Show email post links" box, and the email post links will be displayed in your post options box.

Customizing the post-options box

The default installation for the post options box will work for all templates, and need not be configured further to display everything correctly. However, you may want to add further links or options to this box, which may need to be configured for your particular blog.

To add more options, you will need to add your links/options in list-item tags, like this:

<ul>

<li><a class='snap_no_shots' href='#comments'>Post a comment<span class='post-comment-link'> </span></a></li>

<li> <!-- email post links -->

<b:if cond='data:post.emailPostUrl'>

<span class='item-action'>

<a class='snap_noshots' expr:href='data:post.emailPostUrl' title='Email Post'>

Email this post <span class='email-post-icon'> </span>

</a>

</span>

</b:if></li>



<li>Add your links or options here</li>

</ul>

Here are some examples of options you may like to add:

• Contact the author
  
  For this you would need to add a link to your contact page, or perhaps your profile page, like this:
  

  <li><a href="http://your-contact-page-url.blogspot.com">Contact the author</a></li>



• AddThis social bookmark buttons
  
  I was hoping to add these to the default installation, but AddThis now require that you register to use their free service.
  
  If you would like to use AddThis social bookmark buttons, please register for your free account, then create your button and use the code provided. You can then add your button code like this to the post-options box:
  

  <li><--AddThis code here --></li>



• Any other options?
  
  Any options you would like to display can be inserted in a similar way, by adding the code or content between <li> and </li> tags, as described above.

I hope you have found this tutorial useful, and that it has helped you to insert a "post-options" box beneath your own blog posts. Please feel free to leave your comments and opinions below.

If you enjoyed this tutorial and wish to receive updates of future content, please consider subscribing to the Blogger Buster feed.

Technorati Tags: post | options | blog+readers | social+bookmarks