Cara Mudah Memasang Sitemap Responsive di Blogger 2018

Animekume- Pada tutorial kali ini saya akan membahas bagaimana cara membuat sitemap atau yang biasa kita kenal dengan daftar isi. Memasang sitemap merupakan salah satu hal yang sangat penting untuk memudahkan pengunjung untuk menemukan artikel yang ingin dia baca.

Sitemap merupakan sebauh peta situs yang berisikan berbagai macam konfigurasi konten maupun artikel dari suatu web dalam bentuk tautan link dan pembuatan sitemap ini juga untuk mempermudah melakukan crawl yang di lakukan oleh search engine.

Sumber : google.com

Baca Juga

Cara Mudah Membuat Sitemap Di Blogger

Banyak sekali cara untuk membuat sitemap di blogger namun pada artikel kali ini kami membuat sitemap responsive berdasarkan label dan fastloading tentunya untuk tampilannya sendiri juga tidak kalah menarik simple dan mudah di aplikasikan.

1. Silahkan masuk ke Blogger kamu

2. Selanjutnya klik Halaman dan buat halaman baru dengan judul sitemap

3. Setelah itu, masuk ke tab HTML jangan yang Compose karena sitemap ini berupa HTML

4. Jika sudah kamu tinggal masukan script di bawah ini kedalam laman yang kamu buat tadi


<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.rawgit.com/penaindigo/Pena-Indigo-Code/a134f9de/sitemappenaindigo.js" type="text/javascript"></script>
<script src="http://www.animeku.me/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

5. Jika sudah di salin silahkan ganti url http://www.animeku.me dengan url website / blog kamu

6. Sekarang lihat hasilnya harap di perhatikan dengan bena agar bisa di gunakan

DEMO SITEMAP