Blogger Series: Widgets and Hacks – ReadMore, Recent Comments, Recent Posts

Many of our visitors use Google's Blogger platform, so in this series I'll focus on Blogspot Widgets and Hacks. A sidebar widget such as "recent posts" can be created through Blogger's "add gadget" feature. A hack is tutorial code that the owner must carefully introduce into her template to make a feature such as the tabbed widget work. This post gives some tips on popular features you can add to your Blogspot blog with little effort: post summaries (ReadMore), recent comments, and recent posts.

The Blogger team has been furiously adding features that work seamlessly with your blog. Blogger is giving authors a decent alternative to heavy template editing. Having several third parties involved in your code carries risks, not the least of which is the complexity of finding the right spot for the hack or the heartache of having JavaScripts stop working. And what about those annoying credit links below each widget? Hopefully, soon a thing of the past.

ReadMore

If your blog publishes several long articles on the home page, don't make the readers scroll forever. With the readmore feature you can specify a summary for the homepage articles, followed by a "continue reading" link to the full post. Many refer to this as a "magazine style" design. Readers can scan down, read your tantalizing summaries and decide which post to read.

There are plenty of template hacks for this style, but most of them are too complicated for the non-techie to install. I recommend Blogger's Integrated ReadMore feature. Blogger refers to it as "After the Jump summaries."

How to Install Blogger's ReadMore:

1. For each post that appears on the home page, you need to decide where the summary text ends and insert the "jump" marker. Use Blogspot's new Editor toolbar to make this task even easier.Edit the post in Compose mode, place the cursor at the end of the summary and click the "jump to" icon – looks like a torn page.
   

   The separator appears across the page of your draft post, reminding you where the summary ends. This is where the "read more" link will appear after publishing.

   If you don't use the new Editor you can put the correct code in the HTML view of your draft post. It's just an html comment tag, a place holder for Blogger to separate the summary:
   <!--- more -->

2. Just publish the post and you're done. Unless – the "read more" is not there. Then your template is heavily modified and you have to dig in even further! This can happen with customized third-party templates. Google's help article for creating these '"jump" summaries tells you what to do (read the bottom of the article). Drop a comment if you need further clues.
   

TIP 1: Use Blogger's post template feature to remind you about the jump indicator. Blogger automatically seeds each new post with the text your specify. Go to Blogger Settings, Formatting and scroll to the "Post Template" section. For the ReadMore you might specify:
Summary Here
Place readmore here (icon or html tag)
Remainder Here
In fact, you can have any preformatted text here, e.g. your signature or reminders to subscribe. Links and image references must be in html.

Recent Comments

Many visitors are interested in community dialog. The recent comments widget gives you another way to direct readers to popular discussions. Until a few months ago the only way to add such widgets was via an HTML/JavaScript gadget. BloggerBuster provided the most reliable script. However, Amanda created a widget that is now featured (integrated) in Blogger's bag of gadgets. Installing the Blogger gadget is as easy as pie.

The older one has more functionality, but you can't argue with reliability --- Blogger's new gadget is the clear winner. Today I could not get the original BloggerBuster script to work. That situation is caused by third party hosting being unavailable. Sometimes scripts stop working in certain browsers. So I'll give you both methods and you can see the tradeofff and decide for yourself.

This picture shows the differences: (the JavaScript is on the left)

The new one eliminates the offsite credit link, but does not show the post title and did not interpret special characters like apostrophes (&#39; on first comment).

How to Install JavaScript Recent Comments Widget:

1. Go to Layout on the dashboard. Click "Add Gadget" and select the Html/Javascript gadget.
2. Copy and paste this code, but be sure to change the blog url to your own!

   <span style="align:left;">
   <script style="text/javascript" src="http://kunoichi.info/blogger_buster/comments.js"></script><script style="text/javascript">var a_rc=5;var m_rc=false;var n_rc=true;var o_rc=60;</script><script src="http://bpwebnews.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script></span>

3. Save and move to the sidebar. Hope it works every day. This is the one I use, and it has been pretty reliable.

How to Install Blogger's Recent Comments Widget:

1. Go to Layout on the dashboard. Click "Add Gadget." Instead of Basic gadgets, click "Most Popular" in the left sidebar.
2. You'll see this image:
   Click and follow the steps that let you define the height (e.g. 200px), number of comments to display (e.g. 10) and comments summary length (e.g. 150 characters).
3. Save and move to the sidebar.

Recent Posts

The directory of integrated Blogger widgets just keeps growing. Take a look and keep your Blogger gadgets current. Recent Posts are yet another way to attract new visitors to go more deeply into your blog. They will surely find great content.

For displaying recent posts, I use the BloggerWidgets version, shown on the left of this image. The other is from BloggerBuster.

BloggerWidgets (left) and BloggerBuster

Obviously, the BloggerWidgets version shows the post thumbnails.You can also display the posts from any blogger blog by supplying the url. Other options include

How to Install Advanced Recent Posts Widget:

1. Go to Layout on the dashboard. Click "Add Gadget." Search for "recent posts."
2. You'll see this image:
   
   Click and follow the steps that let you define the options you want.
   By Blogger Widgets
3. Save and move to the sidebar.

How to Install Standard Recent Posts Widget:

1. Go to Layout on the dashboard. Click "Add Gadget." Search for "recent posts."
2. You'll see this image:
   
   Click and follow the steps that let you define the options you want.
   By Blogger Buster
3. Save and move to the sidebar.

TIP 2: If you use the ReadMore feature, then it makes sense to list your Recent Posts in the sidebar for single pages only. To do that, you need to use a template hack that sets a conditional display of the Recent Posts widget.
Go to this post for a simple tutorial on hiding Blogger widgets. You can use the technique for any widget.

Conclusion of Blogger Series Part 1

Blogger has indeed come a long way in modernizing its publishing interface. It all started in August as part of their 10th Anniversary Celebration. Join us for future segments in this series. Be sure to sign up for our RSS feed.

Of course, leave a comment about your experience with these blogger widgets and let me know what you'd like to see next.