Mohon Maaf, tapi website sedang dalam perbaikan. regrads~admin-reeunnn | find me on Github
Beranda
Blogger

Sitemap Keren dan Simple di Blogger

Pelajari cara membuat sitemap keren di Blogger dengan tabel minimalis yang memudahkan navigasi pengunjung dan meningkatkan SEO blog.
Halo, Para Ngenez! Kalau kamu ingin blog-mu terlihat lebih profesional dan mudah dijelajahi oleh pengunjung (dan mesin pencari tentunya), kamu wajib punya sitemap yang keren. Sitemap itu kayak daftar isi di buku, memudahkan pembaca buat nemuin semua artikel yang kamu punya. Nah, di sini aku bakal tunjukin cara bikin sitemap berbentuk tabel simpel dan minimalis di Blogger. Yuk, langsung aja simak!
ngenez.com

Kenapa Perlu Sitemap di Blogger?

Sebelum masuk ke caranya, kamu harus tahu nih kenapa sitemap itu penting:
  • Memudahkan navigasi: Pembaca bisa dengan gampang cari artikel di blog kamu. 
  • SEO-friendly: Sitemap bantu mesin pencari kayak Google buat nge-crawl semua konten di blog. 
  • Meningkatkan user experience: Blog yang rapi dan terstruktur bikin pengunjung betah.

Langkah-Langkah Membuat Sitemap di Blogger

Oke, ini dia caranya. Cukup copy kode berikut dan tempel di halaman baru Blogger kamu. 
<style>
    .sitemap-container {
        border: 1px solid #ddd;
        padding: 20px;
        border-radius: 8px;
        background-color: #f9f9f9;
        margin-top: 20px;
        max-height: 800px; /* Batas tinggi kontainer */
        overflow-y: auto; /* Aktifkan scroll ketika konten lebih tinggi dari kontainer */
    }
    .sitemap-item {
        margin-bottom: 10px;
        padding: 10px;
        border-bottom: 1px solid #eee;
    }
    .sitemap-item:last-child {
        border-bottom: none;
    }
    .sitemap-item a {
        text-decoration: none;
        color: #3366cc;
        font-weight: bold;
    }
    .sitemap-item a:hover {
        color: #ff6600;
    }
    .sitemap-date {
        font-size: 0.9em;
        color: #666;
        text-align: right;
      	font-weight: bold;
    }
    .loading {
        font-size: 1.2em;
        color: #999;
        text-align: center;
        margin-top: 20px;
    }
</style>

<div class="sitemap">
    <h2>Daftar Isi Blog</h2>
    <div id="loading-message" class="loading">Ngenez.com</div>
    <div id="sitemap-content" class="sitemap-container" style="display:none;"></div>
    <script>
        var posts = [];
        function loadPosts() {
            var script = document.createElement('script');
            script.src = "/feeds/posts/summary?max-results=150&alt=json-in-script&callback=processPosts";
            document.getElementsByTagName('head')[0].appendChild(script);
        }
        function processPosts(json) {
            for (var i = 0; i < json.feed.entry.length; i++) {
                var entry = json.feed.entry[i];
                var postTitle = entry.title.$t;
                var postUrl;
                var postDate = new Date(entry.published.$t);
                for (var j = 0; j < entry.link.length; j++) {
                    if (entry.link[j].rel == 'alternate') {
                        postUrl = entry.link[j].href;
                        break;
                    }
                }
                posts.push({ title: postTitle, url: postUrl, date: postDate });
            }
            displayPosts();
        }
        function displayPosts() {
            // Sort posts by date (newest first)
            posts.sort(function(a, b) {
                return b.date - a.date;
            });

            var html = '';
            posts.forEach(function(post, index) {
                var formattedDate = post.date.toLocaleDateString();
                html += '<div class="sitemap-item">';
                html += '<a href="' + post.url + '">' + post.title + '</a>';
                html += '<div class="sitemap-date">(' + formattedDate + ')</div>';
                html += '</div>';

                // Menampilkan hingga 10 artikel tanpa scroll tambahan
                if (index === 9) {
                    // Tambahkan pembatas untuk scroll
                    document.querySelector('.sitemap-container').style.overflowY = 'auto';
                }
            });

            document.getElementById('sitemap-content').innerHTML = html;
            document.getElementById('loading-message').style.display = 'none';
            document.getElementById('sitemap-content').style.display = 'block';
        }
        loadPosts();
    </script>
</div>

Penjelasan Kodenya:

  1. Gaya Tabel yang Minimalis: Aku pakai CSS biar tampilan tabelnya clean dan elegan. Ada warna latar yang bergantian buat baris-baris tabel biar gak monoton.
  2. Loading Indicator: Saat halaman pertama kali dimuat, pengunjung akan lihat pesan "Loading..." sebelum artikelnya muncul.
  3. Pengurutan Berdasarkan Tanggal: Artikel ditampilkan dari yang terbaru ke yang lama. Jadi, pengunjung langsung lihat artikel terbaru kamu.

Cara Menggunakannya:

  1. Buka Blogger dan buat halaman baru.
  2. Tempelkan kode di mode HTML.
  3. Publikasikan halaman, dan voila! Sitemap kamu udah jadi.

Tips SEO Buat Sitemap

  • Perbarui secara berkala: Sitemap bakal otomatis nambah artikel baru, tapi kamu bisa sesekali cek dan sesuaikan tampilannya. 
  • Tambahkan deskripsi singkat di sekitar sitemap untuk menjelaskan isi halaman.
Itulah cara membuat sitemap keren di Blogger dengan tabel minimalis. Semoga membantu, dan blog kamu makin keren serta ramah pengunjung dan mesin pencari! Selamat mencoba, Sobat Blogger! 🎉

DEMO : Bisa lihat Sitemap yang ada di blog Ngenez.com
Seseorang yang nggak tahu mau ngapain lagi... :) Karena udah di titik tergalau karena cinta selalu di tolak. :(