Georgia Lou Studios

Welcome to the Help Center!

Edit related posts section

Follow

Can I edit the Related Posts Section?

Yes, there are certain variables for the Related Posts Section that shows at the bottom of each single page post that can be edited.

These variables include:

  • Minimum # of posts to show
  • Maximum # of posts to show
  • Image size
  • Round Images
  • Show Related Section title
  • Show Related Label
  • Change the Related Section title
  • Add a default image
  • Enable Google Analytics Campaign Tracking

There are a few other options listed in the editable section of the code, however, we strongly recommend you not change the other settings unless you are very certain about what you are doing.

 View the video or see the written directions below.

 

Backup your template

Before you make any changes to your template, especially via the Edit HTML code editor, we STRONGLY recommend you download a backup of your current template setup.

 

  1. Log in to your Blogger dashboard.
  2. Go to the Theme configuration page.
  3. Click on the Backup/Restore button in the top right hand corner of the screen.  The Template > Backup/Restore box will open up.
  4. To backup your current template, click on the orange Download full template button. Your template will download to your computer’s download folder with a name like template-##############. If want to restore your old template at any time you can upload this file using the Backup/Restore feature.

 

How to Access the Related Posts Options

  1. Navigate to the Theme page on the Blogger Dashboard.
  2. Click on the gray Edit HTML button.
  3. The HTML editor screen will open.
  4. Left click anywhere in the code editor screen. Press the [Cntrl] + [F] keys to open the search box. (Command + F on Mac)
  5. Type “BEGIN RELATED POSTS” into the search box and hit the [Enter] key.
  6. You will see a section of code that starts with //CODE OPTIONS and //END CODE OPTIONS – DO NOT EDIT BELOW THIS LINE. The lines of code in this section are the only options you should edit.

Minimum Posts to Show

  1. Look for this piece of code: var minimum = 3;
  2. Change the “3” to any number you choose. For formatting reasons, we recommend from 2-4. Bear in mind if you choose a higher number and there are not that many posts on your blog that share a label/tag, no related posts will show in the Related Post section for that post.
  3. If you choose a number larger than 4, bear in mind that you may cause layout problems with the section.

 

Maximum Posts to Show

  1. Look for this piece of code: var maximum = 4;
  2. Change the “4” to any number you choose.
  3. If you choose a number larger than 4, bear in mind that you may cause layout problems with the section.

 

Edit Image Size

  1. Look for this piece of code: var imageSize = 150;
  2. The “150” in this line indicates the width and height of the post image displayed in the Related Posts Section. Your template may use a slightly different size.
  3. Change the “150” to any number you choose. A smaller number will make the image smaller; a larger number will make the image larger.
  4. Bear in mind that if you alter this setting, it may cause layout issues with your template, especially on mobile displays.

 

Round or Square Images

  1. Look for this piece of code: var roundImages = false;
  2. The default setting is “false”, resulting in square post images in the Related Posts section
  3. To choose round images, change the “false” to “true”.

 

Show or Hide Related Posts Section Title

  1. Look for this piece of code: var relatedTitle = true;
  2. This setting determines whether the gallery title will display at the top of the Related Posts Section, i.e. “More posts about”.
  3. The default setting is “true” and the gallery title is shown.
  4. To hide the section title, change the “true” to “false”.

 

Show the related label in the Section Title

  1. Look for this piece of code: var labelInTitle = true;
  2. This setting determines if the post label that relates the posts to the main post will appear in the section title. i.e. “More posts about fashion“.
  3. The default setting is “true” and the related post label is shown in the section title.
  4. To hide the related label, change the “true” to  “false”.

 

Change the Related Posts Section Title

  1. Look for this piece of code: var relatedTitleText = “more posts about”;
  2. This setting determines the text shown in the Related Posts Section Title.
  3. The default setting is “more posts about”.
  4. To change the Related Posts Section Title, change “more posts about” to whatever text you would like to appear as the Related Posts Section Title. i.e. “you might also like”.

 

Add a default image

  1. Look for this piece of code: var defaultImage = “”;
  2. This setting will supply a default image for any posts that do not have a featured thumbnail/image attached to them.
  3. You will need to supply the full image URL (web address) for your default image. You can upload it to your Blogger blog or a site like Flickr or Photobucket. Make sure the image is publicly viewable.
  4. To add a default image, insert your URL between the “”. i.e. “http://www.example.com/myimage.png”

 

Enable Google Analytics Campaign Tracking

  1. Look for this piece of code: var campaignTracking = false;
  2. The default setting for this option is “false”.
  3. To enable tracking, change the “false” to “true”.
  4. The following 3 lines of code are where you can place your Campaign Source, Campaign Medium and Campaign Name. Insert these variables between the “” for each line of code. You can get these from your Google Analytics setup.

 

Save your changes

  1. To save your template changes, click on the orange Save templatebutton.
  2. View your blog single post pages to see the effects of the changes.

Change the Related Posts Section Title

  1. Go back to the search box and search for “You might also like”.
  2. Hit the [Enter] key.
  3. The phrase will be highlighted within a large section of red text.
  4. Change the text to anything you like but be sure not to remove the “” or any other code.

 

Was this article helpful?
0 out of 0 found this helpful

Comments

Powered by Zendesk