DEV Community: S M Ashraful Azom

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

S M Ashraful Azom — Fri, 07 Apr 2023 15:10:26 +0000

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&amp;alt=json-in-script&amp;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?

how to create post like this cover photo with below code?

S M Ashraful Azom — Thu, 23 Mar 2023 16:23:16 +0000

<!DOCTYPE html>
<html>
<head>
<style>

.label-posts-container .label-post img {
  height: 200px;
  object-fit: cover;
  width: 100%;
  display: flex;
}

.label-posts-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
    background: #fff;
    padding: 24px;
    margin: 32px 0;
    align-items: center;
}

.label-posts-container .label-post {
  background: #fff;
  display: flex;
  align-items: center;
  max-width: 700px;
  box-shadow: 0 4px 40px -8px rgba(0, 0, 0, 0.3);
}

.label-posts-container .thumb-container {
  flex: 1;
  width: 100%;
}

.label-posts-container .text-content {
  flex: 2;
  padding: 16px 24px;
  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: 24px;
  margin-bottom: 8px;
  color: #ef233c;
line-height: 1.2;
}

.label-posts-container .summary {
  line-height: 1.8;
  color: #023047;
  opacity: 0.9;
  position: relative;
  height: 80px;
  overflow: hidden;
  margin-bottom: 8px;
}

.label-posts-container .summary::after {
  content: &quot;&quot;;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 32px;
  width: 100%;
  background: linear-gradient(transparent, #fff);
}

.label-posts-container .read-more-btn {
  color: darkblue;
  font-weight: bold;
  font-size: 13px;
  text-transform: uppercase;
  text-decoration: none;
  align-self: flex-end;
}

@media (max-width: 640px) {
  .label-posts-container .label-post {
    flex-direction: column;
  }

  .label-posts-container .label-post img {
    width: 100%;
    height: 200px;
  }
}

</style>

</head>
<body>
<div class='label-posts-container national'>
    Posts related to জাতীয়:
</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&amp;alt=json-in-script&amp;callback=displayNational'></script>

</body>
</html>

How to support 3rd Party image in blogspot recent post with below js code?

S M Ashraful Azom — Sat, 04 Dec 2021 13:53:50 +0000

I use the following code for recent posts on my blogspot site.

When I upload a new image to my blog, most of the time the images are uploaded via a link like https: //1.bp.blogspot.com / ......

But sometimes when uploading pictures, the pictures are uploaded by such links as https: //blogger.googleusercontent.com/img/a/A ......

Then my pictures are not clear on the home page. And the pictures come at length. I did a Google search and found that the code below does not support third party images.

So I want to know how I can support third party pictures in this code below.

.mbtlist {
  list-style-type: none;
  overflow: hidden
  }

  .mbtlist li {
  margin: 0px auto 20px auto;
  clear: both;
  color: #666;
  font-family: Helvetica;
  font-size: 12px;
  border-bottom: 1px dotted #ddd;
  padding-bottom: 10px;
  }

  .mbtlist .mbttitle {
  font-family: oswald;
  font-size: 16px;
  color: #0080ff;
  font-weight: normal;
  text-decoration: none;
  }

 .mbtlist .mbttitle:hover {
 color: #00A5FF;
 }

font-family:georgia;
font-size:15px;
font-weight:bold
}
.mbtlist div span {
 margin: 0 10px 0 0;
 display: inline-block;
 }
.mbtlist span {
 display: block;
 margin: 5px 0px 0px;
 padding-right: 5px;
 }
.mbtlist .imore {
 font-size: 16px;
 font-weight: bold;
 text-decoration: none;
 color: #666;
 line-height: 0.7em;
 }
 .mbtlist .mbttitle .imgbox {
  max-width: 80px;
  max-height: 65px;
  margin: 0px 10px 10px 0px;
  padding: 6px;
  box-shadow: -1px -1px 4px #777;
  display: inline-block;
  vertical-align: top;
  text-align: center;
  overflow: hidden;
  }
 .mbtlist .mbttitle .imgbox > img{
  width: 100%;
  vertical-align: middle;
  }


 .mbtlist li:first-of-type .mbttitle .imgbox
  {
  display: block;
  width: 100%;
  max-width: unset;
  max-height: unset;
  }

<script>
  function getPosts(json) {
  var posts = "<ul class=mbtlist>";
  for (var i = 0; i < json.feed.entry.length; i++) {
  var title = json.feed.entry[i].title.$t;
  var url = json.feed.entry[i].link.pop().href;
  if (json.feed.entry[i].media$thumbnail) {
    thumbUrl = json.feed.entry[i].media$thumbnail.url;
    thumbnail = thumbUrl.replace("/s72-c/", "/s" + 200 + "/");
  }

  posts += "<li><a class='mbttitle' href='" + url + "'><span class='imgbox'><img src='" + thumbnail + "'></span>" + title + "</a></li>";
}
posts += '</ul>';
document.getElementById('container').innerHTML = posts;
  }
 </script>

 <div id="container"></div>
<script src="https://www.sebahotnews.org/feeds/posts/default/-/বাংলাদেশ
?max-results=5&alt=json&callback=getPosts"></script>

Answer: How to Fix Uncaught ReferenceError: thumbnail is not defined - with below code

S M Ashraful Azom — Mon, 31 May 2021 07:14:05 +0000

answer re: How to Fix Uncaught ReferenceError: thumbnail is not defined - with below code

May 30 '21

it happens because some posts does not have images or images hosted externally, we can use a fallback image like this

for (var i = 0; i < json.feed.entry.length; i++) {
    var title = json.feed.entry[i].title.$t
    var url = json.feed.entry[i].link.pop().href;

    // define thumbnail variable
    var thumbnail;

    if (json.feed.entry[i].media$thumbnail) {
        thumbUrl =

…

Open Full Answer

How to avoid document.write from this code?

S M Ashraful Azom — Wed, 10 Feb 2021 07:22:07 +0000

    var banglaDigit = {'0': '০','1': '১','2': '২','3': '৩','4': '৪','5': '৫','6': '৬','7': '৭','8': '৮','9': '৯'};
    var dayName = new Array("রবিবার", "সোমবার", "মঙ্গলবার", "বুধবার", "বৃহস্পতিবার", "শুক্রবার", "শনিবার")

    var monName = new Array("জানুয়ারী", "ফেব্রুয়ারী", "মার্চ", "এপ্রিল", "মে", "জুন", "জুলাই", "আগষ্ট",
        "সেপ্টেম্বর", "অক্টোবর", "নভেম্বর", "ডিসেম্বর")

    var now = new Date;

    document.write("আজ " + dayName[now.getDay()] + ", " + now.getDate().toString().replace(/[0123456789]/g, function(s) {
                return banglaDigit[s];
            }) + " " + monName[now.getMonth()] + " " + now
        .getFullYear().toString().replace(/[0123456789]/g, function(s) {
                return banglaDigit[s];
            }) + "ইং ")

    date = new Date();
    hours = date.getHours();
    mins = date.getMinutes();
    secs = date.getSeconds();

    shift='';
    if (hours == 0) {
        shift = " AM";
        hours = 12
    } else if (hours &lt;= 3) {
        shift = " AM"
    } else if (hours == 12) {
        shift = " PM";
        hours = 12
    } else if (hours &gt;= 13) {
        shift = " PM";
        hours -= 12
    }

    if (mins &lt;= 9) {
        mins = "0" + mins
    }

    document.write("* সময়ঃ " + hours.toString().replace(/[0123456789]/g, function(s) {
                return banglaDigit[s];
            }) + " টা :" + mins.toString().replace(/[0123456789]/g, function(s) {
                return banglaDigit[s];
            }) + " মিনিট *");

how to avoid document.write my below code

S M Ashraful Azom — Wed, 10 Feb 2021 06:44:37 +0000

how to avoid document.write my below code

Jan 31 '21 Comments: 1 Answers: 1

This code is working, but google pagespeed detect avoid document.write.

I've tested various alternatives, lining up my HTML elements prior to the JS, then using getElementById, followed by either innerHTML or appendChild, or even lining up the elements inside the JS, by means of createElement…

Open Full Question