Cara Memasang Sitemap Keren dan Responsive di Blogspot

- Oktober 20, 2019
Cara Memasang Sitemap di Blogspot - Sitemap adalah salah satu alat bantu untuk para webmaster yang mempermudah dalam pengenalan peta situs di dalam website. Dengan begitu, mesin google dapat dengan mudah menjelajah dan meraih halaman-halaman yang ada di dalamnya. Selain itu, sitemap juga bisa disebut sebagai Daftar Isi dari sebuah blog yang berguna untuk mempermudah robot mesin pencari merayapi isi konten di dalam website atau blog, selain mempermudah robot mesin pencari, sitemap juga bisa mempermudah visitor / pengunjung blog mencari setiap konten yang dibutuhkan.
Cara Memasang Sitemap Keren dan Responsive di Blogspot

Tutorial Cara Memasang Sitemap Responsive di Blog

Setelah tahu apa itu sitemap, sekarang kita lanjut ke tutorial cara memasang sitemap keren dan responsive di blogspot. Kita akan memasang sitemap pada halaman statis, caranya silahkan kamu ikuti langkah-langkah yang akan saya jelaskan di bawah ini.

Silahkan login ke dasbor blogger.
1. Klik menu Halaman.
2. Klik Halaman Baru.
3. Beralih dari mode Compose ke mode HTML.

Kemudian copy paste script berikut.
<style type="text/css">
#toc{width:99%;margin:5px auto;border:1px solid #272727;
-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: #272727;
border:1px solid #0F0F1A;
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;margin-left:10px}
</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>
Kalau sudah selesai klik tombol Publikasikan. Untuk melihat hasilnya kamu bisa klik pada menu sitemap blog ini atau silahkan klik disini.

Kurang lebih hasilnya seperti ini.
Cara Memasang Sitemap Keren dan Responsive di Blogspot
Nah begitulah hasilnya, sitemap ini memiliki tampilan yang keren serta responsive, dan yang lebih istimewanya lagi terdapat label New jika ada artikel yang baru dipublikasikan seperti terlihat pada screenshoot di atas.

Demikian langkah-langkah membuat sitemap di blogspot. Semoga bermanfaat dan terimakasih.


Advertisement
 

Start typing and press Enter to search