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'>"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if></b:loop></b:if>];
var autoRelatedConfig = {
homePage: "<data:blog.homepageUrl.canonical/>",
numPosts: 10,
titleLength:"auto",
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)+"…":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 parts10: Maximum no. of related posts (eg. 15)auto: Maximum no. of title characters (eg. 30), leave it auto for full titlefalse: 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!