Salin kode HTML dibawah

Untuk kode ini kalian bebas untuk di letakan dimana saja.

<div class="tabs" id="tabs-container"></div>
<div id="tab-contents-container"></div>

Salin kode CSS dibawah

Dan untuk css bisa diletakan antara <b:skin><![CDATA[...]]></b:skin> atau <style>...</style>. pilih salah satu saja.

.tabs {
  display: flex;
  cursor: pointer;
  margin-bottom: 10px;
}

.tab {
  padding: 10px 20px;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

.tab.active {
  background-color: #ddd;
  font-weight: bold;
}

.tab-content {
  display: none;
  border: 1px solid #ccc;
  padding: 15px;
}

.tab-content.active {
  display: block;
}

Jika ingin mengganti tampilan tab dan konten, Anda bisa mengedit bagian CSS sesuai selera Anda.

Salin kode Javascript dibawah

Untuk javascript bisa diletakkan setelah </body> dengan dibungkus

<script>//<![CDATA[
  kode di sini
//]]></script>

// Setting
  let url_blog = '';
  let label = ["Action","Adventure","Comedy","Dementia","Demons","Drama","Ecchi","Fantasy","Game","Harem","Hentai","Historical","Horror","Isekai","Josei","Kids","Magic","Martial Arts","Mecha","Military","Music","Mystery","Parody","Police","Post-Apocalyptic","Psychological","Romance","Samurai","School","Sci-Fi","Seinen","Shoujo","Shoujo Ai","Shounen","Shounen Ai","Slice of Life","Space","Sports","Super Power","Supernatural","Thriller","Vampire","Yaoi","Yuri",];
  let max_artikel = 5;
  let max_tabs = 5;
  let no_thumbnail = "https://1.bp.blogspot.com/-FReCec7n6RY/YSQPKYQ3GZI/AAAAAAAAALQ/68ope4pW8k0f4nEtHT74JUVroyigkNQtACLcBGAsYHQ/s800/No%2BImage%2BHorizontal.jpg";
  let thumbnail_size = 720;
  
  // Fungsi untuk mengacak array dengan arrow function
  const shuffle = (array) => {
    for (let i = array.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [array[i], array[j]] = [array[j], array[i]];
    }
  };
  
  shuffle(label);
  label = label.slice(0, max_tabs);
  
  const BloggerFeed = {
    getByLabel: async (blogUrl, label, maxResults = max_artikel) => {
      try {
        const res = await fetch(`${blogUrl}/feeds/posts/default/-/${encodeURIComponent(label)}?alt=json&max-results=${maxResults}`);
        const { feed } = await res.json();
  
        const getImage = (content) => {
          const imgRegex = /<img.*?src=["'](.*?)["'].*?>/i;
          const match = content.match(imgRegex);
          return match ? match[1] : no_thumbnail;
        };
  
        return feed.entry.map(e => {
          const content = e.content?.$t || e.summary?.$t || '';
          const thumbnail = e.media$thumbnail ? e.media$thumbnail.url.replace(`/s72-c/`, `/s${thumbnail_size}/`) : getImage(content);
          const labels = e.category ? e.category.map(cat => cat.term) : [];
          return {
            title: e.title.$t,
            link: e.link.find(l => l.rel === 'alternate').href,
            content,
            published: e.published.$t,
            updated: e.updated.$t,
            id: e.id.$t,
            author: {
              name: e.author[0]?.name.$t || 'Unknown',
              uri: e.author[0]?.uri.$t || '',
              image: e.author[0]?.['gd$image']?.src || 'https://via.placeholder.com/50'
            },
            thumbnail,
            labels
          };
        });
      } catch (err) {
        console.error(`Error fetching label '${label}':`, err);
        return [];
      }
    }
  };
  
  // Loop untuk semua tab-content
  async function loadTabs(blogUrl, maxResults = max_artikel) {
    const tabs = document.querySelectorAll('.tab-content');
    tabs.forEach(async (tab) => {
      const label = tab.dataset.label;
      const posts = await BloggerFeed.getByLabel(blogUrl, label, maxResults);
      let html = "";
      if (posts.length) {
        posts.forEach(item => {
          html += `<div class="post-item">
            <img src="${item.thumbnail}" alt="Thumbnail" loading="lazy">
            <h3><a href="${item.link}" target="_blank">${item.title}</a></h3>
            <p>Label: ${item.labels.join(', ')}</p>
          </div>`
        });
        tab.innerHTML = html;
      } else {
        tab.innerHTML = '<p>Tidak ada postingan dengan label ini.</p>';
      }
    });
  }
  
  let tabs_run = () => {
    const tabsContainer = document.getElementById('tabs-container');
    const tabContentsContainer = document.getElementById('tab-contents-container');
  
    let tabsHTML = '';
    let contentsHTML = '';
  
    label.forEach((text, index) => {
      tabsHTML += `<div class="tab ${index === 0 ? 'active' : ''}" data-tab="${index + 1}">${text}</div>`;
      contentsHTML += `<div class="tab-content ${index === 0 ? 'active' : ''}" id="tab-${index + 1}" data-label="${text}">Loading...</div>`;
    });
  
    tabsContainer.innerHTML = tabsHTML;
    tabContentsContainer.innerHTML = contentsHTML;
  
    const tabs = document.querySelectorAll('.tab');
    const tabContents = document.querySelectorAll('.tab-content');
  
    tabs.forEach(tab => {
      tab.addEventListener('click', function() {
        const targetTab = this.getAttribute('data-tab');
  
        tabs.forEach(t => t.classList.remove('active'));
        tabContents.forEach(c => c.classList.remove('active'));
  
        this.classList.add('active');
        document.getElementById('tab-' + targetTab).classList.add('active');
      });
    });
  
    loadTabs(url_blog);
  };
  
  tabs_run();