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)