Script Daftar Isi Blog Otomatis dengan Label dan Tag NEW - XWAPPER

isi otomatis memudahkan pengunjung menemukan konten berdasarkan kategori atau label yang sudah kita buat. Selain itu, Sitemap yang rapi juga sangat disukai oleh mesin pencari seperti Google karena mempermudah robot mereka melakukan crawling pada setiap link artikel.

Fitur Script Sitemap

• Grouping by Label: Artikel otomatis dikelompokkan berdasarkan kategori.
• Tag NEW Otomatis: Artikel terbaru akan mendapatkan label "NEW" yang berkedip.
• Responsive Design: Tampilan oke.
• Ringan: Tidak membebani loading blog.

Langkah-Langkah Pemasangan

Untuk memasangnya di blog, ikuti tutorial sederhana berikut ini:

1. Masuk ke Dashboard Blogger kalian.
2. Pilih menu Halaman (Pages) dan klik Halaman Baru.
3. Copy dan paste kode script sitemap yang sudah disediakan di bawah ini.
4. Taruh namablog kamu di pengaturan script paling bawah.

Silakan salin kode dibawah ini:

<style>
#xwapper-sitemap-pro {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
}
.xw-label-group {
    margin-bottom: 25px;
}
.xw-label-head {
    background: #3498db;
    color: #ffffff;
    padding: 10px 18px;
    font-weight: bold;
    border-radius: 6px;
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.xw-post-ul {
    list-style: none;
    padding: 0;
    margin: 10px 0 0 5px;
}
.xw-post-li {
    padding: 10px 12px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Agar tag NEW ada di kanan */
    transition: 0.3s;
}
.xw-post-li:hover {
    background: #f1f8ff;
}
.xw-post-li a {
    color: #2c3e50;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}
/* Label NEW */
.xw-new-tag {
    background: #e74c3c;
    color: white;
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
    margin-left: 10px;
    text-transform: uppercase;
    animation: xw-blink 1s infinite;
}
@keyframes xw-blink {
    0% {opacity: 1;}
    50% {opacity: 0.4;}
    100% {opacity: 1;}
}
</style>

<div id="xwapper-sitemap-pro">Menganalisis konten terbaru...</div>

<script>
function createSitemap(json) {
    var entries = json.feed.entry;
    var labels = {};
    var today = new Date();
    var newRange = 2; // Artikel Baru

    for (var i = 0; i < entries.length; i++) {
        var entry = entries[i];
        var title = entry.title.$t;
        var publishedDate = new Date(entry.published.$t);
        var link = "";
        
        for (var k = 0; k < entry.link.length; k++) {
            if (entry.link[k].rel == 'alternate') {
                link = entry.link[k].href;
                break;
            }
        }
        
        // Cek apakah postingan masih baru
        var diffInDays = (today - publishedDate) / (1000 * 60 * 60 * 24);
        var isNew = diffInDays <= newRange;
        
        var postData = {title: title, link: link, isNew: isNew};

        if (entry.category) {
            for (var j = 0; j < entry.category.length; j++) {
                var labelName = entry.category[j].term;
                if (!labels[labelName]) labels[labelName] = [];
                labels[labelName].push(postData);
            }
        } else {
            if (!labels["Lainnya"]) labels["Lainnya"] = [];
            labels["Lainnya"].push(postData);
        }
    }

    var container = document.getElementById('xwapper-sitemap-pro');
    var html = "";
    var labelKeys = Object.keys(labels).sort();

    for (var l = 0; l < labelKeys.length; l++) {
        var key = labelKeys[l];
        html += '<div class="xw-label-group">';
        html += '<div class="xw-label-head">' + key + '</div>';
        html += '<ul class="xw-post-ul">';
        for (var m = 0; m < labels[key].length; m++) {
            var post = labels[key][m];
            html += '<li class="xw-post-li">';
            html += '<a href="' + post.link + '">' + post.title + '</a>';
            if (post.isNew) {
                html += '<span class="xw-new-tag">NEW</span>';
            }
            html += '</li>';
        }
        html += '</ul></div>';
    }
    container.innerHTML = html;
}
</script>

<script src="https://namablog.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=createSitemap"></script>