How to Add Stylish Middle Related Posts

© The Web Trick Blog | Related Posts Accordion for Blog Posts

Hello! Welcome to The Web Trick Blog.
Adding a Related Posts Accordion in the middle of your Blog Post will undoubtedly help you maximize your traffic and encourage your visitors to read additional articles on your blog.

Today, we'll create a Stylish Related Posts Accordion that you can place amid your Blogger blog posts. It will be beneficial to your visitors since it will display a list of articles that are similar to what they are reading right now. Because it will display relevant postings, the visitor will be more likely to click on that linked content.

---

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 code at the right place in your Blogger Theme XML and add the Related Posts Accordion HTML Codes in the middle of your posts.

Important!Before we begin adding XML codes, I strongly advise you to make a backup of your current theme. If an issue arises, you can always restore it later.

Step 1: First of all Login to your Blogger Dashboard.

Step 2: On Blogger Dashboard, click Theme.

Step 3: Click the arrow down icon next to the 'Customize' button.

Step 4: Choose Edit HTML, you will be redirected to the editing page.

Step 5: Next search the ]]></b:skin> code and paste the CSS code just above the ]]></b:skin> code.

If your template contains a dark mode function, and you want it to be a different color when it's turned on, you can change the codes to suit your needs. Each template may have a different dark mode class, so please adjust accordingly. You can replace the marked class with the dark mode class from your template.

/* Accordion by The Web Trick */
.acdn{position:relative;list-style:none;margin:30px 0;padding:0;font-size:14px;line-height:1.7em;font-family:inherit}
.acdn .ac{width:100%;padding:20px 0 20px 15px;margin:10px 0;background:#f0f0ff;border-radius:10px;border-left:4px solid #8a8aff;box-shadow:0 5px 10px rgba(51,51,51,.1)}
.acdn .ac:nth-child(4n + 1){background:#f0f0ff;border-left-color:#8a8aff}
.acdn .ac:nth-child(4n + 2){background:#fff0f3;border-left-color:#ff8aa1}
.acdn .ac:nth-child(4n + 3){background:#f0faff;border-left-color:#8ad8ff}
.acdn .ac:nth-child(4n + 4){background:#fff7f0;border-left-color:#ffc08a}
.acdn .cont{margin:0;padding-left:27px;padding-right:27px;position:relative;overflow:hidden;max-height:0;transition:all .3s ease;color:#08102b}
.acdn .cont ul, .acdn .cont ol{padding-left:13px}
.acdn .cont li{padding:0}
.acdn .cont a{text-decoration:none;color:#08102b}
.acdn .cont a:hover{text-decoration:underline}
.acdn p:first-child{margin-top:0}
.acdn p:last-child{margin-bottom:0} 
.acTtl{display:flex;align-items:center;font-weight:700;color:#08102b}
.acTtl span{display:flex;flex-grow:1}
.acTtl span:before{content:'';padding-left:15px}
.acIcn{flex-shrink:0;display:flex;align-items:center;width:12px;height:12px;position:relative}
.acIcn:before, .acIcn:after{content:'';display:block;width:100%;height:2px;border-radius:2px;background:#08102b}
.acIcn:after{position:absolute;transform:rotate(90deg)}
.acMn{display:none}
.acMn:checked ~ .acTtl .acIcn:after{visibility:hidden;opacity:0}
.acMn:checked ~ .cont{max-height:100vh;padding-top:15px;padding-bottom:8px}
  
.drK .acdn .ac{background:#252526;border-left-color:#4c4c4e}
.drK .acdn .cont, .drK .acdn .cont a, .drK .acTtl, .drK .acMn:checked ~ .acTtl{color:#fefefe}
.drK .acTtl .acIcn:before, .drK .acTtl .acIcn:after, .drK .acMn:checked ~ .acTtl .acIcn:before, .drK .acMn:checked ~ .acTtl .acIcn:after{background:#fefefe}

Step 6: Next search the </b:defaultmarkup> code and paste the below code just above </b:defaultmarkup> code.

<!--[ Automatic Related Posts Script by The Web Trick]-->
<b:includable id='auto-relatedPost'>
  <script>
    var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop></b:if>];
    var autoRelatedConfig = {
      homePage: &quot;<data:blog.homepageUrl.canonical/>&quot;,
      numPosts: 10,
      titleLength:&quot;auto&quot;,
      newTabLink: false,
      callBack:function(){}
    }
  </script>
  <script>/*<![CDATA[*/ var autoRelatedIndex,showAutoRelated;null!=document.getElementById("autoRelatedPost")&&function(a,n){var e,u={homePage:"https://your_blog_address.com",numPosts:7,titleLength:"auto",containerId:"autoRelatedPost",newTabLink:!1,callBack:function(){}};for(e in autoRelatedConfig)u[e]=("undefined"==autoRelatedConfig[e]?u:autoRelatedConfig)[e];function l(e){var t=a.createElement("script");t.async="async",t.rel="preload",t.src=e,n.appendChild(t)}function c(e){var t,a,n=e.length;if(0===n)return!1;for(;--n;)t=Math.floor(Math.random()*(n+1)),a=e[n],e[n]=e[t],e[t]=a;return e}var o="object"==typeof labelArray&&0<labelArray.length?"/-/"+c(labelArray)[0]:"";autoRelatedIndex=function(e){var t=e.feed.openSearch$totalResults.$t-u.numPosts,e=(e=1,t=0<t?t:1,Math.floor(Math.random()*(t-e+1))+e);l(u.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+o+"?alt=json-in-script&orderby=updated&start-index="+e+"&max-results="+u.numPosts+"&callback=showAutoRelated")},showAutoRelated=function(e){var t,a,n=document.getElementById(u.containerId),l=c(e.feed.entry),o="<ul>",r=u.newTabLink?' target="_blank"':"";if(n){for(var s=0;s<u.numPosts&&s!=l.length;s++){a=l[s].title.$t,a="auto"!==u.titleLength&&u.titleLength<a.length?a.substring(0,u.titleLength)+"&hellip;":a;for(var d=0,i=l[s].link.length;d<i;d++)t="alternate"==l[s].link[d].rel?l[s].link[d].href:"#";o+='<li><a href="'+t+'" '+r+"><span>"+a+"</span></a></li>"}n.innerHTML=o+="</ul>",u.callBack()}},l(u.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+o+"?alt=json-in-script&orderby=updated&max-results=0&callback=autoRelatedIndex")}((window,document),document.getElementsByTagName("head")[0]); /*]]>*/</script>
</b:includable>

Change the part marked in the code above10: The maximum number related posts (eg. 15)
auto: Maximum number of characters in the title (eg. 30), for a full title, set it to auto.
false: If you wish to open related posts in new tabs, replace false withtrue.
url: Don't forget to copy the url/link of the Homepage and replace the url "https://your_blog_address.com/" that has been tagged, with the url of your website.

Step 7: Next copy the code below and paste it just below the <data:post.body/> code.

<!--[ Automatic Related Posts by The Web Trick ]-->
<b:include cond='data:view.isPost' data='post' name='auto-relatedPost'/>

Step 8: Finally, Save your theme by clicking icon at the top right of HTML editor.

That's it! Now paste the below HTML code in your blog posts where you want the show Related Posts Accordion to appear.

<!--[ Related Posts Accordion by The Web Trick ]-->
<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>

Related Posts are shown as per Posts' Labels.

Alternative Usage

You can use this as Accordion in your posts also, for that use the following HTML codes:

<!--[ Accordion by The Web Trick ]-->
<div class='acdn'>
  <!--[ Accordion 1 ]-->
  <div class='ac'>
    <div class='acCont'>
      <input class='acMn' id='offaccor1' name='accordion-1' type='checkbox'/>
      <label class='acTtl' for='offaccor1'>
        <i class='acIcn'></i>
        
        <!--[ Accordion Title ]-->
        <span>Accordion_Title_1</span>
      </label>

      <!--[ Accordion Content ]-->
      <div class='cont'>
        <p>...</p>
      </div>
    </div>
  </div>
  
  <!--[ Accordion 2 ]-->
  <div class='ac'>
    <div class='acCont'>
      <input class='acMn' id='offaccor2' name='accordion-2' type='checkbox'/>
      <label class='acTtl' for='offaccor2'>
        <i class='acIcn'></i>
        
        <!--[ Accordion Title ]-->
        <span>Accordion_Title_2</span>
      </label>

      <!--[ Accordion Content ]-->
      <div class='cont'>
        <p>...</p>
      </div>
    </div>
  </div>
  
  <!--[ Accordion 3 ]-->
  <div class='ac'>
    <div class='acCont'>
      <input class='acMn' id='offaccor3' name='accordion-3' type='checkbox'/>
      <label class='acTtl' for='offaccor3'>
        <i class='acIcn'></i>
        
        <!--[ Accordion Title ]-->
        <span>Accordion_Title_3</span>
      </label>

      <!--[ Accordion Content ]-->
      <div class='cont'>
        <p>...</p>
      </div>
    </div>
  </div>
  
  <!--[ Accordion 4 ]-->
  <div class='ac'>
    <div class='acCont'>
      <input class='acMn' id='offaccor4' name='accordion-4' type='checkbox'/>
      <label class='acTtl' for='offaccor4'>
        <i class='acIcn'></i>
        
        <!--[ Accordion Title ]-->
        <span>Accordion_Title_4</span>
      </label>

      <!--[ Accordion Content ]-->
      <div class='cont'>
        <p>...</p>
      </div>
    </div>
  </div>
</div>

Demo

You can check out directly from here before adding the Article Rating Widget before you apply it on your Blogger Website.
Let's have a peek!

View Demo

Conclusion

The purpose of this tutorial is to show you How to add Related Posts Accordion in Blogger Blog Posts. I hope you find this information interesting. Please share this article with your friends and family. And if you have any questions or encounter any difficulties in any aspect, please ask them in the comment section.

Reference:
www.fineshopdesign.com

You May Like These Posts:

Go to Link