Kumpulan Widget Sitemap HTML di Page Statis Blogger

Sitemap HTML sangat penting untuk membantu pengunjung menemukan seluruh konten di blog dengan lebih mudah. Selain itu, sitemap juga membantu meningkatkan struktur internal link yang baik untuk SEO dan AdSense.

Apa Itu Sitemap HTML?

Sitemap HTML adalah halaman khusus yang berisi daftar semua postingan atau halaman dalam sebuah blog. Berbeda dengan sitemap XML yang digunakan untuk mesin pencari, sitemap HTML dibuat untuk pengunjung.

Manfaat Sitemap HTML

• Memudahkan pengunjung menemukan artikel
• Meningkatkan pengalaman pengguna (UX)
• Membantu SEO internal link
• Mempercepat indexing konten baru

Sitemap HTML sangat penting terutama jika kamu ingin membuat struktur blog yang lebih rapi. Sebagai contoh, kamu bisa belajar cara membuatnya secara otomatis melalui panduan berikut: Cara Membuat Sitemap Blogspot Otomatis .

Kumpulan Widget Sitemap HTML Blogger

Berikut beberapa contoh widget sitemap HTML yang bisa kamu gunakan di halaman statis Blogger. Setiap widget memiliki fungsi berbeda, mulai dari menampilkan daftar artikel berdasarkan label, hingga daftar posting otomatis yang terupdate secara real-time.

1. Sitemap Berdasarkan Label

   Widget ini menampilkan daftar artikel berdasarkan kategori atau label tertentu di Blogger. Sangat cocok untuk blog yang memiliki banyak topik, karena memudahkan pengunjung menelusuri konten berdasarkan kategori yang mereka minati.

2. Sitemap Auto Post List

   Widget ini secara otomatis menampilkan semua postingan terbaru dari blog kamu menggunakan feed Blogger atau JavaScript. Keunggulannya adalah data selalu update tanpa perlu edit manual setiap kali membuat artikel baru.

3. Sitemap Minimal Clean

   Sitemap versi sederhana dengan tampilan list tanpa banyak elemen visual. Fokus utama dari widget ini adalah kecepatan loading dan struktur yang ramah SEO, sehingga sangat cocok untuk blog dengan prioritas performa.

Cara Pasang Sitemap HTML di Blogger

Sitemap HTML dapat dipasang di halaman statis Blogger dengan sangat mudah. Halaman ini berfungsi sebagai daftar isi blog yang membantu pengunjung menemukan semua artikel dengan cepat.

Setelah membuat sitemap HTML, langkah penting berikutnya adalah melakukan submit ke Google agar artikel lebih cepat terindeks. Kamu bisa mengikuti panduan lengkapnya di sini: Submit Sitemap ke Google Search Console .

1. Masuk ke Blogger Dashboard
2. Pilih menu Pages (Halaman)
3. Klik New Page / Halaman Baru
4. Masukkan kode sitemap HTML yang sudah disiapkan
5. Pastikan mode editor diubah ke HTML mode
6. Terakhir, klik Publish untuk menampilkan halaman

Setelah halaman dipublikasikan, kamu bisa menambahkan link sitemap ini ke menu navigasi atau footer agar mudah diakses pengunjung.

Berikut beberapa style kode untuk sitemap HTML siap pasang di page statis:

[Model 1] <div class="filter-container">
    <button class="filter-button" onclick="filterByLabel('all')">All</button>
    <!--Label buttons will be dynamically inserted here-->
</div>

<ul id="sitemap"></ul>

<script type="text/javascript">
    var allPosts = []; // Store all posts here
    var uniqueLabels = new Set(); // To store unique labels

    function showrecentposts(json) {
        var sitemap = document.getElementById("sitemap");
        allPosts = json.feed.entry; // Store all posts for filtering

        allPosts.forEach(function(entry) {
            if (entry.category) {
                entry.category.forEach(function(cat) {
                    uniqueLabels.add(cat.term);
                });
            }
        });

        var filterContainer = document.querySelector('.filter-container');
        uniqueLabels.forEach(function(label) {
            var button = document.createElement("button");
            button.className = "filter-button";
            button.textContent = label;
            button.onclick = function() { filterByLabel(label); };
            filterContainer.appendChild(button);
        });

        displayPosts(allPosts); // Display all posts initially
    }

    function displayPosts(posts) {
        var sitemap = document.getElementById("sitemap");
        sitemap.innerHTML = ''; // Clear the sitemap list

        posts.forEach(function(entry) {
            var posttitle = entry.title.$t;
            var posturl;
            var postlabels = '';

            if (entry.category) {
                postlabels = entry.category.map(cat => {
                    var label = cat.term;
                    var labelurl = `/search/label/${encodeURIComponent(label)}`;
                    return `<a href="${labelurl}" class="label-button">${label}</a>`;
                }).join(' ');
            } else {
                postlabels = '<span class="no-label">No Label</span>';
            }

            for (var k = 0; k < entry.link.length; k++) {
                if (entry.link[k].rel == 'alternate') {
                    posturl = entry.link[k].href;
                    break;
                }
            }

            var listItem = document.createElement("li");
            listItem.innerHTML = `
                <div class="post-item">
                    <a href="${posturl}" class="post-title">${posttitle}</a>
                    <div class="post-labels">${postlabels}</div>
                </div>`;
            sitemap.appendChild(listItem);
        });
    }

    function filterByLabel(label) {
        if (label === 'all') {
            displayPosts(allPosts);
        } else {
            var filteredPosts = allPosts.filter(function(entry) {
                return entry.category && entry.category.some(cat => cat.term === label);
            });
            displayPosts(filteredPosts);
        }
    }

    var script = document.createElement("script");
    script.src = "https://example.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999";
    document.body.appendChild(script);
</script>

<style>
    /* Style for the filter container */
    .filter-container {
        text-align: center;
        margin: 20px 0;
    }

    /* Pill-shaped filter buttons */
    .filter-button {
        background-color: #007bff;
        border: none;
        color: white;
        padding: 10px 20px;
        margin: 5px;
        border-radius: 5px;
        font-size: 16px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .filter-button:hover {
        background-color: #0056b3;
    }

    /* Style for the sitemap and post items */
    #sitemap {
        list-style-type: none;
        padding: 0;
        margin: 0;
        margin: auto;
        background-color: #f8f9fa;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        min-height: 800px;
        transition: all 0.3s ease;
    }

    #sitemap li {
        padding: 8px 15px;
        border-bottom: 1px solid #e0e0e0;
        transition: background 0.2s, transform 0.2s;
        border-left: 4px solid black;
        margin-bottom: 4px;
    }

    #sitemap li:hover {
        border-left: 4px solid Blue;
        transform: translateY(-2px);
    }

    #sitemap li:last-child {
        border-bottom: none;
    }

    .post-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .post-title {
        text-decoration: none;
        color: Black;
        font-size: 19px;
        display: block;
        transition: color 0.2s;
    }

    .post-title:hover {
        color: blue;
    }

    .post-labels {
        display: flex;
        gap: 5px;
    }

    .label-button {
        background-color: #48525c;
        color: #ffffff;
        padding: 0px 20px;
        border-radius: 5px;
        text-decoration: none;
        font-size: 14px;
        line-height: 25px;
        transition: background-color 0.2s ease;
    }

    .label-button:hover {
        background-color: #0056b3;
    }

    .no-label {
        color: #555;
        font-size: 14px;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .post-item {
            flex-direction: column;
            align-items: flex-start;
        }

        .post-labels {
            margin-top: 5px;
        }
    }
</style>

[Model 2] <!-- ===== SEO SITEMAP FULL FIX START ===== -->

<h1 class="sitemap-title">Sitemap Blog</h1>
<p class="sitemap-desc">
Kumpulan semua artikel terbaru dari blog ini yang diupdate otomatis.
</p>

<!-- STYLE -->
<style>
.sitemap-title{
  font-size: 26px;
  margin: 10px 0 5px;
}

.sitemap-desc{
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
  line-height: 1.6;
}

#arpian-sitemap{
  font-family: Arial, sans-serif;
  line-height: 1.7;
}

#arpian-sitemap a{
  color: #1a73e8;
  text-decoration: none;
}

#arpian-sitemap a:hover{
  text-decoration: underline;
}

.loading{
  color: #999;
  font-size: 14px;
}
</style>

<!-- CONTAINER -->
<div class="arpian-sitemap" id="arpian-sitemap">
  <span class="loading">Memuat sitemap...</span>
</div>

<!-- CONFIG -->
<script>
var arpianSitemapData = {
  blogUrl: "https://tipstechpraktis.blogspot.com",
  containerId: "arpian-sitemap",

  activeTab: 1,

  // SEO-friendly settings
  showDates: true,
  showSummaries: true,
  numChars: 130,

  // performance
  showThumbnails: false,
  thumbSize: 50,
  noThumb: "",

  monthNames: [
    "Jan","Feb","Mar","Apr","Mei","Jun",
    "Jul","Agu","Sep","Okt","Nov","Des"
  ],

  newTabLink: true,

  // jangan terlalu besar biar ringan
  maxResults: 250,

  cpreload: 0,

  sortAlphabetically: false,

  showNew: 5,
  newText: ' <b style="color:red;">New</b>'
};
</script>

<!-- SCRIPT (Pihak ketiga masih dipakai) -->
<script src="https://cdn.jsdelivr.net/gh/IamArpain/blogger-sitemap-generator-script/Script/arpain-sitemap.js"></script>

<!-- ===== SEO SITEMAP FULL FIX END ===== -->

[Model 3] <h1 class="judul-sitemap">Sitemap Blog A-Z</h1>
<p class="desc-sitemap">
Kumpulan semua artikel di blog ini berdasarkan urutan alfabet.
</p>

<div id="sitemap5">Loading sitemap...</div>

<style>
#sitemap5{
  font-size:14px;
  font-family:Arial,sans-serif;
  font-weight:400;
  line-height:1.6;
}

.judul-sitemap{
  text-align:center;
  font-size:24px;
  margin:10px 0;
}

.desc-sitemap{
  text-align:center;
  color:#666;
  font-size:13px;
  margin-bottom:20px;
}

#sitemap5 a{
  color:#555;
  text-decoration:none;
}

#sitemap5 a:hover{
  color:#000;
}

#sitemap5 .letter{
  background:#2196f3;
  color:#fff;
  padding:10px 15px;
  font-weight:bold;
  text-transform:uppercase;
  margin-top:15px;
  border-radius:4px;
}

#sitemap5 ul{
  list-style:none;
  padding:0;
  margin:0;
  border:1px solid #ddd;
}

#sitemap5 ul li{
  padding:10px 15px;
  border-bottom:1px solid #eee;
}

#sitemap5 ul li:nth-child(even){
  background:#f7f7f7;
}
</style>
<script>
async function loadSitemap(){
  const blogUrl = "https://tipstechpraktis.blogspot.com";
  const feedUrl = blogUrl + "/feeds/posts/default?alt=json&max-results=150";

  const res = await fetch(feedUrl);
  const data = await res.json();

  let posts = data.feed.entry.map(post => {
    return {
      title: post.title.$t,
      link: post.link.find(l => l.rel === "alternate").href
    };
  });

  // SORT A-Z
  posts.sort((a,b)=>a.title.localeCompare(b.title));

  let grouped = {};

  posts.forEach(p=>{
    let letter = p.title.charAt(0).toUpperCase();

    if(!grouped[letter]){
      grouped[letter] = [];
    }

    grouped[letter].push(p);
  });

  let html = "";

  Object.keys(grouped).sort().forEach(letter=>{
    html += `<div class="letter">${letter}</div><ul>`;

    grouped[letter].forEach(post=>{
      html += `<li><a href="${post.link}" target="_blank">${post.title}</a></li>`;
    });

    html += `</ul>`;
  });

  document.getElementById("sitemap5").innerHTML = html;
}

loadSitemap();
</script>

[Model 4] <div class='postSection sitemaps' id='sitemaps'>
  <div class='loading'>Sitemap is Loading....</div>
</div>

<script>/*<![CDATA[*/
/* Blogger Sitemap Dropdown: change i.src="..." with your url */
var toc_config = {containerId:'sitemaps', showNew:0, sortAlphabetically:{thePanel:true, theList:true}, activePanel:1, slideSpeed:{down:400, up:400}, slideEasing:{down: null, up: null}, slideCallback:{down:function(){}, up:function(){}}, clickCallback:function(){}, jsonCallback:'sitemaps',delayLoading: 0};
window.onload = function(){
!function(e,o){var t=o.getElementById(toc_config.containerId),c=o.getElementsByTagName("head")[0],n=[];e[toc_config.jsonCallback]=function(e){for(var o,c,i=e.feed.entry,a=e.feed.category,l="",s=0,d=a.length;d>s;++s)n.push(a[s].term);for(var r=0,f=i.length;f>r;++r)(toc_config.showNew||toc_config.showNew>0)&&r<toc_config.showNew+1&&(i[r].title.$t+=" %new%");i=toc_config.sortAlphabetically.theList?i.sort(function(e,o){return e.title.$t.localeCompare(o.title.$t)}):i,toc_config.sortAlphabetically.thePanel&&n.sort();for(var g=0,h=n.length;h>g;++g){l+='<div class="sitemapBox"><h4 class="sitemapTitle">'+n[g]+'</h4>',l+='<div class="sitemapContent"><ol>';for(var _=0,p=i.length;p>_;++_){o=i[_].title.$t;for(var w=0,u=i[_].link.length;u>w;++w)if("alternate"==i[_].link[w].rel){c=i[_].link[w].href;break}for(var v=0,m=i[_].category.length;m>v;++v)n[g]==i[_].category[v].term&&(l+='<li><a href="'+c+'" title="'+o.replace(/ %new%$/,"")+'">'+o.replace(/ %new%$/,"")+'</a></li>')}l+='</ol></div></div>'}t.innerHTML=l }; var i=o.createElement("script");i.src="/feeds/posts/summary?alt=json-in-script&max-results=9999&callback="+toc_config.jsonCallback,"onload"==toc_config.delayLoading?e.onload=function(){c.appendChild(i)}:e.setTimeout(function(){c.appendChild(i)},toc_config.delayLoading)}(window,document);
}
/*]]>*/</script>

<style>
.sitemaps{font-size:14px}
.sitemapBox{padding:15px;border:0px solid black;border-radius:5px; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;}
.sitemapBox:not(:last-child){margin-bottom:20px}
.postEntry .sitemapTitle{margin-top:0; font-size:14px;font-weight:400;font-family:var(--body-font)}
.sitemapTitle:before{content:'Label: '; font-size:90%;opacity:.8}
.sitemaps ol{list-style:none;margin:0;padding:0;counter-reset:sitemap-count}
.sitemaps li{display:flex;align-items:baseline}
.sitemaps li:not(:last-child){margin-bottom:0}
.sitemaps li:before{content:counter(sitemap-count) '.';counter-increment:sitemap-count;flex-shrink:0;width:25px;font-size:13px;font-family:var(--font-body);line-height:normal; opacity:.7}

.darkMode .sitemapBox{border-color:rgba(255,255,255,.1)}
</style>

Info!

Sebelum menyimpan HTML sitemap di halaman statis Blogger, pastikan kamu melakukan pengecekan terlebih dahulu agar tidak terjadi error saat ditampilkan.

1. Gunakan fitur preview terlebih dahulu sebelum menyimpan perubahan
2. Jika sitemap tidak berfungsi, periksa kembali apakah alamat domain blog sudah benar di dalam script
3. Pastikan tidak ada karakter atau kode yang terpotong saat proses copy–paste

Dengan melakukan pengecekan ini, sitemap akan berjalan lebih stabil dan tidak mengalami masalah pada tampilan maupun indexing.

Tips SEO Sitemap

• Gunakan struktur heading yang rapi (H1, H2, H3)
• Tambahkan internal link ke artikel penting
• Jangan terlalu berat (hindari script berlebihan)
• Gunakan URL sederhana seperti /p/sitemap.html

Untuk optimasi SEO Blogger secara lebih lengkap, kamu bisa membaca panduan berikut: cara optimasi SEO Blogger .

Kesimpulan

Sitemap HTML merupakan elemen penting dalam sebuah blog karena berfungsi sebagai navigasi tambahan bagi pengguna sekaligus membantu proses SEO. Dengan adanya sitemap, pengunjung dapat lebih mudah menemukan seluruh artikel yang tersedia di dalam blog.

Penggunaan widget sitemap yang tepat juga dapat membuat struktur blog menjadi lebih rapi, membantu proses pengindeksan oleh mesin pencari, serta memberikan kesan yang lebih profesional.

Jika kamu menggunakan Blogger, sangat disarankan untuk selalu menyediakan halaman sitemap HTML agar kualitas blog meningkat di mata Google maupun platform monetisasi seperti AdSense.

Pertanyaan yang Sering Diajukan tentang Sitemap HTML Blogger

Apa itu Sitemap HTML di Blogger?

Sitemap HTML adalah halaman khusus yang berisi daftar semua postingan blog dalam bentuk link yang mudah dibaca oleh pengunjung. Fungsinya untuk membantu navigasi dan memudahkan pembaca menemukan artikel.

Apa fungsi Sitemap HTML untuk Blogger?

Sitemap HTML berfungsi untuk meningkatkan pengalaman pengguna (UX), mempermudah navigasi artikel, serta membantu mesin pencari memahami struktur konten blog.

Apakah Sitemap HTML penting untuk SEO?

Ya, Sitemap HTML membantu SEO secara tidak langsung karena memudahkan crawling, mempercepat indexing, dan meningkatkan internal link antar artikel dalam blog.

Bagaimana cara membuat Sitemap HTML di Blogger?

Kamu bisa membuat halaman statis di Blogger, lalu menambahkan script sitemap atau daftar link postingan secara otomatis. Setelah itu publish halaman dan tambahkan ke menu navigasi blog.