Related post add

1st code

 

PAST CSS( /B:SKIN>)JUST UP

.related-posts-container {
  max-width: 800px;
  font-family: "Roboto", sans-serif;
  margin: 0 auto;
}

.related-post img {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.related-posts-title {
  color: #222;
  margin-bottom: 40px;
  font-size: 24px;
  top: -10px;
  position: relative;
  display: inline-block;
}

.related-posts-title::after {
  content: "";
  position: absolute;
  height: 2px;
  width: 100px;
  background: red;
  left: 0;
  bottom: -10px;
}

.related-posts {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

.related-post {
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.2);
  transition: all 500ms ease;
}

.related-post:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.2);
}

.related-post .post-title {
  text-decoration: none;
  color: #222;
  font-size: 18px;
  padding: 16px;
  display: inline-block;
  line-height: 1.6;
  font-weight: bold;
}

@media (max-width: 640px) {
  .related-posts {
    grid-template-columns: 1fr;
  }

  .related-posts-container {
    max-width: 400px;
  }
}

2nd code

  'blog1' select 

[ div class='post-footer'>]

HTML

 <b:if cond='data:blog.pageType == "item"'>  
          
    <div class='related-posts-container'>
        <h2 class='related-posts-title'>Related Posts</h2>

        <div class='related-posts'/>
    </div>
    
    <script>
        let allPosts = [];
        
        const relatedPostsContainer = document.querySelector('.related-posts');
        const relatedPostsMainContainer = document.querySelector('.related-posts-container');
        
        let currentPostLink = '<data:post.url/>';
                    
        const relatedPosts = (json) => {
            allPosts.push(...json.feed.entry);
        }  
        
        const displayData = () => {
        
            const uniqueList = allPosts.filter((post, index, self) => index === self.findIndex((p) => p.link[0].href === post.link[0].href));
        
            const filteredList = uniqueList.filter(post => post.link[post.link.length - 1].href !== currentPostLink);
        
            if (filteredList.length < 2) { 
                relatedPostsMainContainer.style.display = 'none';
            } else {
                const shuffledList = filteredList.sort((a, b) => 0.5 - Math.random()).slice(0, 3);
                shuffledList.forEach((post) => {
                    const thumbnailLink = document.createElement("a");
                    thumbnailLink.href = post.link[post.link.length - 1].href

                    const thumbnail = document.createElement("img");
                    thumbnail.src = post.media$thumbnail.url.replace('/s72', '/s260');

                    thumbnailLink.appendChild(thumbnail);

                    const title = document.createElement("a");
                    title.classList.add("post-title");
                    title.href = post.link[post.link.length - 1].href;
                    title.innerHTML = post.title.$t;

                    const relatedPost = document.createElement("div");
                    relatedPost.classList.add("related-post");

                    relatedPost.appendChild(thumbnailLink);
                    relatedPost.appendChild(title);

                    relatedPostsContainer.appendChild(relatedPost);
                });         
            }
        }
    </script>

    <b:loop values='data:post.labels' var='label'>
        <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=relatedPosts"'/>
    </b:loop>
    
    <script>
        displayData();  
    </script>
    
</b:if>