Cara Membuat Sitemap Otomatis di Blog

Dengan menghadirkan sitemap atau daftar isi pada blog dapat membantu pengunjung untuk mencari artikel lainnya dalam blog.

Sebenarnya Blogger sudah menyediakan sitemap default, namun sitemap tersebut tidak memiliki desain, jadi terlihat biasa saja dan tidak menarik. Dengan membuat sitemap blog yang memiliki desain, akan lebih menarik perhatian pengunjung. sebelumya saya akan memberitahu apa itu sitemap?

Apa Itu Sitemap?

Sitemap adalah salah satu alat bantu untuk para webmaster yang mempermudah dalam pengenalan peta situs di dalam situs web.

Sama halnya dengan situs Web pada umumnya, Blog juga memerlukan sitemap agar mesin Google dengan mudah menjelajah dan meraih halaman-halaman yang ada di dalamnya.

Baiklah sekarang kita langsung saja menuju ke tutorialnya..

Cara Membuat Sitemap Pada Blog

Perlu diketahui, Sitemap ini merupakan sitemap otomatis, jadi Sitemap ini akan update otomatis jika blog memiliki artikel atau postingan baru, Tanda New!!! sebagai tanda yang berarti artikel terbaru. Berikut langkah-langkah untuk membuat sitemap pada blog.

• pertama-tama, login ke dashboard Blogger
• Buatlah halaman baru, lalu beri judul Sitemap atau Daftar Isi (terserah kalian)
• Copy kode HTML

  <style type="text/css">
  #toc{width:99%;margin:5px auto;border:1px solid #2D96DF;
  -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: #3498DB;
  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>
  <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>

• Kemudian, tempelkan kode tersebut pada halaman baru (pastikan halaman dalam mode HTML)
• Publikasikan dan selesai..

Sampai disini kamu sudah berhasil membuat sitemap pada blog. Untuk Resultnya kalian bisa lihat diblog ini atau pencet Link Ini

Jika ada kendala, kalian boleh tanya lewat kolom komentar. Mohon maaf bila ada kesalahan dalam penulisan. Semoga bermanfaat.