Easy Ways to Change the Layout of Related Posts

Pro Blogism
Easy Ways to Change the Layout of Related Posts

Note: This article is no longer relevant to the latest version of the Fletro Pro template

One of the advantages of this template is that it includes a widget Related Posts with 5 Styles different which you can change whenever you want. This widget is also equipped with a lazy image, which means that the images on this related post will not affect the loading of your blog.

Most of the style related posts are less visible on the desktop display, but the difference will be very visible when opened on the mobile display. Here are 5 Related Posts styles in this template:

Tutorial Changing Layout Related Posts

By default this template uses related post style 4, to change it on the Edit HTML menu, please find the code below and change the part that has been marked with a number 1 to 5. The quick steps are looking for , the arrangement of the code will look like this:

<b:includable id='post-related' var="post">  <div class="related-posts">    <div id='related-posts'/>    <script>      var labelArray = [<b:if cond='data:post.labels'><b:loop values="data:post.labels" var="label">"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if></b:loop></b:if>];      var relatedPostConfig = {        homePage: "<data:blog.homepageUrl/>",        widgetTitle: "<h3 class='heading'>data:messages.youMayLikeThesePosts/></h3>",        numPosts: 6,        summaryLength: 20,        titleLength:"auto",        thumbnailSize: 275,        noImage: "data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=",        containerId: "related-posts",        newTabLink: false,        moreText: "Read more",        widgetStyle: 3,        callBack:function(){}      }    </script>

Information:

  • The related Post in the color block above is the title of this widget, you can change the sentence to ‘Related Articles’, ‘You Might Also Like’ and so on.
  • numPosts: 6 – Is the number of posts that appear in the related post
  • thumbnailSize: 275 – Image size on the related post
  • noImage: – Thumbnail default url when there is no image in the post
  • newTabLink: false – Deactivate open links in new tabs when clicked, change to ‘true’ to activate
  • widgetStyle: 3 – The style related post numbers used can be changed to numbers 1 to 5

Please try this style related post template one by one and see the difference.