Add designed Automatic Related Posts to Your Blogger Blog

Adding automatic related posts to your Blogger blog is a fantastic way to boost user engagement, keep visitors on your site longer, and improve your SEO ranking. By displaying a list of related articles at the end of each post, you encourage readers to explore more content, increasing page views and reducing bounce rates. Whether you're a blogger sharing tutorials, a content creator building a niche site, or a hobbyist showcasing your passion, these related posts widgets offer a professional and interactive way to enhance your blog’s user experience.

These related posts widgets are powered by simple HTML, CSS, and JavaScript, pulling data from your Blogger feed to automatically display relevant posts based on labels (categories). They’re mobile-friendly, lightweight, and compatible with Blogger or any platform supporting custom code. The two styles provided—Vertical and Horizontal—offer unique aesthetics, ensuring a seamless fit with your blog’s design. Plus, features like smooth scrolling (Horizontal style) and toggle functionality make them user-friendly and engaging.

By integrating these automatic related posts, you create a dynamic browsing experience, encouraging readers to stay longer and explore more content. This not only builds trust but also signals to search engines that your site is valuable, improving your SEO performance.

Table of Contents

Overview of the Two Related Posts Styles

Before diving into the setup, let’s explore the two distinct styles for automatic related posts. Both use HTML, CSS, and JavaScript, leveraging Blogger’s JSON feed to display posts related to the current article’s labels. Here’s what makes them different:

Style 1 (Vertical Related Posts): A clean, card-based design with a vertical list of posts. Features a thumbnail image, post title, and a subtle hover effect. Ideal for blogs with a minimalist or professional aesthetic, offering a compact layout that fits well on any page.
Style 2 (Horizontal Related Posts): A modern, scrollable carousel with thumbnail images and overlaid titles. Includes navigation buttons for smooth scrolling and a gradient overlay for readability. Perfect for visually engaging blogs or those with image-heavy content.

These styles are inspired by modern web design trends and platforms like Medium and WordPress, making your blog feel professional and interactive. They’re fully responsive, ensuring seamless performance on desktops, tablets, and mobiles, and they’re optimized for fast loading to enhance SEO.

Install Automatic Related Posts on Blogger

Adding automatic related posts to your Blogger blog is straightforward with the provided HTML, CSS, and JavaScript code. Follow these steps carefully to ensure a smooth setup. If you’re new to coding, don’t worry—the instructions are beginner-friendly, but read attentively to avoid errors.

Important! Before adding any code to your XML theme, we strongly recommend creating a backup of your current theme. This ensures you can easily restore it if anything goes wrong.
Use only one of these two styles at a time to avoid conflicts.

Vertical Related Posts

A clean, vertical list of related posts with thumbnail images and post titles. This minimalist design is perfect for blogs aiming for a professional, clutter-free look.

Install Vertical Related Posts – Complete Steps

Go to Blogger Dashboard → Theme → Edit HTML.
Click Ctrl+F, find </head>
Copy CSS Code, and paste the CSS code above </head> tag

<style>
   /*<![CDATA[*/
/*--[ copyright edusynth.in ]--*/
.sp.arp{margin:25px auto;max-width:520px;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 4px 15px rgba(0,0,0,0.06);transition:all 0.3s}
.sp.arp summary{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;cursor:pointer;background:#f0f4ff;font-weight:700;font-size:16px;color:#1e40af;border-bottom:1px solid rgba(0,0,0,0.08);border-radius:12px 12px 0 0}
.sp.arp summary a{font-size:14px;color:#2563eb;text-decoration:none;font-weight:500;transition:color 0.3s}
.sp.arp summary a:hover{color:#1e3a8a}
.sp.arp summary::-webkit-details-marker{display:none}
.aRel{display:flex;flex-direction:column;gap:14px;padding:16px;max-height:280px;overflow:auto}
.aRel a{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:10px;transition:all 0.3s ease;text-decoration:none;background:#f9fafb}
.aRel a:hover{background:#eef4ff;box-shadow:0 4px 12px rgba(37,99,235,0.15)}
.aRel img{width:80px;height:80px;object-fit:cover;border-radius:8px;flex-shrink:0;background:#e0e7ff;transition:transform 0.3s ease}
.aRel a:hover img{transform:scale(1.05)}
.aRel span{font-size:15px;font-weight:600;color:#111827;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}
@media(max-width:520px){.aRel a img{width:64px;height:64px}
.sp.arp summary{font-size:15px;padding:12px 14px}
.sp.arp{margin:20px 10px;max-width:100%}
}
  /*]]>*/
</style>

Copy JavaScript Code:
Click Ctrl+F, find </body>, and paste the JS code above it.

<script>
 /*<![CDATA[*/ 
  /*--[ copyright edusynth.in ]--*/
(function(){ const box=document.querySelector('.aRel'), sum=document.querySelector('.sp.arp summary'), tog=document.createElement('a'); tog.href='#'; tog.textContent='Hide all'; sum.appendChild(tog); tog.addEventListener('click',e=>{ e.preventDefault(); const det=sum.parentElement; det.open=!det.open; tog.textContent=det.open?'Hide all':'Show all'; }); const blog=window.location.origin, feed=blog+'/feeds/posts/default?alt=json-in-script&max-results=7', labels=document.querySelector('a[rel="tag"]')?Array.from(document.querySelectorAll('a[rel="tag"]')).map(a=>a.textContent):[], label=labels[0]?labels[0]:'', url=label?feed+'&category='+encodeURIComponent(label):feed; window.handleRelated=function(json){ if(!json.feed.entry){ box.innerHTML='<div style="padding:16px;color:#6b7280">No related posts found.</div>'; return; } const cur=window.location.href; const frag=document.createDocumentFragment(); let count=0; json.feed.entry.forEach(e=>{ if(count>=6)return; const link=e.link.find(l=>l.rel==='alternate').href; if(link===cur)return; const title=e.title.$t; let img='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7yT7bVZp.png'; if(e.media$thumbnail)img=e.media$thumbnail.url.replace(/s72-c/,'s1600'); const a=document.createElement('a'); a.href=link; a.innerHTML=`<img loading="lazy" src="${img}" alt="${title}"><span>${title}</span>`; frag.appendChild(a); count++; }); box.innerHTML=''; box.appendChild(frag); }; const s=document.createElement('script'); s.src=url+'&callback=handleRelated'; document.body.appendChild(s); })(); /*]]>*/
</script>

Save theme settings.
Copy HTML Code:

<!--[Vertical Automatic Related Posts]-->
<details class='sp arp' open>
  <summary data-show='Show all' data-hide='Hide all'>Related Posts</summary>
  <div class='aRel'></div>
</details>

Open your Blogger post in HTML view or go to Layout → Add a Gadget → HTML/JavaScript.
Paste the HTML code where you want the related posts to appear (e.g., at the end of posts).
Save and preview your blog.

Horizontal Related Posts

A sleek, scrollable carousel of related posts with thumbnail images, overlaid titles, and navigation buttons. This modern design is ideal for visually engaging blogs.

Install Horizontal Related Posts – Complete Steps

Go to Blogger Dashboard → Theme → Edit HTML.
Find </head> tag
Copy CSS Code and paste the CSS code above </head> tag.

<style>
  /*<![CDATA[*/
/*--[ copyright edusynth.in ]--*/
.aRel.newHorz a:before{content:'';position:absolute;left:0;right:0;bottom:0;height:70%;background-image:linear-gradient(to bottom,transparent,rgba(0,0,0,0.7));-webkit-backface-visibility:hidden;backface-visibility:hidden;opacity:1;margin:0;transition:opacity .25s ease}
.sp.arp{margin:24px 0;border-radius:14px;overflow:hidden;background:linear-gradient(145deg,#f7faff,#ffffff);box-shadow:0 6px 20px rgba(0,0,0,.05);font-family:system-ui}
.sp.arp summary{display:flex;justify-content:space-between;align-items:center;padding:10px 18px;cursor:pointer;font-weight:700;font-size:15px;color:#0f172a;background:linear-gradient(to right,#e8f1ff,#f6f9ff);border-bottom:1px solid #e5e7eb}
.sp.arp summary::-webkit-details-marker{display:none}
.sp.arp summary a{font-size:13px;color:#2563eb;text-decoration:none}
.relBox{position:relative;overflow:hidden}
.aRel.newHorz{display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px;scrollbar-width:none}
.aRel.newHorz::-webkit-scrollbar{display:none}
.aRel.newHorz a{position:relative;flex:0 0 auto;scroll-snap-align:start;width:240px;height:150px;border-radius:12px;overflow:hidden;text-decoration:none;color:#fff;background:#000;transition:transform .3s ease,box-shadow .3s ease}
.aRel.newHorz img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.aRel.newHorz a:hover img{transform:scale(1.08)}
.aRel.newHorz span{position:absolute;bottom:0;left:0;right:0;padding:2px 4px;background:linear-gradient(to top,rgba(0,0,0,.7),rgba(0,0,0,0));font-size:14px;font-weight:600;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.relBtn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.85);border:none;border-radius:50%;width:22px;height:22px;padding:0px;box-shadow:0 3px 12px rgba(0,0,0,.15);cursor:pointer;font-size:14px;color:#2563eb;transition:background .2s;z-index:5}
.relBtn:hover{background:#f1f5f9}
.relBtn.left{left:6px}
.relBtn.right{right:6px}
@media(max-width:520px){.aRel.newHorz a{width:180px;height:120px}
.relBtn{display:none}
}
  /*]]>*/
</style>

Find </body> tag
Copy JavaScript Code and paste the JS code above </body>

<script>
/*<![CDATA[*/ 
/*--[ copyright edusynth.in ]--*/
(function(){ const box=document.querySelector('.aRel.newHorz'), sum=document.querySelector('.sp.arp summary'), tog=document.createElement('a'); tog.href='#';tog.textContent='Hide all';sum.appendChild(tog); tog.addEventListener('click',e=>{ e.preventDefault(); const det=sum.parentElement; det.open=!det.open; tog.textContent=det.open?'Hide all':'Show all'; }); const blog=window.location.origin, feed=blog+'/feeds/posts/default?alt=json-in-script&max-results=5'; const labels=document.querySelectorAll('a[rel="tag"]'); const label=labels[0]?labels[0].textContent:''; const url=label?feed+'&category='+encodeURIComponent(label):feed; window.handleRelated=function(json){ if(!json.feed.entry){ box.innerHTML='<div style="padding:16px;color:#6b7280">No related posts found.</div>'; return; } const cur=window.location.href; const frag=document.createDocumentFragment(); json.feed.entry.forEach(e=>{ const link=e.link.find(l=>l.rel==='alternate').href; if(link===cur)return; const title=e.title.$t; let img='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7yT7bVZp.png'; if(e.media$thumbnail)img=e.media$thumbnail.url.replace(/s72-c/,'s320'); const a=document.createElement('a'); a.href=link; a.innerHTML=`<img loading="lazy" src="${img}" alt="${title}"><span>${title}</span>`; frag.appendChild(a); }); box.innerHTML=''; box.appendChild(frag); }; const s=document.createElement('script'); s.src=url+'&callback=handleRelated'; document.body.appendChild(s); const left=document.createElement('button'),right=document.createElement('button'); left.className='relBtn left';left.innerHTML='&#10094;'; right.className='relBtn right';right.innerHTML='&#10095;'; box.parentElement.appendChild(left);box.parentElement.appendChild(right); left.addEventListener('click',()=>box.scrollBy({left:-250,behavior:'smooth'})); right.addEventListener('click',()=>box.scrollBy({left:250,behavior:'smooth'})); })();
/*]]>*/
</script>

Save theme settings.
Copy HTML Code:

<!-- [Horizontal Related Posts] -->
<details class='sp arp' open>
  <summary data-show='Show all' data-hide='Hide all'>Related Posts</summary>
  <div class='relBox'>
    <div class='aRel newHorz'></div>
  </div>
</details>

Paste in post (HTML view) or in Layout → Add a Gadget → HTML/JavaScript.
Save and preview.

You only need to add the CSS and JS once in your theme. For each related posts section, use the HTML code in your post’s HTML view or as a gadget. If using both styles, add unique class names (e.g., aRel-vertical, aRel-horizontal) to avoid conflicts.

Features & Who Can Use

Automatic Post Detection: Pulls related posts based on Blogger labels, ensuring relevance without manual curation.
Toggle Functionality: Show/hide related posts with a clickable “Show all”/“Hide all” link, enhancing user control.
Fully Responsive: Adapts to all screen sizes, with scrollable overflow for horizontal style on mobile.
Navigation Buttons (Style 2): Smooth left/right scrolling for the horizontal carousel, hidden on mobile for simplicity.
Modern Design: Card-based (Style 1) or carousel (Style 2) layouts with hover effects and thumbnail images, mimicking professional platforms.
Lightweight: Uses Blogger’s JSON feed, ensuring minimal impact on site speed.

Who Can Use: Bloggers, content creators, educators, or anyone running a Blogger site who wants to increase engagement and showcase related content dynamically.

The Meta Behind These Widgets: These designs are inspired by modern web trends and platforms like Medium and WordPress. They leverage Blogger’s native JSON feed to fetch posts, ensuring reliability and seamless integration. The open-source approach makes them easy to customize and maintain, boosting SEO through increased user interaction and page views.

Automatic Related Posts FAQ

What are automatic related posts?

They’re dynamic widgets that display a list of posts related to the current article, based on Blogger labels. They improve user engagement and keep visitors on your site longer.

How do the two styles differ?

Style 1 is a vertical list with cards, ideal for minimalist blogs. Style 2 is a horizontal carousel with navigation buttons, perfect for visually engaging blogs.

Can I use these on platforms other than Blogger?

These are designed for Blogger’s JSON feed, but you can adapt them for other platforms by modifying the JavaScript to use a different data source (e.g., WordPress REST API).

Can I customize the appearance?

Yes, tweak the CSS to change colors (e.g., background:#fff to #000), fonts, or image sizes. Modify the JS to adjust the number of posts or add features like a “Read More” button.

Will these slow down my site?

No, they use Blogger’s native JSON feed, which is lightweight and cached, ensuring minimal impact on page speed while boosting engagement.

What if no related posts are found?

The widget displays a “No related posts found” message. Ensure your posts have labels (categories) to improve relevance.

Can I show related posts without labels?

Yes, the script falls back to showing recent posts if no labels are found. For best results, assign relevant labels to your posts.

Final Thought

Automatic related posts are a simple, modern, and fully responsive way to elevate your Blogger blog’s engagement. They make your content more discoverable, encouraging readers to explore related articles and spend more time on your site. By using HTML, CSS, and JS, you can quickly add these widgets to your blog, enhancing user experience and SEO performance.

These designs leverage Blogger’s JSON feed, ensuring reliability and ease of use. They’re perfect for bloggers of all levels, offering a balance of simplicity and interactivity. Test one style first, customize it to match your blog’s aesthetic, and watch your audience engagement soar!

EduSynth

Add designed Automatic Related Posts to Your Blogger Blog

Overview of the Two Related Posts Styles

Install Automatic Related Posts on Blogger

Vertical Related Posts

Horizontal Related Posts

Features & Who Can Use

Automatic Related Posts FAQ

Final Thought

Post a Comment

Beautiful CSS Box-Shadows Studio morethan one lakh

Designed Contact Form with FormSubmit: Simple & Secure Setup

Automatic Table of Contents for Blogger: Free HTML/CSS/JS Widget Setup (2025 Guide)

Display Advanced LaTeX formulas, reactions and equations on Your Website

Social Media Link Box Generator Tool