Home Docs Kode Sitemap

Kode Sitemap

Posted by at
Kode Sitemap

Cara Membuat Sitemap

  • Masuk Dashbord Blog
  • Pilih " Halaman"
  • Buat Halaman baru

Silahkan  Pilih Kode Sitemap dibawah ini, Pilih mana yang bagus menurut kalian

Untuk mengatur jumlah artikel terbaru yang muncul silahkan cari kode :

var SITEMAP_RECENT_LIMIT = 30; // banyaknya recent post yang ditampilkan

Ganti angka 30 sesusai keinginan kalian, dan utuk tulisan " // banyaknya recent post yang ditampilkan" kalan bisa menghapusnya, itu hanya komentar

Silahkan Lihat Contoh SITEMAP  Kami

Sitemap Pertama

<!-- SITEMAP OTOMATIS untuk Blogger (tempel di mode HTML pada Page) -->
<style>
  /* Gaya sederhana — sesuaikan kalau mau */
  #sitemap-root { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; max-width: 980px; margin: 0 auto; padding: 20px; color: #111;}
  #sitemap-root h2 { font-size: 20px; margin: 8px 0 12px; }
  .sitemap-section { background: #fff; border: 1px solid #e6e6e6; padding: 14px; margin-bottom: 14px; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.03); }
  .recent-list, .label-list { list-style: none; padding-left: 0; margin: 0; }
  .recent-list li, .label-list li { padding: 6px 0; border-bottom: 1px dashed #f0f0f0; }
  .recent-list li:last-child, .label-list li:last-child { border-bottom: none; }
  .sitemap-meta { font-size: 13px; color: #666; margin-bottom: 8px; }
  .label-name { font-weight: 600; display: inline-block; margin-right: 8px; }
  .label-count { color: #888; font-size: 13px; }
  .posts-under-label { margin-top: 8px; padding-left: 14px; }
  .posts-under-label li { padding: 4px 0; }
  .toggle-btn { cursor: pointer; font-size: 13px; color: #0a66c2; text-decoration: underline; background: none; border: none; padding: 0; }
  .small-note { font-size: 13px; color: #666; margin-top: 8px; }
  a.sitemap-link { color: inherit; text-decoration: none; }
  a.sitemap-link:hover { text-decoration: underline; color: #0a66c2; }
  @media (max-width:600px){
    #sitemap-root { padding: 12px; }
    #sitemap-root h2 { font-size: 18px; }
  }
</style>

<div id="sitemap-root">
  <h2>Daftar Isi / Sitemap</h2>
  <div class="sitemap-meta">Diambil otomatis dari semua artikel blog — jika ada artikel baru, refresh halaman ini untuk memperbarui daftar.</div>

  <div id="sitemap-recent" class="sitemap-section">
    <h3>Recent Posts</h3>
    <ul class="recent-list" id="recent-list"><li>Memuat...</li></ul>
  </div>

  <div id="sitemap-labels" class="sitemap-section">
    <h3>Kategori / Label</h3>
    <div id="labels-container">Memuat...</div>
  </div>

  <div class="small-note">Tip: gunakan fitur pencarian blog untuk menemukan artikel dengan cepat.</div>
</div>

<!-- JSONP feed Blogger: pastikan path cocok dengan blog (relatif akan pakai domain blog saat ditempel di halaman) -->
<script type="text/javascript">
  // konfigurasi: ganti maxResults jika mau (max 9999)
  var SITEMAP_MAX_RESULTS = 9999; // ambil semua
  var SITEMAP_RECENT_LIMIT = 30;  // banyaknya recent post yang ditampilkan

  // callback JSONP yang akan dipanggil oleh feed
  function sitemapCallback(json) {
    try {
      var entries = json.feed.entry || [];
      var recentList = document.getElementById('recent-list');
      var labelsContainer = document.getElementById('labels-container');

      // kosongkan
      recentList.innerHTML = '';
      labelsContainer.innerHTML = '';

      // map label -> array of posts
      var labelsMap = {};
      var posts = [];

      for (var i = 0; i < entries.length; i++) {
        var e = entries[i];
        var title = e.title.$t || '(Tanpa judul)';
        // cari link alternatif (post URL)
        var postUrl = '';
        if (e.link) {
          for (var j = 0; j < e.link.length; j++) {
            if (e.link[j].rel === 'alternate') { postUrl = e.link[j].href; break; }
          }
        }
        // tanggal
        var published = e.published ? e.published.$t : '';
        // label(s)
        var entryLabels = [];
        if (e.category) {
          for (var k = 0; k < e.category.length; k++) {
            if (e.category[k].term) entryLabels.push(e.category[k].term);
          }
        }

        posts.push({title: title, url: postUrl, published: published, labels: entryLabels});

        // simpan ke labelsMap
        for (var li = 0; li < entryLabels.length; li++) {
          var lab = entryLabels[li];
          if (!labelsMap[lab]) labelsMap[lab] = [];
          labelsMap[lab].push({title: title, url: postUrl, published: published});
        }
      }

      // --- Build Recent Posts ---
      if (posts.length === 0) {
        recentList.innerHTML = '<li>Tidak ada artikel.</li>';
      } else {
        // posts di feed biasanya tersusun terbaru -> lama
        var recentCount = Math.min(SITEMAP_RECENT_LIMIT, posts.length);
        for (var r = 0; r < recentCount; r++) {
          var p = posts[r];
          var li = document.createElement('li');
          var a = document.createElement('a');
          a.href = p.url;
          a.className = 'sitemap-link';
          a.textContent = (r+1) + '. ' + p.title;
          a.target = '_blank';
          li.appendChild(a);
          recentList.appendChild(li);
        }
        if (posts.length > recentCount) {
          var moreLi = document.createElement('li');
          moreLi.innerHTML = '<em>Menampilkan ' + recentCount + ' dari ' + posts.length + ' posting. Untuk melihat lebih banyak, gunakan kategori di bawah.</em>';
          recentList.appendChild(moreLi);
        }
      }

      // --- Build Labels & posts under each label ---
      var labelNames = Object.keys(labelsMap).sort(function(a,b){ return a.toLowerCase().localeCompare(b.toLowerCase()); });
      if (labelNames.length === 0) {
        labelsContainer.innerHTML = '<div>Tidak ada label ditemukan.</div>';
      } else {
        var frag = document.createElement('div');
        for (var lii = 0; lii < labelNames.length; lii++) {
          var name = labelNames[lii];
          var arr = labelsMap[name];

          var labelWrap = document.createElement('div');
          labelWrap.style.marginBottom = '12px';

          var header = document.createElement('div');
          header.innerHTML = '<span class="label-name">' + name + '</span><span class="label-count">(' + arr.length + ')</span> ';
          labelWrap.appendChild(header);

          // toggle button
          var btn = document.createElement('button');
          btn.className = 'toggle-btn';
          btn.textContent = 'Tampilkan';
          btn.setAttribute('data-open', 'false');
          btn.style.marginLeft = '8px';
          header.appendChild(btn);

          var ul = document.createElement('ul');
          ul.className = 'posts-under-label label-list';
          ul.style.display = 'none';

          // populate posts for this label (tampilkan maksimal 50)
          var showCount = Math.min(arr.length, 500);
          for (var pidx = 0; pidx < showCount; pidx++) {
            var post = arr[pidx];
            var pli = document.createElement('li');
            var pa = document.createElement('a');
            pa.href = post.url;
            pa.textContent = post.title;
            pa.className = 'sitemap-link';
            pa.target = '_blank';
            pli.appendChild(pa);
            ul.appendChild(pli);
          }

          // tombol toggle click
          (function(btn, ul){
            btn.addEventListener('click', function(){
              var open = btn.getAttribute('data-open') === 'true';
              if (!open) {
                ul.style.display = 'block';
                btn.textContent = 'Sembunyikan';
                btn.setAttribute('data-open','true');
              } else {
                ul.style.display = 'none';
                btn.textContent = 'Tampilkan';
                btn.setAttribute('data-open','false');
              }
            });
          })(btn, ul);

          labelWrap.appendChild(ul);
          frag.appendChild(labelWrap);
        }
        labelsContainer.appendChild(frag);
      }

    } catch (err) {
      console.error('Sitemap error:', err);
      document.getElementById('recent-list').innerHTML = '<li>Gagal memuat daftar. Cek console untuk error.</li>';
      document.getElementById('labels-container').innerHTML = '<div>Gagal memuat label.</div>';
    }
  }

  // Tambahkan tag script untuk memanggil JSONP feed Blogger
  (function() {
    // gunakan path relatif supaya saat ditempel di halaman blog domain-nya cocok
    var feedUrl = '/feeds/posts/summary?alt=json-in-script&max-results=' + encodeURIComponent(SITEMAP_MAX_RESULTS) + '&callback=sitemapCallback';
    var s = document.createElement('script');
    s.src = feedUrl;
    s.async = true;
    s.onerror = function(){ 
      document.getElementById('recent-list').innerHTML = '<li>Gagal memuat feed. Pastikan halaman ini berada di domain yang sama dengan blog.</li>';
      document.getElementById('labels-container').innerHTML = '<div>Gagal memuat feed.</div>';
    };
    document.body.appendChild(s);
  })();
</script>
Membuat Background Warna Warni Tambahkan kode berikut ini :
/* --- Warna-warni untuk daftar artikel terbaru --- */
.recent-list li {
  padding: 10px 12px;
  margin-bottom: 6px;
  border-radius: 8px;
  transition: 0.3s ease;
  font-weight: 500;
}

/* Efek hover */
.recent-list li:hover {
  transform: translateX(5px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* Warna berganti-ganti setiap urutan */
.recent-list li:nth-child(1) { background: #e3f2fd; } /* biru muda */
.recent-list li:nth-child(2) { background: #fce4ec; } /* pink muda */
.recent-list li:nth-child(3) { background: #e8f5e9; } /* hijau muda */
.recent-list li:nth-child(4) { background: #fff3e0; } /* oranye muda */
.recent-list li:nth-child(5) { background: #ede7f6; } /* ungu muda */

/* Teks link di daftar terbaru */
.recent-list li a.sitemap-link {
  color: #111;
  text-decoration: none;
  display: block;
}
.recent-list li a.sitemap-link:hover {
  color: #0a66c2;
}

Menambahkan Animasi
.recent-list li {
  opacity: 0;
  animation: fadeInUp 0.6s ease forwards;
}
.recent-list li:nth-child(1) { animation-delay: 0.1s; }
.recent-list li:nth-child(2) { animation-delay: 0.2s; }
.recent-list li:nth-child(3) { animation-delay: 0.3s; }
.recent-list li:nth-child(4) { animation-delay: 0.4s; }
.recent-list li:nth-child(5) { animation-delay: 0.5s; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

Menambahkan Dark-Mode
<style>
/* =============== 🌞 LIGHT MODE (default) =============== */
#sitemap-root {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  max-width: 980px;
  margin: 0 auto;
  padding: 20px;
  color: #111;
  background: transparent;
}
#sitemap-root h2 { font-size: 20px; margin: 8px 0 12px; }
.sitemap-section {
  background: #fff;
  border: 1px solid #e6e6e6;
  padding: 14px;
  margin-bottom: 14px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}
.recent-list, .label-list { list-style: none; padding-left: 0; margin: 0; }
.recent-list li, .label-list li {
  padding: 10px 12px;
  margin-bottom: 6px;
  border-radius: 8px;
  transition: 0.3s ease;
  font-weight: 500;
}
.recent-list li:hover {
  transform: translateX(5px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.recent-list li:nth-child(1) { background: #e3f2fd; }
.recent-list li:nth-child(2) { background: #fce4ec; }
.recent-list li:nth-child(3) { background: #e8f5e9; }
.recent-list li:nth-child(4) { background: #fff3e0; }
.recent-list li:nth-child(5) { background: #ede7f6; }

a.sitemap-link { color: #111; text-decoration: none; display: block; }
a.sitemap-link:hover { color: #0a66c2; text-decoration: underline; }
.toggle-btn { cursor: pointer; font-size: 13px; color: #0a66c2; background: none; border: none; padding: 0; }
.small-note { font-size: 13px; color: #666; margin-top: 8px; }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.recent-list li {
  opacity: 0;
  animation: fadeInUp 0.6s ease forwards;
}
.recent-list li:nth-child(1) { animation-delay: 0.1s; }
.recent-list li:nth-child(2) { animation-delay: 0.2s; }
.recent-list li:nth-child(3) { animation-delay: 0.3s; }
.recent-list li:nth-child(4) { animation-delay: 0.4s; }
.recent-list li:nth-child(5) { animation-delay: 0.5s; }

/* Responsive */
@media (max-width:600px){
  #sitemap-root { padding: 12px; }
  #sitemap-root h2 { font-size: 18px; }
}

/* =============== 🌚 DARK MODE =============== */
@media (prefers-color-scheme: dark) {
  #sitemap-root {
    color: #e6e6e6;
    background: transparent;
  }
  .sitemap-section {
    background: #1e1e1e;
    border-color: #333;
    box-shadow: 0 2px 6px rgba(255,255,255,0.05);
  }
  .recent-list li, .label-list li {
    color: #ddd;
  }
  .recent-list li:nth-child(1) { background: #2a3b47; }
  .recent-list li:nth-child(2) { background: #442b3a; }
  .recent-list li:nth-child(3) { background: #304437; }
  .recent-list li:nth-child(4) { background: #463a26; }
  .recent-list li:nth-child(5) { background: #39345a; }

  a.sitemap-link { color: #e6e6e6; }
  a.sitemap-link:hover { color: #4dabf7; }
  .toggle-btn { color: #4dabf7; }
  .small-note { color: #aaa; }
}
</style>

Sitemap Versi Card Grid

<!-- 🌐 SITEMAP CARD GRID untuk Blogger -->
<style>
  #sitemap-root {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    max-width: 1080px;
    margin: 0 auto;
    padding: 20px;
    color: #111;
  }

  #sitemap-root h2 {
    text-align: center;
    margin-bottom: 20px;
    font-size: 24px;
  }

  .sitemap-section {
    margin-bottom: 30px;
  }

  /* ======= GRID STYLE ======= */
  .recent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
  }

  .recent-card {
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }

  .recent-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.1);
  }

  .recent-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, #2196F3, #E91E63, #4CAF50, #FFC107, #9C27B0);
    background-size: 500%;
    animation: moveGradient 6s linear infinite;
  }

  @keyframes moveGradient {
    0% { background-position: 0%; }
    100% { background-position: 100%; }
  }

  .recent-card h4 {
    margin: 8px 0;
    font-size: 17px;
    line-height: 1.4;
  }

  .recent-card a {
    color: #111;
    text-decoration: none;
  }

  .recent-card a:hover {
    color: #0a66c2;
  }

  .recent-meta {
    font-size: 13px;
    color: #777;
    margin-top: 6px;
  }

  /* Label section (tetap daftar) */
  .label-list {
    list-style: none;
    padding-left: 0;
  }
  .label-list li {
    margin-bottom: 4px;
  }
  .label-list a {
    color: #0a66c2;
    text-decoration: none;
  }
  .label-list a:hover {
    text-decoration: underline;
  }

  /* ========== DARK MODE ========== */
  @media (prefers-color-scheme: dark) {
    body, #sitemap-root { color: #e6e6e6; background: #121212; }
    .recent-card { background: #1e1e1e; border-color: #333; }
    .recent-card a { color: #e6e6e6; }
    .recent-card a:hover { color: #4dabf7; }
    .recent-meta { color: #aaa; }
  }
</style>

<div id="sitemap-root">
  <h2>🗂️ Daftar Artikel Terbaru</h2>

  <div class="sitemap-section">
    <div id="recent-grid" class="recent-grid">
      <div>Memuat artikel...</div>
    </div>
  </div>

  <div class="sitemap-section">
    <h3>Kategori / Label</h3>
    <div id="labels-container">Memuat label...</div>
  </div>
</div>

<script>
  var SITEMAP_MAX_RESULTS = 9999;
  var SITEMAP_RECENT_LIMIT = 6; // jumlah kartu artikel terbaru

  function sitemapCallback(json) {
    try {
      var entries = json.feed.entry || [];
      var grid = document.getElementById('recent-grid');
      var labelsContainer = document.getElementById('labels-container');

      grid.innerHTML = '';
      labelsContainer.innerHTML = '';

      var posts = [];
      var labelsMap = {};

      for (var i = 0; i < entries.length; i++) {
        var e = entries[i];
        var title = e.title.$t || '(Tanpa judul)';
        var url = '';
        if (e.link) {
          for (var j = 0; j < e.link.length; j++) {
            if (e.link[j].rel === 'alternate') {
              url = e.link[j].href;
              break;
            }
          }
        }
        var date = new Date(e.published.$t).toLocaleDateString('id-ID', {year: 'numeric', month: 'short', day: 'numeric'});
        var labels = (e.category || []).map(c => c.term);
        posts.push({title, url, date, labels});

        labels.forEach(l => {
          if (!labelsMap[l]) labelsMap[l] = [];
          labelsMap[l].push({title, url});
        });
      }

      // ==== Recent Cards ====
      for (let i = 0; i < Math.min(SITEMAP_RECENT_LIMIT, posts.length); i++) {
        let p = posts[i];
        let card = document.createElement('div');
        card.className = 'recent-card';
        card.innerHTML = `
          <h4><a href="${p.url}" target="_blank">${p.title}</a></h4>
          <div class="recent-meta">📅 ${p.date}</div>
        `;
        grid.appendChild(card);
      }

      // ==== Labels ====
      var labelNames = Object.keys(labelsMap).sort((a,b) => a.localeCompare(b));
      labelNames.forEach(label => {
        var ul = document.createElement('ul');
        ul.className = 'label-list';
        var li = document.createElement('li');
        li.innerHTML = `<strong>${label}</strong> (${labelsMap[label].length})`;
        ul.appendChild(li);
        labelsMap[label].slice(0,5).forEach(p => {
          var pli = document.createElement('li');
          pli.innerHTML = `<a href="${p.url}" target="_blank">${p.title}</a>`;
          ul.appendChild(pli);
        });
        labelsContainer.appendChild(ul);
      });

    } catch (err) {
      document.getElementById('recent-grid').innerHTML = '<div>Gagal memuat daftar.</div>';
      console.error(err);
    }
  }

  (function() {
    var s = document.createElement('script');
    s.src = '/feeds/posts/summary?alt=json-in-script&max-results=' + SITEMAP_MAX_RESULTS + '&callback=sitemapCallback';
    document.body.appendChild(s);
  })();
</script>

Sitemap Ketiga

<style>
/* 🌙 Dark Mode Otomatis */
body.dark-mode #sitemap-container,
body.dark-mode #label-container {
  background: #121212;
  color: #f5f5f5;
}
body.dark-mode .sitemap-card,
body.dark-mode .label-card {
  background: #1e1e1e;
  border-color: #333;
  color: #f5f5f5;
}
body.dark-mode .sitemap-card a,
body.dark-mode .label-card a {
  color: #90caf9;
}
body.dark-mode .sitemap-card a:hover,
body.dark-mode .label-card a:hover {
  color: #ffcc80;
}

/* 🎨 Umum Grid */
#sitemap-container, #label-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin: 20px auto;
  padding: 10px;
  max-width: 1100px;
}

/* 🧱 Kartu Artikel */
.sitemap-card, .label-card {
  background: #ffffff;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
}
.sitemap-card:hover, .label-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}
.sitemap-card h3 {
  font-size: 18px;
  margin: 0 0 10px;
  color: #333;
}
.sitemap-card a, .label-card a {
  text-decoration: none;
  color: #0077cc;
  font-weight: 600;
}
.sitemap-card a:hover, .label-card a:hover {
  color: #ff6600;
}

/* 🏷 Label Judul */
.sitemap-card span.label {
  display: inline-block;
  background: #0077cc;
  color: white;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  margin-bottom: 8px;
}

/* 💠 Label Card */
.label-card h4 {
  margin: 0 0 8px;
  font-size: 16px;
  color: #0077cc;
}
.label-card p {
  font-size: 14px;
  margin: 0;
  color: #555;
}

/* 📱 Responsif */
@media (max-width: 768px) {
  #sitemap-container, #label-container {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 500px) {
  #sitemap-container, #label-container {
    grid-template-columns: 1fr;
  }
}
</style>

<!-- 🌐 Grid Artikel Terbaru -->
<div id="sitemap-container"></div>

<!-- 🏷 Grid Label -->
<h2 style="text-align:center;margin-top:30px;">Daftar Label & Jumlah Artikel</h2>
<div id="label-container"></div>

<script>
/* ⚙️ Konfigurasi Sitemap */
var blogURL = "https://www.inteknologi.com/";
var SITEMAP_RECENT_LIMIT = 5; // jumlah artikel terbaru

/* 🚀 Ambil artikel terbaru dari feed */
fetch(blogURL + "/feeds/posts/default?alt=json&max-results=" + SITEMAP_RECENT_LIMIT)
  .then(response => response.json())
  .then(data => {
    const container = document.getElementById("sitemap-container");
    const entries = data.feed.entry;
    const labelCount = {};

    entries.forEach(entry => {
      const title = entry.title.$t;
      const link = entry.link.find(l => l.rel === "alternate").href;
      const category = entry.category ? entry.category[0].term : "Umum";

      // Hitung jumlah label
      if (category in labelCount) labelCount[category]++;
      else labelCount[category] = 1;

      const card = document.createElement("div");
      card.className = "sitemap-card";
      card.innerHTML = `
        <span class="label">${category}</span>
        <h3><a href="${link}" target="_blank">${title}</a></h3>
        <p>Artikel terbaru dari kategori <b>${category}</b>.</p>
      `;
      container.appendChild(card);
    });

    // 🏷 Tampilkan label & jumlahnya
    const labelContainer = document.getElementById("label-container");
    for (const [label, count] of Object.entries(labelCount)) {
      const labelCard = document.createElement("div");
      labelCard.className = "label-card";
      labelCard.innerHTML = `
        <h4>${label}</h4>
        <p>Total artikel: <b>${count}</b></p>
        <a href="${blogURL}/search/label/${encodeURIComponent(label)}" target="_blank">Lihat semua &raquo;</a>
      `;
      labelContainer.appendChild(labelCard);
    }
  })
  .catch(err => console.error("Gagal memuat feed:", err));
</script>

Sitemap Card dan LIst

<!-- 🌐 SITEMAP CARD GRID untuk Blogger -->
<style>
  #sitemap-root {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    max-width: 1080px;
    margin: 0 auto;
    padding: 20px;
    color: #111;
  }

  #sitemap-root h2 {
    text-align: center;
    margin-bottom: 20px;
    font-size: 24px;
  }

  .sitemap-section {
    margin-bottom: 30px;
  }

  /* ======= GRID STYLE ======= */
  .recent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
  }

  .recent-card {
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }

  .recent-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.1);
  }

  .recent-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, #2196F3, #E91E63, #4CAF50, #FFC107, #9C27B0);
    background-size: 500%;
    animation: moveGradient 6s linear infinite;
  }

  @keyframes moveGradient {
    0% { background-position: 0%; }
    100% { background-position: 100%; }
  }

  .recent-card h4 {
    margin: 8px 0;
    font-size: 17px;
    line-height: 1.4;
  }

  .recent-card a {
    color: #111;
    text-decoration: none;
  }

  .recent-card a:hover {
    color: #0a66c2;
  }

  .recent-meta {
    font-size: 13px;
    color: #777;
    margin-top: 6px;
  }

  /* Label section */
  .label-list {
    list-style: none;
    padding-left: 0;
  }
  .label-list li {
    margin-bottom: 4px;
  }
  .label-list a {
    color: #0a66c2;
    text-decoration: none;
  }
  .label-list a:hover {
    text-decoration: underline;
  }

  /* ========== DARK MODE OTOMATIS ========== */
  @media (prefers-color-scheme: dark) {
    body, #sitemap-root { color: #e6e6e6; background: #121212; }
    .recent-card { background: #1e1e1e; border-color: #333; }
    .recent-card a { color: #e6e6e6; }
    .recent-card a:hover { color: #4dabf7; }
    .recent-meta { color: #aaa; }
  }
</style>

<div id="sitemap-root">
  <h2>🗂️ Daftar Artikel Terbaru</h2>

  <div class="sitemap-section">
    <div id="recent-grid" class="recent-grid">
      <div>Memuat artikel...</div>
    </div>
  </div>

  <div class="sitemap-section">
    <h3>Kategori / Label</h3>
    <div id="labels-container">Memuat label...</div>
  </div>
</div>

<script>
  var SITEMAP_MAX_RESULTS = 9999;
  var SITEMAP_RECENT_LIMIT = 6; // jumlah kartu artikel terbaru

  function sitemapCallback(json) {
    try {
      var entries = json.feed.entry || [];
      var grid = document.getElementById('recent-grid');
      var labelsContainer = document.getElementById('labels-container');

      grid.innerHTML = '';
      labelsContainer.innerHTML = '';

      var posts = [];
      var labelsMap = {};

      for (var i = 0; i < entries.length; i++) {
        var e = entries[i];
        var title = e.title.$t || '(Tanpa judul)';
        var url = '';
        if (e.link) {
          for (var j = 0; j < e.link.length; j++) {
            if (e.link[j].rel === 'alternate') {
              url = e.link[j].href;
              break;
            }
          }
        }
        var date = new Date(e.published.$t).toLocaleDateString('id-ID', {year: 'numeric', month: 'short', day: 'numeric'});
        var labels = (e.category || []).map(c => c.term);
        posts.push({title, url, date, labels});

        labels.forEach(l => {
          if (!labelsMap[l]) labelsMap[l] = [];
          labelsMap[l].push({title, url});
        });
      }

      // ==== Recent Cards ====
      for (let i = 0; i < Math.min(SITEMAP_RECENT_LIMIT, posts.length); i++) {
        let p = posts[i];
        let card = document.createElement('div');
        card.className = 'recent-card';
        card.innerHTML = `
          <h4><a href="${p.url}" target="_blank">${p.title}</a></h4>
          <div class="recent-meta">📅 ${p.date}</div>
        `;
        grid.appendChild(card);
      }

      // ==== Labels ====
      var labelNames = Object.keys(labelsMap).sort((a,b) => a.localeCompare(b));
      labelNames.forEach(label => {
        var ul = document.createElement('ul');
        ul.className = 'label-list';
        var li = document.createElement('li');
        li.innerHTML = `<strong>${label}</strong> (${labelsMap[label].length})`;
        ul.appendChild(li);
        labelsMap[label].slice(0,5).forEach(p => {
          var pli = document.createElement('li');
          pli.innerHTML = `<a href="${p.url}" target="_blank">${p.title}</a>`;
          ul.appendChild(pli);
        });
        labelsContainer.appendChild(ul);
      });

    } catch (err) {
      document.getElementById('recent-grid').innerHTML = '<div>Gagal memuat daftar.</div>';
      console.error(err);
    }
  }

  (function() {
    var s = document.createElement('script');
    s.src = '/feeds/posts/summary?alt=json-in-script&max-results=' + SITEMAP_MAX_RESULTS + '&callback=sitemapCallback';
    document.body.appendChild(s);
  })();
</script>

<!-- ============================== -->
<!-- 🌙 BAGIAN KEDUA: Versi GRID CARD LAMA -->
<!-- ============================== -->
<style>
/* 🌙 Dark Mode Otomatis */
body.dark-mode #sitemap-container {
  background: #121212;
  color: #f5f5f5;
}
body.dark-mode .sitemap-card {
  background: #1e1e1e;
  border-color: #333;
  color: #f5f5f5;
}
body.dark-mode .sitemap-card a {
  color: #90caf9;
}
body.dark-mode .sitemap-card a:hover {
  color: #ffcc80;
}

/* 🎨 Umum */
#sitemap-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin: 20px auto;
  padding: 10px;
  max-width: 1100px;
}

/* 🧱 Kartu Artikel */
.sitemap-card {
  background: #ffffff;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
}
.sitemap-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}
.sitemap-card h3 {
  font-size: 18px;
  margin: 0 0 10px;
  color: #333;
}
.sitemap-card a {
  text-decoration: none;
  color: #0077cc;
  font-weight: 600;
}
.sitemap-card a:hover {
  color: #ff6600;
}

/* 🏷 Label Judul */
.sitemap-card span.label {
  display: inline-block;
  background: #0077cc;
  color: white;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  margin-bottom: 8px;
}

/* 📱 Responsif */
@media (max-width: 768px) {
  #sitemap-container {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 500px) {
  #sitemap-container {
    grid-template-columns: 1fr;
  }
}
</style>

<div id="sitemap-container"></div>

<script>
/* ⚙️ Konfigurasi Sitemap */
var blogURL = "https://www.inteknologi.com/";
var SITEMAP_RECENT_LIMIT = 5; // jumlah artikel terbaru

/* 🚀 Ambil artikel terbaru dari feed */
fetch(blogURL + "/feeds/posts/default?alt=json&max-results=" + SITEMAP_RECENT_LIMIT)
  .then(response => response.json())
  .then(data => {
    const container = document.getElementById("sitemap-container");
    const entries = data.feed.entry;

    entries.forEach(entry => {
      const title = entry.title.$t;
      const link = entry.link.find(l => l.rel === "alternate").href;
      const category = entry.category ? entry.category[0].term : "Umum";

      const card = document.createElement("div");
      card.className = "sitemap-card";
      card.innerHTML = `
        <span class="label">${category}</span>
        <h3><a href="${link}" target="_blank">${title}</a></h3>
        <p>Artikel terbaru dari kategori <b>${category}</b>.</p>
      `;
      container.appendChild(card);
    });
  })
  .catch(err => console.error("Gagal memuat feed:", err));
</script>


<!-- 🌐 SITEMAP GRID CARD MODERN UNTUK BLOGGER -->
<style>
  /* 🌈 Container utama */
  #sitemap-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
    margin: 20px auto;
    padding: 10px;
    max-width: 1100px;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  }

  /* 🧱 Kartu artikel */
  .sitemap-card {
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }

  .sitemap-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.15);
  }

  /* 🔥 Garis warna di atas kartu */
  .sitemap-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, #2196F3, #E91E63, #4CAF50, #FFC107, #9C27B0);
    background-size: 400%;
    animation: moveGradient 6s linear infinite;
  }

  @keyframes moveGradient {
    0% { background-position: 0%; }
    100% { background-position: 100%; }
  }

  /* Judul artikel */
  .sitemap-card h3 {
    font-size: 18px;
    margin: 10px 0;
    color: #222;
    line-height: 1.4;
  }

  .sitemap-card a {
    color: #111;
    text-decoration: none;
  }

  .sitemap-card a:hover {
    color: #1976d2;
  }

  /* Label kategori */
  .sitemap-card span.label {
    display: inline-block;
    background: #1976d2;
    color: white;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 6px;
    margin-bottom: 8px;
  }

  /* Info tanggal */
  .sitemap-meta {
    font-size: 13px;
    color: #777;
    margin-top: 8px;
  }

  /* 🌓 DARK MODE OTOMATIS */
  @media (prefers-color-scheme: dark) {
    body, #sitemap-container { background: #121212; color: #f1f1f1; }
    .sitemap-card { background: #1e1e1e; border-color: #333; }
    .sitemap-card h3, .sitemap-card a { color: #e6e6e6; }
    .sitemap-card a:hover { color: #4dabf7; }
    .sitemap-meta { color: #aaa; }
  }

  /* 📱 Responsif */
  @media (max-width: 768px) {
    #sitemap-container { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 500px) {
    #sitemap-container { grid-template-columns: 1fr; }
  }
</style>

<div id="sitemap-container">Memuat daftar artikel...</div>

<script>
/* ⚙️ Konfigurasi Sitemap */
var blogURL = "https://www.inteknologi.com/";
var SITEMAP_RECENT_LIMIT = 6; // jumlah artikel yang ingin ditampilkan

/* 🚀 Ambil artikel dari feed Blogger */
fetch(blogURL + "/feeds/posts/summary?alt=json&max-results=" + SITEMAP_RECENT_LIMIT)
  .then(response => response.json())
  .then(data => {
    const container = document.getElementById("sitemap-container");
    const entries = data.feed.entry;
    container.innerHTML = "";

    entries.forEach(entry => {
      const title = entry.title.$t;
      const link = entry.link.find(l => l.rel === "alternate").href;
      const category = entry.category ? entry.category[0].term : "Umum";
      const date = new Date(entry.published.$t).toLocaleDateString('id-ID', {
        year: 'numeric', month: 'short', day: 'numeric'
      });

      const card = document.createElement("div");
      card.className = "sitemap-card";
      card.innerHTML = `
        <span class="label">${category}</span>
        <h3><a href="${link}" target="_blank">${title}</a></h3>
        <div class="sitemap-meta">📅 ${date}</div>
      `;
      container.appendChild(card);
    });
  })
  .catch(err => {
    console.error("Gagal memuat feed:", err);
    document.getElementById("sitemap-container").innerHTML = "<p>Gagal memuat artikel.</p>";
  });
</script>

← Sebelumnya Berikutnya →
Tags:
Artikel Terkait

Tidak ada komentar:

Posting Komentar