Cara Membuat Sitemap Keren Dan Responsive Otomatis Di Blog - tutorialarry

Cara Membuat Sitemap Keren Dan Responsive Otomatis Di Blog - Kali ini saya akan membahas mengenai cara membuat sitemap. sitemap yaitu sama seperti daftar isi yang kegunaannya sangat penting sekali untuk memudahkan pembaca  mencari semua artikel pada sebuah blog. 

Tidak hanya untuk memudahkan pembaca Sitemap juga berguna untuk membuat mesin telusur google merayapi semua artikel pada sebuah blog sehingga artikel bisa dengan mudah teriindex di mesin pencarian google.

Baca Juga : Cara Mudah Mendaftarkan Blog Ke Google Webmaser Tools

Sitemap menurut Wikipedia

Menurut Wikipedia Sitemap adalah salah satu alat bantu untuk para webmaster yang mempermudah dalam pengenalan peta situs di dalam website. Dengan begitu, mesin google dengan mudah menjelajah dan meraih halaman-halaman yang ada di dalamnya. Sama halnya dengan webiste pada umumnya, blog juga memerlukan sitemap agar mesin pencari dengan mudah mendeteksi konten di dalamnya. Dalam sistem sitemap ini pengguna dapat melakukan submit peta web berbasis XML langsung ke Google yang akan membantu Google mengindeks halaman web dengan mudah.

 Syarat Agar Artikel Masuk Ke Site Map

Agar Sitemap bisa membaca artikel kita syaratnya yaitu kita harus memberi label pada setiap artikel jika tidak maka site map tidak akan bisa membaca artikel yang ada di blog .

Cara Membuat Sitemap Di Blog

Nah kalin sudah tahu kan keuntungan dari membuat sitemap, sekarang kita masuk ke pembahasan intinya bagaimana cara membuat sitemap keren dan responsive otomatis.

Pertama -tama masuk ke beranda blogger setelah itu pilih menu laman seperti gambar berikut :

Selanjutnya pilih laman baru .

Di sini anda harus isi judul laman yaitu dengan nama Site map, selanjutnya klik html :

terakhir kalian copy kode di bawah ini selanjutnya pastekan ke kolom html .

<div class="jontor">
<script src="https://cdn.rawgit.com/teknomia/sitemap/2ad476de/sitemap-keren.js"></script>
<script src="/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=teknomia_Load"></script>
</div>
<style type="text/css">.jontor{width:100%;border-collapse:collapse;text-align:left;overflow:hidden;margin:0 auto;}
.jontor a{color:black;}
.jontor p .teknomia_Label{background:#4ECDC4;display:block;padding:12px;}
.jontor ol li{position:relative;display:block;padding:.4em .4em .4em .8em;margin:.5em 0 .5em 2.5em;background:#d9f4f2;color:#666;text-decoration:none;transition:all .3s ease-out;}
user agent stylesheetli{display:list-item;text-align:-webkit-match-parent;}
.jontor ol li:before{content:counter(li);counter-increment:li;position:absolute;left:-2.5em;top:50%;margin-top:-1em;background:#0fa9cd;color:#fff;height:2em;width:2em;line-height:2em;text-align:center;font-weight:bold;}
.jontor ol li:hover:after{left:-.5em;border-left-color:#0fa9cd;}
.jontorol li:hover{box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);transition:all 0.3s cubic-bezier(.25,.8,.25,1);}
.jontor ol li:after{position:absolute;content:'';border:.5em solid transparent;left:-1em;top:50%;margin-top:-.5em;transition:all .3s ease-out;}
ol{counter-reset:li;list-style:none;font:15px 'Arial';padding:0;margin-bottom:4em;text-shadow:0 1px 0 rgba(255,255,255,.5);margin-left:26px;}
.teknomia_Postname li:nth-of-type(odd){background:#f1f3f3;}
.new{color:red!important;font-weight:700;font-style:italic;}
user agent stylesheetol{display:block;list-style-type:decimal;-webkit-margin-before:1em;-webkit-margin-after:1em;-webkit-margin-start:0;-webkit-margin-end:0;-webkit-padding-start:40px;}
</style>

Nah jika sudah maka hasilnya akan seperti gambar berikut ini :

Itulah cara membuat sitemap dengan sangat mudah anda tidak perlu edit -edit lagi tinggal copy kodenya simpan langsung jadilah sitemap keren dan responsive.