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 alternative to nRelate and LinkWithin — you don't have to sign up for a service, share your stats, or show ads when you use this code.
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).
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.
This works on all of the standard Blogger templates except Dynamic Views, which does not accept customization.
This code only works on public blogs that use post labels to categorize posts. The labels must be displayed on the posts — hidden labels won't work.
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.
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.
- Place your cursor on the template code.
- Click once.
- 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.
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 with at least one label. If the 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.
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:
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
You can set a default image to show if some of your posts doesn't have images, an image fails to load, or your images are hosted on Flickr, Photobucket, or another non-Blogger host. 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.
Change the Post Label Selector
Some custom templates give the post labels a different class than the one used by the default Blogger templates. You can change the selector with the postLabels setting. Find the class selector for your post labels and insert it after the dot inside the single quotes. If you need help finding the selector, check out my tutorial on finding CSS selectors, or check with the person who designed your template.
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.