Kode script untuk membuat Widget Featured untuk blogger

 Berikut ini Kode script untuk membuat Widget Featured untuk blogger

<style>

.featured-widget {display: flex; flex-wrap: wrap;   gap: 10px; margin: 20px auto;  max-width: 100%;border-radius: 10px;padding-left: 10px; }

.left-section { flex: 1;}

.right-section {display: grid; grid-template-columns: 1fr 1fr;   grid-gap: 10px;   flex: 1; }

.large-post {width: 90%; height: 100%;  background-color: #e9ecef;  overflow: hidden;   position: relative;border-radius: 10px; }

.large-post img, .small-post img {width: 100%;   height: 100%;  object-fit: cover;  filter: brightness(0.8) contrast(1.2);   transition: filter 0.3s ease; }

.large-post img:hover, .small-post img:hover {

  filter: filter: brightness(105%) contrast(115%);}

.small-post {aspect-ratio: 1 / 1;  background-color: #f4f4f4; overflow: hidden; border-radius: 10px; }

.large-post h3, .small-post h3 { ont-size: 1rem;

  margin: 5px 0; text-align: center;}

@media (max-width: 768px) {.featured-widget {    flex-direction: column; } .left-section { margin-bottom: 10px;  }}

.small-post { position: relative; width: 90%; height: auto;} 

.large-post h3 {  position: absolute;  bottom: 10px;   left: 10px; right: 10px;  color: #fff;  background-color: rgba(0, 0, 0, 0.6);  padding: 5px; font-size: 0.9rem;  text-align: center;  border-radius: 4px; }

.small-post h3 {  position: absolute;   bottom: 10px; 

  left: 10px;   right: 10px;   color: #fff;   background-color: rgba(0, 0, 0, 0.6);  padding: 5px; font-size: 0.9rem;  text-align: center; border-radius: 4px; } </style>

<div class="featured-widget">  <div class="left-section">    <div class="large-post"></div>

  </div>

  <div class="right-section">

    <div class="small-post post-1"></div>

    <div class="small-post post-2"></div>

    <div class="small-post post-3"></div>

    <div class="small-post post-4"></div>

  </div></div>

<script>

  const feedURL = " https://ainamulyana.blogspot.com/feeds/posts/default/-/Pembelajaran?alt=json&max-results=20";

  fetch(feedURL)

    .then(response => response.json())

    .then(data => {

      const posts = data.feed.entry;

      const largePost = document.querySelector(".large-post");

      const smallPosts = document.querySelectorAll(".small-post");

      posts.forEach((post, index) => {

        const postLink = post.link.find(link => link.rel === "alternate").href;

        const postTitle = post.title.$t;

        const postThumb = post.media$thumbnail ? post.media$thumbnail. url.replace(/\/s\d+-c/, '/s400') :  'https://via.placeholder.com/150';

        const postHTML = `

          <a href="${postLink}" target="_blank" title="${postTitle}">

            <img src="${postThumb}" alt="${postTitle}">

            <h3>${postTitle}</h3>

          </a>        `;

        if (index === 0) {

          largePost.innerHTML = postHTML;

        } else if (index < 5) {

          smallPosts[index - 1].innerHTML = postHTML;  }  });  });</script>

Info Regulasi dan Kumpulan Soal Ujian US SAS, SAT, TKA dan Lainnya