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.
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 a home/index 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 show on the home page and won't interfere with "read more" links.
- Doesn't invent relationships between posts that aren't really related.
- Doesn't re-route readers through another site before taking them to a related post.
- Doesn't require you to sign up for an account.
- Doesn't include branding or backlinks.
- Doesn't serve ads to your readers.
Technical Requirements
Visible post labels are required. The code relies on your post labels to find relationships between posts. The labels must be displayed on the posts — hidden labels won't work. This works best on established blogs with well-organized labels.
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.
This works on all of the standard desktop Blogger templates except Dynamic Views, which does not accept customization.
This code does not work on private blogs.
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.
- 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. The gallery will not show on the preview, we're just checking for errors here. If you get an error message, press the "revert template" button and start over. Otherwise, press the "Save template" button and move on to the next step.
Check Your Gallery
Go to your live blog by clicking the "View Blog" button at the top of the screen. Click on any 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".
Troubleshooting
If you don't see the gallery, make sure you're on a post with at least one label. Remember that visible labels are required. If your labels are not displayed on your post, this code can't work.
If the post has at least one label on display, but there are not at least 3 other posts under that label, your gallery won't appear with the default settings. Check another post with more relatives, or move on to "Options" to see how to change the gallery's minimum.
The gallery matches posts by label. If your blog is brand new, or the post labels are inconsistent, you may not see the gallery. This is because I designed the gallery to only display posts that are related by label — if your post has no label relatives, it won't get a related posts gallery. If you add more posts and/or improve the post label strategy for your blog you'll see the gallery on more posts.
If you have a custom template and can't see the gallery, you may need to change the post label selector and/or the gallery's insertion point. They're the last two settings in the "Options" area.
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:
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.
Change the Gallery's Insertion Point
If you're using a custom template that doesn't have the same features as a standard Blogger template, or you just want to put the gallery in another part of your post, you can change where the gallery is inserted with the insertBefore setting. Find the CSS selector for the div you'd like to place the gallery 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.
