Hello! Welcome to Smart Tech Carry Blog.

If you need to optimize your visitors and spark off your site visitors to examine greater articles to your blog, including Related Posts Accordion withinside the center of your Blog Post will simply assist you to attain this.

How to Add Stylish Middle Related Posts And Accordion widget in your Blog Post [Updated]

Today, we can make a Stylish Related Posts Accordion that may be delivered everywhere withinside the center of your Blogger Blog Posts. It might be beneficial to your site visitors as it will display a listing of articles matching what they may be presently reading. As it's going to display associated posts, so there might be a greater possibility that the tourist will click on that associated article.

Demo

How to Add Related Posts Accordion?

Adding Related Posts Accordion on your Blog Post will now no longer require a whole lot of understanding approximately HTML, CSS, or JS due to the fact I have already designed it for you. What you want to do is to enforce the codes in the proper vicinity on your Blogger Theme XML and upload the Related Posts Accordion HTML Codes withinside the center of your posts

Important!
Before we begin including codes in XML, I will advocate you to take a Backup of your cutting-edge theme. By risk if any trouble occurs, you may repair it later.

First of all Login into your Blogger Dashboard.
On Blogger Dashboard, click on Theme.
Click the arrow down icon after the 'customize' button.
Click Edit HTML, you'll be redirected to enhancing page.
Now seek the code ]]></b:skin> and paste the subsequent CSS Codes simply above to it.


/* Accordion by Freaks */
.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}

After doing so, seek the code </b:defaultmarkup> and paste the subsequent Codes simply above to it.

<!--[ Automatic Related Posts Script by Freaks ]-->
<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

Add the subsequent Codes simply below <data:post.body/>.


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

Step 8: Save the modifications via way of means of clicking on this icon

That's done! Now upload the subsequent HTML Codes on your Blog Posts anywhere you need to expose Related Posts Accordion.


<!--[ Related Posts Accordion by Freaks ]-->
<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 on your posts also, for that use the subsequent HTML codes:


<!--[ Accordion by Freaks ]-->
<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>

Refrence :
Smart Tech Carry

Go to Link

Rate This Article

Thanks for reading: How to Add Stylish Middle Related Posts And Accordion widget in your Blog Post [Updated]:)

Conclusion

In this article, I have shared How to Add Stylish Middle Related Posts And Accordion widget in your Blog Post [Updated]. I hope you have liked it Please do share it with your friends and follow our blog for more.

Join our Telegram Channel to get the lastest posts updates daily. Thank you!

Smart Tech Carry

How to Add Stylish Middle Related Posts And Accordion widget in your Blog Post [Updated]

How to Add Related Posts Accordion?

Alternative Usage

Conclusion

About the Author

إرسال تعليق

How to add Reaction Bar in Blogger (Lazy Load) [Updated]

How To Add Stylish About Us Sidebar Widget in Blogger New [Updated]

Android Neo Premium Responsive Blogger Template for Free

Plus UI 2.5 Typography [Updated]

Smart Tech Carry