Learn to customize your own blog with confidence

A New Related Posts Gallery for Blogger

related posts gallery for blogger

Today I'm going to show you how to add a customizable related posts gallery to the bottom of your Blogger post pages. This is an independent gallery option — you don't have to sign up for a service, share your stats, or show ads when you use this code.

Demo:

This is the related posts gallery I use on this blog. Scroll down to the bottom of this post for a live demo of this code (if you're on the home page, click into this post to see the gallery).

Features

What You Can Do With This Gallery:
  • Set the thumbnail image size.
  • Choose square or round thumbnails.
  • Give the gallery a custom title, or leave the title off.
  • Set a minimum and maximum amount of posts to show in the gallery.
  • Track gallery clicks with Google Analytics campaign tagging. This is a good way to confirm if the related posts gallery is actually engaging your readers.
  • Customize the CSS. The default CSS is very basic and won't interfere with your template's design. If you're comfortable with CSS, you can customize it to coordinate with your theme.
What This Related Posts Gallery Doesn't Do:
  • Doesn't require you to sign up for an account.
  • Doesn't include branding or backlinks.
  • Doesn't serve ads to your readers.
  • Doesn't re-route readers through another site before taking them to a related post.
  • Doesn't show on the home page and won't interfere with "read more" links.

Technical Requirements

This code only works on blogs that use post labels to categorize posts.

This works on all of the standard Blogger templates except Dynamic Views, which does not accept customization.

This gallery uses Blogger's built-in post thumbnails, so it works best on blogs that use Blogger's image hosting. If you host your images on Flickr, Photobucket, or another non-Blogger host, you can set a default image for all posts in the code options.

Installation

Back Up Your Template

Backup instructions here. Do not skip the backup.

Open the Template Search

Next, open your template by clicking the "Edit HTML" button below your "Live On Blog" screenshot.

We're going to use the template search feature to search your code. Your browser's search function can't search the code, so be sure to follow these directions exactly.

  1. Place your cursor on the template code.
  2. Click once.
  3. Press CTRL and F at the same time (PC) or Command and F (Mac).

The search box will open in the upper right corner of the template editor.

Blogger template search box

Enter </body> in the search box, then press enter. The code will "jump" to the </body> tag in your template and highlight it in yellow.

Copy the Code

Select and copy the entire code from the code box below. Just copy the code, not the line numbers.

If the embedded code doesn't load for you, you can copy it from here.

Paste the Code

Paste the code into your template, directly above the </body> tag. Next, press the "preview template" button. If you get an error message, press the "revert template" button and start over. Otherwise, press the "Save template" button.

Check Your Gallery

Go to your live blog and click on a post. Scroll to the bottom of the post and look for your related posts gallery. If it looks good, you're done! Enjoy your gallery.

If you need to change anything, move on to the next section: "Options".

If you don't see the gallery, make sure you're on a post that with at least one label. If post has a label, but there are not at least 3 other posts under that label, your gallery won't appear with the default settings. Move on to "Options" to see how to change the gallery's minimum.

Options

You can edit the gallery options in the "Code Options" section of the code. The code options section is between two comment lines that read //CODE OPTIONS and //END CODE OPTIONS (you can use the template search feature to find them). The options section looks like this:

screenshot of code options

Each option setting starts with the word "var" and ends with a semicolon (;). Be careful not to delete the semicolon if you update an option. After you update an option, press the "preview template" button to check for errors before saving.

Set the Maximum Posts Searched

The maxSearched setting allows you to control how far back into your archives the related posts gadget will search. The maximum is 500 posts. If you want the gallery to focus on newer posts you can decrease the search number.

Set a Minimum and Maximum Post Count for the Gallery

Set the minimum to lowest amount of posts you want to show in the related posts area. Set the maximum to the limit of posts you want to show in the related posts area.

Set the Thumbnail Image Size

The imageSize setting controls the thumbnail width and height. The image size you set here should not exceed the actual size of your post images. Just enter the size as a number, leave off the px.

Enable Round Thumbnails

Set the roundImages setting to true for round images in Chrome, Firefox, Safari, and the latest version of Internet Explorer.

Remove the Gallery Title

Set relatedTitle to false to remove the gallery title.

Remove the Label from the Title

The label that relates the posts in your gallery is added at the end of the gallery title by default. Set labelInTitle to false to remove it.

Change the Gallery Title

Change the text inside the quotation marks ("") for the relatedTitleText setting. Make sure to leave the quotation marks in place.

Add a Default Image

If some of your posts don't have images (or your images are hosted on Flickr, Photobucket, or another non-Blogger host) you can set a default image. Enter the direct link to your default image inside the quotation marks for the defaultImage setting. For best results, size the image to the width and height of your imageSize setting.

Enable Google Analytics Campaign Tracking

Set campaignTracking to true to enable Google Analytics campaign tracking. Then, fill in your source, medium, and name for your campaign between the quotation marks for the campaignSource, campaignMedium, and campaignName settings.

Move the Gallery to Another Part of Your Post

The gallery appears above your post footer by default, but you can move it. Find the CSS selector for the div you'd like to place it above and enter it between the single quotes for the insertBefore setting. Remember to include the dot (.) for class or hash/pound mark (#) for ID.

Show Off Your Gallery!

I'd love to see your galleries! Leave a comment with a link to your blog, Tweet at me @MMosley, or comment on this tutorial's post on Google+.

Back to Top