Creating a "post-options" box beneath each of your posts
October 19, 2007 Filed under: Customize your Blogger Template 15 Comments
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:
- 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. - 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. - 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.
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
Discuss "Creating a "post-options" box beneath each of your posts"
Comments? Questions? Let us know what you think! Join the discussion >>
My name is Amanda Fazani and I write Blogger Buster to help other Blogger users make the most of their Blogger blogs.
Hi Amanda. I am not sure what the relevance of your entry is. All of it is redundant. You cover every option already available to everyone i.e. emailing the post, commenting on the post, bookmarking the post. The only new or "not already offered" tidbit was contacting the author of the post.
Anyone can bookmark a post or add it to their favorites with a click of a button in their browser. Anyone can comment on a post by clicking on "post a comment" under the post (unless the blog author has turned this feature off on purpose). The same is true for emailing the post to a friend.
So I guess my question is, did you just do this to redecorate the already available features and make then redundant?
Hello Irocket,
As I explained in this post, the default installation of the post-options box ensures that this will work for any blog. All of the code for the options I did feature will work without the need for customization. This includes the links to add to Digg, Technorati and Google Bookmarks (features which are not available in default Blogger templates). Using these bookmarking services is not the same as adding to your browser favorites, since these services are "social" bookmarking services which can help drive more traffic to our blogs.
The point of this article is to show bloggers how they can customize their templates in a way which makes such features more accessible and easily seen by readers. Also, bloggers can add their own "customized" features to this box, which most likely will be coded specifically for their blog URL or account username.
Like yourself, many people prefer to use the default methods available in their template. This tutorial offers an alternative way to display these options instead.
Hope this explains my motivations. Perhaps you will find other tips here more useful for your own needs instead.
Best wishes,
Amanda
Amanda,
I just wanted to let you know how much I love the "Post Options" box. It really is a useful and good look for the blog.
Thanks a million for all of your help and "tolerance" with me. I'll try to read more carefully in the future.
Hello amanda,I have a problem.I need to start my blog such that i need to have content boxes for pasting the HTML codes in them.can you please tell me the code for that..I hope you understood my problem..The main thing is I need to get them in the posts..
@Shelia: I'm glad this works well for you now, you're most welcome!
@Sanath: if you need to display code in your posts, you don't need a certain template to be able to do this! I use two different methods here: "escaped" html code which appears in a blockquote (best for short sections of code), and iframes which enclose a text file of the code (better for longer sections of code).
"Escaped" code means you have to substitute characters such as >, < and " for their HTML equivalent in order to make it appear in the post as code, and not function as code.
If you need specific advice about this, feel free to send me an email and I can explain these methods in detail for you.
Best wishes,
Amanda
Hi Amanda,
I've tried this a few times and nothing changes in by blog. I'm expanding the widgets template first. Is there anything else I need to adjust before I do this?
I used your hack to add a third column to my blog and I'd love to add this function, too.
Thanks!
Hi,
I posted a question on 2/8/08 and I just realized I should clarify that I have my blog set up to allow comments and to have people send emails already, so those settings are OK. I just think this box would make it more clear and attractive. k
Thanks!
Hey, I'd love to do this but have it appear at the bottom of the posts even if people don't click on the post to open it up. Most of my posts are short and people don't need to click on them. ... Is there a way to get this box to display on my main page with each post?
Thanks so much!!!
Hi Amanda,
I recently change my template and in the process have lost the "post a comment tag" if someone enters my site through Google reader. It only appears by entering through my main page. It is troublesome for some of my regular readers. I have spent countless hours on this and I know the answer will be a snap for you.
Thanks if you can help.
For Janeywan,
I've sent you an email about this problem with the code you need to add to your template. I hope this will be useful to you!
For Kris: Sorry I missed your comment until now. Do you still need help with this? If so, feel free to send me an email and I'll send you the code with instructions for placement in your blog template.
Best wishes,
Amanda
Amanda,
I am new to blogging, and I just started a blog for my non-profit org. This box would be great, but I can't seem to have it appear in the posts even though I have followed your html directions. Is there anything else that I should be doing in editing my template.
Thanks, Ezra
Ezra, I will just chime in here if it's OK with Amanda. Are you clicking on the headline of the post and it's still not there? The way it is configured, you won't see it on the main page of the blog.
Kris,
Ok, thanks for the clarification. I now see the box when I click on a headline. Is there any way to have this box under each post without having to click on each headline?
Ezra
Ezra,
Yes, there is. Amanda is the queen of this and can probably show you.
For Kris: Thanks for lending a hand here. I love to see conversations happening in the comments and appreciate your help :)
For Erza: Sorry about the confusion with this widget! If you prefer to display this on every page of your blog, simply delete the first and last lines in the code above (these are the first and last lines which contain <b:if...> and </b:if> statements).
Once you've deleted these two lines, the post options box will appear on every page, not only on the post pages.
If you like, I can send you the revised code as a text file which you could copy and paste into your template (the code was a little too long to paste into a comment).
Hope this is useful to you!
Best wishes,
Amanda