If you enjoy our website, feel free to connect with us on Google News or become a part of our Telegram Group for more updates and engaging discussions.
Home
Blogger
Script
Tutorial

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

Inserting related articles within your blog posts enhances user experience, presenting a concise list of additional matching content to your visitors.
How to Add Stylish Middle Related Posts Accordion in your Blog Post

Hello Welcome To It Is Unique Blog - Official!

To enhance your website traffic and encourage your audience to explore additional articles on your blog, incorporating a Related Posts Accordion within the heart of your blog post can prove highly effective.

In today's tutorial, we'll create a chic Related Posts Accordion that can seamlessly integrate into the middle of your Blogger Blog Posts. This addition aims to enhance the user experience for your visitors by presenting a curated list of articles closely aligned with their current reading. By showcasing these related posts, the likelihood of visitors clicking on and exploring additional relevant articles is significantly increased.

How to Add Related Posts Accordion?

Incorporating a Related Posts Accordion into your blog post is a straightforward process that doesn't demand extensive knowledge of HTML, CSS, or JS. I've already crafted the design, so all you need to do is seamlessly integrate the provided codes into the appropriate section of your Blogger Theme XML. Simply insert the HTML codes for the Related Posts Accordion into the middle of your posts, and you're good to go.

Important!
Prior to proceeding with the addition of codes to your XML, I strongly advise you to create a backup of your existing theme. This precautionary measure ensures that in the event of any unforeseen issues, you can easily restore your previous theme settings.

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 'customize' button.

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

Step 5: Now search the code ]]></b:skin> and paste the following CSS Codes just above to it.

If your template includes a dark mode feature and you desire a distinct color scheme for dark mode, feel free to tailor the codes according to your preferences. Each template may have a unique dark mode class, so kindly make the necessary adjustments by replacing the designated class with the dark mode class specific to your template.

/* Accordion by It Is Unique Official */
.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}
  
.darkMode .acdn .ac{background:#252526;border-left-color:#4c4c4e}
.darkMode .acdn .cont, .darkMode .acdn .cont a, .darkMode .acTtl, .darkMode .acMn:checked ~ .acTtl{color:#fefefe}
.darkMode .acTtl .acIcn:before, .darkMode .acTtl .acIcn:after, .darkMode .acMn:checked ~ .acTtl .acIcn:before, .darkMode .acMn:checked ~ .acTtl .acIcn:after{background:#fefefe}

Step 6: After doing so, search the code </b:defaultmarkup> and paste the following Codes just above to it.

<!--[ Automatic Related Posts Script by It Is Unique Official ]-->
<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://blog.fineshop.eu.org",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 marked parts
10: Maximum no. of related posts (eg. 15)
auto: Maximum no. of title characters (eg. 30), leave it auto for full title
false: Replace with true if you want to open related posts in New Tabs

Step 7: Add the following Codes just below to <data:post.body/>.

<!--[ Automatic Related Posts by It Is Unique Official ]-->
<b:include cond='data:view.isPost' data='post' name='auto-relatedPost'/>

Step 8: Save the changes by clicking on this icon .

You're all set! Now, incorporate the following HTML codes into your blog posts wherever you wish to display the Related Posts Accordion.

<!--[ Related Posts Accordion by It Is Unique Official ]-->
<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>

The display of Related Posts is determined based on the assigned labels of each post.

Alternative Usage

You have the option to utilize these HTML codes as an Accordion within your posts. Simply incorporate the following codes for the desired accordion effect.

<!--[ Accordion by Fineshop ]-->
<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 And Live Preview Example:

Interested in witnessing the Related Posts Accordion Style in action? Take a sneak peek before integrating it into your blog posts. Let's explore it together!

Accordion_Paragraph_1

Accordion_Paragraph_2

Accordion_Paragraph_3

Accordion_Paragraph_4

Terms of Use

If you intend to incorporate this Related Posts Accordion into your website, kindly refrain from altering the attributes within the code. Any modifications may result in the accordion not being displayed on your site.

When revising an article concerning this Related Posts Accordion or Accordion utilizing the provided codes, it is imperative to include a reference. The reference should be visibly presented and clickable, directing readers to our website: https://www.itisuniqueblog.com. Failure to include the reference may lead to legal actions being taken.

Disclaimer:
Warning - All content and posts on this platform are the intellectual property of It Is Unique Official. Unauthorized copying, reproduction, or distribution of our content is strictly prohibited. Any attempt to replicate or use our material without explicit permission may result in legal action. Please respect our intellectual property rights and contact us for inquiries regarding the use of our content. Thank you for your understanding and cooperation.

Conclusion

That concludes the guide on integrating the Related Posts Accordion into your Blogger Blog Posts. I trust you found this article enjoyable. Feel free to share it, and if you encounter any challenges or have questions, don't hesitate to ask in the comment section. Thank you!

Success isn't an endpoint, nor is failure a definitive outcome. It's the bravery to persist that truly matters in the journey of life.

You may like these posts

Post a Comment

Enter Image URL / Code Snippets / Quotes / name tag, then click parse button accordingly that you have entered. then copy the parse result and paste it into the comment field.


Cookie Consent

We use cookies on our website to analyze traffic, enhance your browsing experience, and remember your preferences. By continuing to use our site, you consent to our use of cookies. You can manage your cookie preferences in your browser settings. For more information, please read our Privacy Policy.

More Details
Google Translate
Bookmark Post