DEV Community

S M Ashraful Azom
S M Ashraful Azom

Posted on

how to show my post like Last image with below code?

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
Enter fullscreen mode Exit fullscreen mode
<div class='label-posts-container national'>Posts related to National:</div>
Enter fullscreen mode Exit fullscreen mode
<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&amp;alt=json-in-script&amp;callback=displayNational'></script>
Enter fullscreen mode Exit fullscreen mode

Using above this code showing like this Image 1 style.
image 1

But i want to show my post like below Image 2 using above code. so how to modify my code?

Image 2

Top comments (0)