Tutorial Membuat Tampilan Menarik Sitemap pada Website/Blog dengan kode HTML 2021 terbaru.

Membuat sitemap (peta situs) pada suatu website atau blog itu sangatlah memudahkan dan membantu para pembaca. Adanya sitemap, pembaca bisa mengetahui daftar keseluruhan postingan di blog tersebut. Bisa dibilang seperti index untuk blog kita. Sitemap biasanya diurutkan berdasarkan timeline postingan atau berdasarkan kategori/label postingan. Pada kesempatan kali ini saya akan berbagi kode html sitemap yang berdasarkan label postingan untuk blogger.

Berikut langkah-langkahnya.

1. Masuk ke dashbor blogger

2. Pilih menu Halaman > Halaman Baru

3. Kolom Judul, isi saja "Sitemap", lalu pastikan mode 'Tampilan HTML'.

4. Copy kode di bawah ini, lalu paste kan di body halaman.

<style type="text/css">
#toc{width:99%;margin:5px auto;border:1px solid #df772d;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);}
.labl{color:#FF5F00;font-weight:bold;margin:0 -5px;
padding:1px 0 2px 11px;background: #08484f;
border:1px solid #2D96DF;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;}
.labl a{color:#fff;}
.labl:first-letter{text-transform:uppercase;}
.new{color:#FF5F00;font-weight:bold;font-style:italic;}
.postname{font-weight:normal;background:#fff;margin-left: 35px;}
.postname li{border-bottom: #ddd 1px dotted;margin-right:5px}
</style>

<br />
<div id="toc">
<script src="https://cdn.jsdelivr.net/gh/penaindigo/Pena-Indigo-Code@a134f9def601a6f77332eccc35d3d20e0d3c7e49/sitemappenaindigo.js" type="text/javascript"></script>
<script src="/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

5. Publikasikan

Tampilan sitemapnya akan seperti di bawah ini.