Panduan Membuat Halaman Sitemap di Blogger (Support Median UI & SEO Friendly)

Oleh TipsTechPraktis -

Apa itu Halaman sitemap atau daftar isi blog berfungsi sebagai navigasi untuk memudahkan pengunjung menjelajahi semua artikel berdasarkan label. Artikel ini akan membahas cara membuat sitemap khusus untuk template Median UI dengan tampilan profesional, ringan, serta mendukung SEO.

Kenapa Sitemap Penting di Blogger?

  • Mempermudah pengunjung menemukan konten
  • Membantu crawler Google dalam mengindeks halaman
  • Menambah struktur internal link blog
  • Menambah nilai SEO halaman

Cara Membuat Sitemap Median UI di Blogger

1. Buat Halaman Statis Baru

Masuk ke dashboard Blogger > Halaman > Halaman Baru. Beri judul seperti: Sitemap atau Daftar Isi.

2. Gunakan Script Sitemap Tabulasi Otomatis

Salin dan tempelkan kode berikut pada mode HTML halaman:

Untuk Template Median Ui 1.6

<!--[ Sitemap script DTE, source: dte.web.id/teknis/widget-daftar-isi-tabulasi-blogger ]-->

  <script src='//dte-project.github.io/blogger/tabbed-toc.min.js?active=0&amp;load=true&amp;ad=false&amp;date=%25M~%25%20%25D%25%2C%20%25Y%25' defer='defer'></script>

  

  <style>

    .tabbed-toc{border:0;font-size:15px}

    .tabbed-toc-tabs{width:10em;font-size:14px}

    .tabbed-toc-tab{padding:0 15px;border-radius:3px 0 0 3px;position:relative;transition:var(--trans-1);color:inherit}

    .tabbed-toc-tab::after{content:'';position:absolute;top:0;bottom:0;right:0;border-right:1px solid var(--linkC);opacity:0}

    .tabbed-toc-tab:hover, .tabbed-toc-tab.active{background:var(--transB)}

    .tabbed-toc-tab:hover::after, .tabbed-toc-tab.active::after{opacity:1}

    .tabbed-toc-tab.active{color:var(--linkC);opacity:.7}

    .ltr .tabbed-toc-panels{border-color:var(--contentL)}

    .ltr .tabbed-toc-time{position:relative;font-size:12px;opacity:.7}

    .tabbed-toc li{padding:5px 7.5px;line-height:1.6em;min-height:40px;display:flex;align-items:center;justify-content:space-between}

    .tabbed-toc li >*{padding:0 7.5px; margin:0}

    .tabbed-toc a{color:inherit}

    .tabbed-toc-title{font-size:16px}

    .tabbed-toc-title sup{font-weight:400;font-size:12px;color:var(--linkC)}

    .drkM .ltr .tabbed-toc-panels{border-color:rgba(255,255,255,.1)}

    .drkM .tabbed-toc-tab.active, .drkM .tabbed-toc-title sup{color:var(--darkL)}

    .drkM .tabbed-toc-tab::after{border-color:var(--darkL)}

    @media screen and (max-width:750px){

      .tabbed-toc nav{display:flex;overflow-x:scroll;overflow-y:hidden;scroll-behavior:smooth;scroll-snap-type:x mandatory; -ms-overflow-style:none;-webkit-overflow-scrolling:touch; /*position:relative;width:calc(100% + 40px);left:-20px;right:-20px;padding:0 20px*/}

      .tabbed-toc nav::-webkit-scrollbar{width:0;height:0}

      .tabbed-toc nav::-webkit-scrollbar-track{background:transparent}

      .tabbed-toc nav::-webkit-scrollbar-thumb{background:transparent;border:none}

      .tabbed-toc-tab{border-radius:3px 3px 0 0;white-space:nowrap;flex-shrink:0;scroll-snap-align:start}

      .tabbed-toc-tab::after{top:auto;left:0;border-right:0;border-bottom:1px solid var(--linkC)}

      .tabbed-toc ol{margin-top:15px;padding:0 15px;list-style:decimal}

      .tabbed-toc li{display:list-item;padding:5px 0;overflow:visible;list-style:inherit}

      .drkM .tabbed-toc-tab::after{border-color:var(--darkL)}

    }

    @media screen and (max-width:500px){

      .tabbed-toc-title{font-size:15px}

    }

  </style>

Cara Mengganti Angka atau Titik pada Tabbed TOC DTE Menjadi Ikon SVG Panah

Secara default, tampilan daftar isi DTE (Tabbed TOC) menampilkan angka atau titik di depan judul artikel. Jika kamu ingin menggantinya dengan ikon panah agar terlihat lebih modern, kamu cukup menambahkan sedikit kode CSS tambahan.

Langkah-langkah Ganti Titik dengan Ikon SVG Panah

  1. Buka halaman statis tempat kamu menyimpan sitemap DTE.
  2. Temukan bagian <style> ... </style> yang mengatur tampilan Tabbed TOC.
  3. Tambahkan kode CSS berikut di bagian akhir:
<style>
.tabbed-toc li {
  counter-increment: toc-counter;
  position: relative;
  list-style: none;
  padding-left: 1.5em;
}

.tabbed-toc li:before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  width: 1em;
  height: 1em;
  background: url('data:image/svg+xml;utf8,<svg fill="currentColor" height="20" width="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M9.29 6.71a1 1 0 0 1 1.42 0L15 11l-4.29 4.29a1 1 0 0 1-1.42-1.42L12.17 12 9.29 9.12a1 1 0 0 1 0-1.41z"/></svg>') no-repeat center;
  background-size: contain;
}
</style>

Hasilnya:

Setelah menerapkan kode di atas, daftar isi kamu akan tampil seperti ini:

  • ➡ Judul Artikel 1
  • ➡ Judul Artikel 2
  • ➡ Judul Artikel 3

Keuntungan Menggunakan SVG

  • Lebih ringan daripada gambar PNG atau icon font.
  • Mendukung pewarnaan dengan currentColor.
  • Tampilan modern dan kompatibel dengan dark mode.

Penting! Pastikan kamu menghapus atau menonaktifkan CSS sebelumnya yang masih menggunakan counter(sitemap-count) agar tidak menimbulkan konflik tampilan.

Untuk Template Median Ui 1.5


    	<div class='postSection sitemaps' id='sitemaps'>

  <div class='loading'>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="https://www.your_domain.com/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:1px solid var(--content-border);border-radius:5px}

.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>

3. Tambahkan Ikon SVG (Opsional)

Untuk menampilkan ikon panah atau indikator lainnya, kamu bisa menyisipkan SVG seperti ini sebelum judul artikel.

Untuk mengganti titik (•) atau angka di daftar isi (sitemap) Blogger menjadi ikon SVG panah, kamu cukup memodifikasi bagian CSS dan HTML output list dari widget sitemap.

Kalau Mau Ganti Titik dengan Ikon SVG

Secara default, daftar isi menampilkan angka & titik. Tapi kamu bisa menggantinya dengan ikon SVG panah agar lebih modern dan ringan dimuat di semua browser.

🔁 Ganti kode CSS ini:

.sitemaps li:before {
  content: counter(sitemap-count) '.';
}

✅ Jadi seperti ini:

.sitemaps li:before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 8px;
  background: url('data:image/svg+xml;utf8,<svg fill="currentColor" height="20" width="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M9.29 6.71a1 1 0 0 1 1.42 0L15 11l-4.29 4.29a1 1 0 0 1-1.42-1.42L12.17 12 9.29 9.12a1 1 0 0 1 0-1.41z"/></svg>') no-repeat center;
  background-size: contain;
}

Hasilnya:

  • ➡ Judul Artikel 1
  • ➡ Judul Artikel 2
  • ➡ Judul Artikel 3

SVG inline ini sangat ringan, tidak menambah beban loading halaman, dan tetap aman untuk SEO & AdSense. Cocok digunakan untuk template seperti Median UI dan sejenisnya.

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M1 8l6-6v12z"/></svg>

4. Simpan & Publikasikan Halaman

Setelah semua selesai, klik Publikasikan. Kini kamu sudah punya halaman sitemap otomatis.

Kelebihan Menggunakan Sitemap Ini

  • Memuat berdasarkan label blog
  • Mendukung tampilan mobile
  • Kompatibel dengan berbagai template seperti Median UI
  • Mudah diintegrasikan dan tidak berat

Tips Optimasi SEO untuk Sitemap

  1. Tambahkan internal link ke halaman sitemap dari menu navigasi blog
  2. Gunakan heading (H2, H3) yang relevan
  3. Pastikan setiap label di blog diatur dengan benar

Penutup

Dengan sitemap yang terstruktur rapi, kamu dapat meningkatkan kenyamanan pengguna dan nilai SEO blog kamu. Cara ini juga cocok digunakan pada template modern seperti Median UI karena ringan dan kompatibel. Jangan lupa untuk update label agar daftar isi tetap akurat.

Komentar

Posting Komentar

Postingan populer dari blog ini

GoPay Bukan Sekadar E-Wallet: Inilah Inovasi Finansial

Oleh TipsTechPraktis -
Ulasan Aplikasi GoPay: Lebih dari Sekadar Dompet Digital Eh, udah tau belum GoPay ada app baru? Download deh. Dapet 100x GRATIS transfer ke semua bank, jadi bisa hemat s.d. Rp250.000! Selalu ada harga MURAAAH di app GoPay. Ini link downloadnya di bawah. Gopay Ewallet 25MB ios dan android .apk dan ios Apa Itu Aplikasi GoPay? Dulunya hanya fitur tambahan di aplikasi Gojek, kini GoPay hadir sebagai aplikasi standalone di Google Play dan App Store . Fokus utamanya: memberikan pengalaman pembayaran dan pengelolaan uang digital yang cepat, aman, dan fleksibel. Fitur Unggulan yang Jarang Dibahas Transfer Antar Bank Bebas Biaya: Hingga 100x per bulan, bahkan dijamin sampai dalam 1 menit atau Anda dapat kompensasi otomatis. QRIS Satu Scan untuk Semua: Tak peduli tokonya pakai bank apa, cukup scan dengan GoPay. GoPay Later...
Read more »

Cara Membuat Recent Post Otomatis di Blogger Tanpa JavaScript Berat

Oleh TipsTechPraktis -
Widget Recent Post atau postingan terbaru adalah fitur penting di Blogger yang membantu pembaca tetap terhubung dengan konten terbaru Anda. Namun, banyak widget recent post menggunakan JavaScript dari pihak ketiga yang memperlambat loading blog dan berdampak buruk terhadap SEO. Dalam panduan ini, Anda akan belajar cara menampilkan recent post otomatis tanpa JavaScript berat, cukup dengan memanfaatkan fitur feed Blogger dan sedikit pengaturan HTML sederhana. Cara ini ringan, SEO friendly, dan sangat efektif. Kenapa Harus Menghindari JavaScript Berat? Sering memuat dari domain luar Menambah beban render halaman Menurunkan skor Core Web Vitals Membuat struktur data tidak terbaca crawler Cara Kerja Feed Blogger Setiap blog Blogger memiliki feed RSS atau Atom default. Feed ini bisa digunakan untuk menampilkan konten terbaru secara otomatis tanpa skrip berat. https://NAMA-BLOG-ANDA.blogspot.com/feeds/posts/default?alt=rss Kode HTML Recent Post Ringan <b:widge...
Read more »