Jika kamu mengunjungi sebuah website atau blog sering ditemukan menu navigasi yang mengarah pada halaman sitemap, daftar isi, atau daftar konten. Sesuai namanya, halaman ini berisi daftar isi seluruh postingan dalam website atau blog tersebut.
Jika kamu mempunyai blog, Kamu harus melengkapi dari beberapa fitur ketrsediaan blog kamu contoh seperti halaman kontak, About, Disclaimer. Kamu juga perlu melengkapi blog kamu dengan sebuah halaman sitemap.
Karena Sitemap menampilkan daftar isi seluruh postingan blog, maka sebuah blog sangat perlu dilengkapi dengan sebuah halaman sitemap agar memudahkan pengunjung memilih informasi apa yang ingin mereka ketahui.
Maka dari itu, pada tulisan ini saya akan coba membagikan sebuah informasi tentang cara membuat halaman sitemap pada blog dengan platform blogger.
Guna Halaman Sitemap
Untuk hal ini sudah saya sebutkan di atas, bahwa halaman sitemap berfungsi untuk menampilkan daftar isi seluruh postingan blog kami. Dengan daftar isi tersebut, maka pengunjung dapat dengan mudah melihat informasi yang ingin mereka ketahui.
Apalagi jika blog kamu sudah memiliki ratusan atau ribuan postingan, maka sitemap akan sangat memudahkan pengunjung saat mengunjungi blog kamu.
Karena biasanya, halaman sitemap pada blog dibuat secara sistematis untuk menampilkan postingan berdasarkan label atau kategori yang sesuai urutan abjad dan waktu pembuatan postingan.
Jenis Halaman Sitemap
Halaman sitemap yang saya maksud dalam tulisan ini adalah halaman sitemap.html dan bukan sitemap.xml. Karena sitemap yang berbeda jenisnya, berbeda pula fungsi dan cara membuatnya.
Halaman sitemap.html sendiri ada dua jenis, yaitu sitemap yang dibuat manual dan sitemap yang dibuat dengan secara otomatis. Untuk sitemap yang dibuat manual, saya tidak menyarankannya karena membutuhkan usaha yang lebih untuk membuatnya.
Sebaliknya, sitemap yang dibuat otomatis akan sangat dalam membuatnya, karena hanya dengan memasukan beberapa kode, maka sitemap sudah terbuat dengan sendirinya. Blog ini juga menggunakan sitemap otomatis, jadi saya juga menyarankan kamu untuk membuat sitemap blog kamu dengan secara otomatis.
Apabila kamu ingin membuat halaman sitemap otomatis untuk blog kamu, maka silahkan ikuti cara berikut ini.
Membuat Halaman Sitemap Otomatis
Setelah mengetahui manfaat dan jenis halaman blog, maka sekarang saatnya membuat halaman sitemap otomatis pada blogger. Silahkan kamu buat halaman baru terlebih dahulu yang caranya seperti dibawah.
- Pada dashboard blogger pilih menu Page/Halaman - pilih new page/halaman baru - ketik judul halaman misalnya sitemap, daftar isi, daftar konten, dan sejenisnya.
- Pada bagian konten, silahkan beralih pada tampilan html dan isikan kode skrip sesuai yang kamu inginkan (Pilih skrip sesuai template yang kamu gunakan).
- Apabila sudah selesai silahkan pilih publikasikan.
Sitemap Template Viomagz dan Linkmagz
<div class="tabbed-toc" id="tabbed-toc">
<span class="loading">Memuat…</span></div>
<script>
var tabbedTOC = {
blogUrl: "https://bloganda.com/", // Blog URL
containerId: "tabbed-toc", // Container ID
activeTab: 1, // The default active tab index (default: the first tab)
showDates: true, // `true` to show the post date
showSummaries: false, // `true` to show the posts summaries
numChars: 200, // Number of summary chars
showThumbnails: true, // `true` to show the posts thumbnails (Not recommended)
thumbSize: 60, // Thumbnail size
noThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // A "no thumbnail" URL
monthNames: [ // Array of month names
"Januari",
"Februari",
"Maret",
"April",
"Mei",
"Juni",
"Juli",
"Agustus",
"September",
"Oktober",
"November",
"Desember"
],
newTabLink: true, // Open link in new window?
maxResults: 99999, // Maximum post results
preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
sortAlphabetically: true, // `false` to sort posts by published date
showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
newText: ' – <em style="color:red;">New!</em>' // HTML for the "New!" text
};
</script> <script src="//cdn.rawgit.com/tovic/dte-project/2fd2d2971c3398029ea5e149696447243e7f4d94/tabbed-toc.min.js"></script>
Silahkan ganti tulisan https://bloganda.com dengan alamat blog kamu.
Sitemap Template Median Ui dan Fletro Pro
<style>
.Blog .sitemaps .sitemap-box{font-size:14px;line-height:1.5em;padding:15px 18px;border-radius:8px;}
.Blog .sitemaps .sitemap-box:not(:last-child){margin-bottom:15px}
.Blog .sitemaps .judul{margin-top:0;font-size:1.1rem}
.Blog .sitemaps ol{list-style:none;margin:20px 0 0;padding:0;counter-reset:panduan-count;font-size:14px;}
.Blog .sitemaps li:not(:last-child){margin-bottom:10px}
.Blog .sitemaps li{display:flex;align-items:flex-start;}
.Blog .sitemaps li:before{content:counter(panduan-count) '.';counter-increment:panduan-count;flex-shrink:0;width:45px;font-size:26px;line-height:1em;color:#767676;text-align:center;padding-right:12px}
.Blog .sitemaps li a{display:inline-block;color:#161617}
.Blog .sitemaps li a:after{content:'Selengkapnya';display:block;color:#767676;font-size:11px;line-height:1.3em}
.Blog .sitemaps li a:hover:after{text-decoration:underline}
.darkMode .Blog .sitemaps li:before{color:#fff;}
.darkMode .Blog .sitemaps li a{color:#fff;}
.darkMode .Blog .sitemaps li a:after{color:#fff;}
</style>
<div id='post-body'><div id='sitemaps' class='sitemaps'>
<div class='loading'>Loading....</div>
</div>
<script>/*<![CDATA]*/
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=\"sitemap-box\"><h4 class=\"judul\">'+n[g]+'</h4>',l+='<div class=\"konten\"><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,"undefined"!=typeof jQuery&&($("#"+toc_config.containerId+" .konten").hide(),$("#"+toc_config.containerId+" .judul").click(function(){$(this).hasClass("aktif")||(toc_config.clickCallback(this),$("#"+toc_config.containerId+" .judul").removeClass("aktif").next().slideUp(toc_config.slideSpeed.up,toc_config.slideEasing.up,toc_config.slideCallback.up),$(this).addClass("aktif").next().slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down))}).eq(toc_config.activePanel-1).addClass("aktif").next().slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down))};var i=o.createElement("script");i.src="https://musdzgn.blogspot.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></div>
</div>
Kamu bisa melihat hasilnya dengan cara klik tombol demo dibawah.
Demikian tentang informasi Membuat Halaman Sitemap Otomatis di Blogger, dan semoga dapat berguna.