Halaman peta situs atau yang dalam bahasa inggris disebut dengan sitemap adalah sebuah halaman yang berisi peta atau jalur menuju semua artikel yang ada pada sebuah blog. Fungsi peta situs mirip dengan daftar isi pada buku. Dengan peta situs diharapkan pengunjung dapat menemukan dan mengakses seluruh artikel yang ada pada blog.
Halaman peta situs atau sitemap berfungsi untuk mempermudah navigasi didalam blog. Dengan halaman peta situs diharapkan pengunjung tidak “tersesat” ketika mengunjungi blog kita karena sudah memegang “peta”. Halaman peta situs juga berfungsi mempermudah mesin pencari saat mengindeks artikel yang ada pada suatu blog, jadi peta situs juga berfungsi mengarahkan crawler dari mesin pencari agar tidak “tersesat” pada blog kita.
Cara membuat halaman peta situs pada blogger atau blogspot sebenarnya sangat mudah. Kita cukup membuat script yang menampilkan semua judul artikel secara otomatis memanfaatkan fitur umpan artikel (feed) yang tersedia. Script tersebut kita buat dalam format javascript dengan beberapa kode CSS untuk mempercatik tampilan.
Berikut ini cara membuat halaman peta situs pada blogger/ blogspot:
- Buat halaman baru dengan cara klik menu Laman lalu klik Laman Baru
- Beri judul halaman baru tersebut dengan nama Peta Situs.
- Klik tab HTML untuk mengubah mode teks editor
- Taruh kode berikut ini pada isi halaman
<p> </p><div id="sitemap">Loading...</div>
<script> //<![CDATA[
var start=1;var max=150;var sitemapArr=new Array();function runsitemap(){var scpt=document.createElement('script');scpt.src='/feeds/posts/summary?alt=json&callback=sitemap&start-index='+start+'&max-results='+max;document.body.appendChild(scpt)} function sitemap(root){var elem=document.getElementById('sitemap');if(!elem)return;elem.innerHTML='';var feed=root.feed;if(feed.entry.length>0){for(var i=0;i<feed.entry.length;i++){var entry=feed.entry[i];var title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=="alternate"){var url=entry.link[j].href;if(url&&url.length>0&&title&&title.length>0){sitemapArr.push({'url':url,'judul':title})} break}}} if(feed.entry.length>=max){start+=max;runsitemap()} else{var print='';for(var x=0;x<sitemapArr.length;x++){print+='<li><a href=\"'+sitemapArr[x].url+'\" title=\"'+sitemapArr[x].judul+'\">'+sitemapArr[x].judul+'</a></li>'}
elem.innerHTML='<div class=\"title\">Total Post: '+sitemapArr.length+'</div><ol>'+print+'</ol>'}}} runsitemap();
//]]> </script>
5. Setelah selesai langsung saja klik Publikasikan.
6. Halaman Peta situs akan dipublikasikan dengan alamat URL p/peta-situs.html.
7. Silahkan tambahkan link menuju halaman peta situs tersebut pada menu.
8. Berikut ini contoh tampilan halaman peta situs
Saat kita buka halaman peta situs ini memang agak sedikit lambat dikarenakan proses mengindeks semua halaman yang ada pada blog membutuhkan waktu yang relatif lama tergantung dari banyaknya artikel dan kecepatan jaringan internet yang kita pakai. Demikian cara membuat halaman peta situs pada blogger/blogspot. Untuk menyesuaikan tampilan pada blog masing-masing silahkan edit saja kode CSS yang ada didalam halaman peta situs tadi, atur padding, margin, warna dan sebagainya menurut selera masing-masing.