Home
Blogger

How to Add Stylish Middle Related Posts Accordion in your Blog Post

Related Articles in the middle of your Blog posts will be helpful for your visitors as it will show a list of more matching articles.
How to Add Stylish Middle Related Posts Accordion in your Blog Post
Related Posts in the middle of your posts will be helpful for your visitors as it will show a list of more matching articles, they can view and read as per their wish. Hello! Welcome to Fineshop Blog. If you want to optimize your traffic and prompt your visitors to read more articles on your blog, adding Related Posts Accordion in the middle of your Blog Post will surely help you to achieve this. Today, we will make a Stylish Related Posts Accordion that can be added anywhere in the middle of your Blogger Blog Posts. It will be helpful for your visitors because it will show a list of articles matching with what they are currently reading. As it will show related posts, so there will be more chances that the visitor will click on that related article. How to Add Related Posts Accordion? Adding Related Posts Accordion in your Blog Post will not require much knowledge about HTML, CSS or JS because I have already designed it for you. What you need to do is to implement the codes at right place…

About the author

~ Hello World!

5 comments

  1. Vimara Porto
    Excellent system! Is there a solution to avoid systematically placing HTML code in posts?
    Thanks
    1. Deo K.
      You can place it before or after <data:post.body/> in your template XML.
    2. Vimara Porto
      I will do this. Thank you very much! 👍
  2. Vimara Porto
    I would like the list of related posts at the end of the post to be limited to just the linked titles of the post. It would be lighter and more sober. If possible, I would really appreciate it if you could let me know how to proceed. Thanks.
    1. Deo K.
      Related posts includes the post with same label. So, you can add same label to the posts you want to show.
      If you want related posts to appear at the end of every post you can use:
      <!--[ Automatic Related Posts by Fineshop ]-->
      <b:if cond='data:view.isPost and data:post.labels'>
      <div class='acdn'>
      <!--[ Related Posts ]-->
      <div class='ac'>
      <div class='acCont'>
      <input class='acMn' id='offrelPost' name='relatedposts-1' type='checkbox'/>
      <label class='acTtl' for='offrelPost'>
      <i class='acIcn'></i>

      <!--[ Related Posts Title ]-->
      <span>More Articles on this topic</span>
      </label>

      <!--[ Related Posts Content ]-->
      <div class='cont'>
      <div id='autoRelatedPost'></div>
      </div>
      </div>
      </div>
      </div>
      <b:include data='post' name='auto-relatedPost'/>
      </b:if>
      instead of:
      <!--[ Automatic Related Posts by Fineshop ]-->
      <b:include cond='data:view.isPost' data='post' name='auto-relatedPost'/>

      (in Step 7)