I provide here some CSS,html and JavaScript code, what i using in my
Blogspot site. this code show my post like 1st image style.
now I want to show my post like 2nd image style.
So How to write or modify my CSS and JavaScript code to show post like 2nd image?
<style> label-posts-container .label-post img { height: 50px; object-fit: cover; width: 100%; display: flex; } .label-posts-container { display: flex; flex-direction: column; gap: 5px; background: #fff; padding: 10px; margin: 10px 0; align-items: center; } .label-posts-container .label-post { background: #fff; display: flex; align-items: center; width: 100%; max-width: 400px; box-shadow: 0 4px 40px -8px rgba(0, 0, 0, 0.3); } .label-posts-container .thumb-container { flex: 0.75; width: 100%; } .label-posts-container .text-content { flex: 2; padding: 10px 5px; display: flex; flex-direction: column; } .label-posts-container .post-title-container { text-decoration: none; } .label-posts-container .post-title-container:hover { text-decoration: underline; } .label-posts-container .post-title { margin: 0; font-size: 15px; margin-bottom: 5px; color: #000; line-height: 1.2; } </style <div class='label-posts-container national'>Posts related to National:</div> <script> const National = document.querySelector(".national"); const populateLabelPosts = (data, container) => { data.forEach(post => { const thumbContainer = document.createElement('a'); thumbContainer.href = post.link[post.link.length - 1].href; thumbContainer.classList.add('thumb-container'); const thumbnail = document.createElement('img'); thumbnail.src = post.media$thumbnail.url.replace('/s72', '/s300'); thumbContainer.appendChild(thumbnail); const textContent = document.createElement('div'); textContent.classList.add('text-content'); const postTitleContainer = document.createElement('a'); postTitleContainer.href = post.link[post.link.length - 1].href; postTitleContainer.classList.add('post-title-container'); const title = document.createElement('h3'); title.classList.add('post-title'); title.innerHTML = post.title.$t; postTitleContainer.appendChild(title); textContent.appendChild(postTitleContainer); const labelPost = document.createElement('div'); labelPost.classList.add('label-post'); labelPost.appendChild(thumbContainer); labelPost.appendChild(textContent); container.appendChild(labelPost); }); } const displayNational = (posts) => { populateLabelPosts(posts.feed.entry, National); } </script> <script src='https://www.sebahotnews.org/feeds/posts/summary/-/জাতীয়?max-results=5&alt=json-in-script&callback=displayNational'></script> Using above this code showing like this Image 1 style.
But i want to show my post like below Image 2 using above code. so how to modify my code?
Top comments (0)