Membuat sitemap sederhana ala kang-cahya di blogger

Sitemap merupakan kumpulan semua judul konten yang disajikan dalam format list atau lainnya, dimana di masing-masing judul itu mempunyai link yang terhubung langsung dengan halaman yang bersangkutan. Sitemap ini berfungsi sebagai peta yang menunjukan segala hal yang ada di website tersebut, seperti ini contohnya : https://www.kang-cahya.com/p/sitemap-page.html

Dalam pembahasan kali ini saya ingin membahas sedikit seputar cara membuat sitemap di blogger, sitemap ala kang-cahya, dimana bentuk sitemapnya nanti akan berupa list yang dikelompokan berdasarkan kategori, seperti yang nampak pada gambar di atas.

INSTALASI SITEMAP

Cara memasang sitemap di blogger sangatlah mudah, caranya :

Pertama, login ke blogger.com, lalu masuk ke menu halaman/page, klik tombol buat halaman baru.

Kedua, pada bagian judul ketikan "sitemap" atau apa bebas namanya terserah kamu. Tapi untuk blog saya sendiri pada bagian judul saya beri nama "Sitemap Page".

Ketiga, pada bagian badan konten, disana terdapat dua opsi untuk mode penulisan kontennya, yaitu compose dan html. Kita pilih opsi html.

Keempat, salin kode dibawah ini ke badan konten

<style>
 #toc {
     width: 100%;
     margin: 5px auto;
     border-left: 1px solid #2AAF63;
 }

 .labl {
     color: #FF5F00;
     font-weight: bold;
     margin: 0 -5px;
     padding: 9px 0 10px 30px;
     background: #2AAF63;
     border: 1px solid #2AAF63;
     display: block;
 }

 .labl a {
     text-decoration: none;
     color: #FFFFFF;
     font-family: 'Roboto', sans-serif;
 }

 .labl {
     text-transform: uppercase;
 }

 .new {
     color: #E91E63;
     font-weight: bold;
     font-style: italic;
     font-family: 'Roboto', sans-serif;
 }

 .postname {
     font-weight: normal;
     background: #FFFFFF;
     margin-left: 35px;
     color: #415A6B;
 }

 .postname li {
     border-bottom: #415A6B 1px dotted;
     margin-right: 5px;
     padding: 7px 0 3px 0;
 }

 .postname li a {
     text-decoration: none;
     font-family: 'Roboto', sans-serif;
     color: #415A6B;
 }
</style>

<div id="toc">
 <script src="https://cdn.rawgit.com/dyazincahya/9ecfa81d87af2bc2e36a6e9566fb67bf/raw/52def2eea6302cf8a43f51ce268bfd78e6ae41e0/k4ng_sitemap.js" type="text/javascript"></script>
 <script src="https://www.kang-cahya.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
</div>

Pada bagian ini <script src="https://www.kang-cahya.com/feeds/posts/default, silahkan ganti URL kang-cahya.com degan URL blog kamu sendiri.

Kelima, jika sintak diatas sudah disalin, kamu bisa langsung simpan lalu publish. Disini ada satu bagian kode lagi, tapi ini sifatnya optional, tidak wajib. Kode ini berfungsi untuk menyembunyikan kolom komentar pada halaman sitemap. Sekali lagi, kode ini bersifat optional. Jika kamu ingin menggunakannya, kamu bisa meletakan kode ini tepat di bawah kode sitemap

<style type="text/css">
 #comments {display:none;}
</style>

Jika semua sudah dilakukan, kamu tinggal lihat hasilnya.

Mungkin tulisan ini saya cukupkan dulu sampai disini, semoga bermanfaat, tschuss...