Keberadaan halaman peta situs (sitemap) statis dalam format HTML (HyperText Markup Language) akan sangat membantu pengunjung website untuk menavigasi situs dengan mudah. Blogger memiliki banyak gadget menarik tetapi tidak ada gadget yang tersedia untuk membuat halaman peta situs statis. Dalam tutorial ini, kamu akan belajar cara membuat halaman sitemap HTML di Blogger.
Apa Itu Halaman Sitemap HTML?
Sitemap HTML adalah halaman khusus yang memudahkan navigasi situs web. Ini adalah daftar lengkap postingan yang dipublikasikan di blog, termasuk topik postingan. Pengunjung dapat dengan mudah menemukan topik ketika mereka tidak dapat menemukannya dengan mencari di situs atau menavigasi menu situs.
Halaman peta situs HTML berisi semua posting yang telah dipublikasikan. Jika blog atau website memiliki terlalu banyak konten maka akan sedikit sulit untuk mengetahui mana konten lama yang dipublikasikan.
Jadi, jika pengunjung ingin mencoba mencari postingan yang diterbitkan beberapa bulan atau tahun yang lalu dan pencarian blog tidak memberikan hasil, maka sangat ideal untuk memeriksa peta situs. Kamu dapat dengan mudah membuat halaman peta situs HTML untuk blog dan menautkannya di bagian footer blog.
Tidak cuma itu, membuat halaman sitemap HTML juga bisa jadi salah satu cara agar website muncul di hasil pencarian Google. Dengan skema yang terstruktur, bot mesin pencari akan lebih mudah untuk melihat dan merayapi situs/blog kamu.
Cara Buat Sitemap HTML di Blogger
Membuat halaman peta situs HTML di Blogger sangat mudah dan kamu dapat melakukannya tanpa menghadapi masalah apa pun. Cukup ikuti langkah-langkah di bawah ini dengan hati-hati.
1 Login ke dasbor Blogger lalu buat halaman baru pada menu Pages > New Pages
2 Beri judul halaman "Sitemap" lalu masuk ke mode editor HTML
3 Jika sudah, salin kode di bawah ini
<style type="text/css">
.post-archive{margin-bottom: 20px}
.post-archive h2{display:block;color:#000;font-size:23px;font-family:'Roboto', Arial, sans-serif;font-weight:500;margin:0;padding:0}
.post-archive ul{padding: 0 0 0 15px;margin: 15px 0 0 0;}
.post-archive ul li{padding: 0;margin: 0 0 8px 0;list-style: inside}
.post-archive ul li:before{content: '';margin: 0;padding: 0}
.post-archive ul li:last-child{margin: 0}
.ct-columns li strong{font-family: 'Roboto', Arial, sans-serif;font-weight:500;font-style:italic;color:#FF5F00;}
</style>
<script type="text/javascript">
var postTitle=new Array,postUrl=new Array,postPublished=new Array,postDate=new Array,postLabels=new Array,postRecent=new Array,sortBy="titleasc",numberfeed=0;function bloggersitemap(b){!function(){if("entry"in b.feed){var t=b.feed.entry.length;numberfeed=t;for(var e=ii=0;e<t;e++){for(var s,o=b.feed.entry[e],i=o.title.$t,l=o.published.$t.substring(0,10),r=0;r<o.link.length;r++)if("alternate"==o.link[r].rel){s=o.link[r].href;break}for(var p="",r=0;r<o.link.length;r++)if("enclosure"==o.link[r].rel){p=o.link[r].href;break}var a="";if("category"in o)for(r=0;r<o.category.length;r++){var n=(a=o.category[r].term).lastIndexOf(";");-1!=n&&(a=a.substring(0,n)),postLabels[ii]=a,postTitle[ii]=i,postDate[ii]=l,postUrl[ii]=s,postPublished[ii]=p,postRecent[ii]=e<10,ii+=1}}}}(),sortPosts(sortBy="titledesc"),sortlabel(),displayToc()}function sortPosts(t){function e(t,e){var s=postTitle[t];postTitle[t]=postTitle[e],postTitle[e]=s;s=postDate[t];postDate[t]=postDate[e],postDate[e]=s;s=postUrl[t];postUrl[t]=postUrl[e],postUrl[e]=s;s=postLabels[t];postLabels[t]=postLabels[e],postLabels[e]=s;s=postPublished[t];postPublished[t]=postPublished[e],postPublished[e]=s;s=postRecent[t];postRecent[t]=postRecent[e],postRecent[e]=s}for(var s=0;s<postTitle.length-1;s++)for(var o=s+1;o<postTitle.length;o++)"titleasc"==t&&postTitle[s]>postTitle[o]&&e(s,o),"titledesc"==t&&postTitle[s]<postTitle[o]&&e(s,o),"dateoldest"==t&&postDate[s]>postDate[o]&&e(s,o),"datenewest"==t&&postDate[s]<postDate[o]&&e(s,o),"orderlabel"==t&&postLabels[s]>postLabels[o]&&e(s,o)}function sortlabel(){sortPosts(sortBy="orderlabel");for(var t=0,e=0;e<postTitle.length;){for(temp1=postLabels[e],firsti=t;postLabels[t+=1]==temp1;);if(e=t,sortPosts2(firsti,t),e>postTitle.length)break}}function sortPosts2(t,e){for(var s,o,i,l=t;l<e-1;l++)for(var r=l+1;r<e;r++)postTitle[l]>postTitle[r]&&(o=r,i=void 0,i=postTitle[s=l],postTitle[s]=postTitle[o],postTitle[o]=i,i=postDate[s],postDate[s]=postDate[o],postDate[o]=i,i=postUrl[s],postUrl[s]=postUrl[o],postUrl[o]=i,i=postLabels[s],postLabels[s]=postLabels[o],postLabels[o]=i,i=postPublished[s],postPublished[s]=postPublished[o],postPublished[o]=i,i=postRecent[s],postRecent[s]=postRecent[o],postRecent[o]=i)}function displayToc(){for(var t=0,e=0;e<postTitle.length;){for(temp1=postLabels[e],document.write(""),document.write('<div class="post-archive"><h2>'+temp1+'</h2><ul class="ct-columns">'),firsti=t;document.write("<li>"),document.write('<a href="'+postUrl[t]+'">'+postTitle[t]),1==postRecent[t]&&document.write(" - <strong><span>New!</span></strong>"),document.write("</a></li>"),postLabels[t+=1]==temp1;);if(e=t,document.write("</ul></div>"),sortPosts2(firsti,t),e>postTitle.length)break}}
</script>
<script type="text/javascript" src="/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=bloggersitemap"></script>4 Sebagai langkah tambahan, kamu juga bisa memasukan deskripsi meta dan mematikan kolom komentar untuk halaman tersebut
5 Jika sudah, simpan halaman dan cantumkan di blog kamu.
Bagaimana, cukup mudah kan membuat halaman sitemap untuk Blogger. Tidak hanya membantu pengunjung menavigasi isi blog, kamu pun bisa dengan mudah melihat daftar postingan yang kamu buat untuk merencakanan konten kamu selanjutnya.