Cara Membuat Sitemap Responsive Di Blog

Published by Ari Bagus Hidayat 13 January 2018

Membuat Sitemap Responsive Di Blog - Selamat datang kembali, dalam artikel ini saya akan membagikan cara memasang sitemap di blog. Sitemap merupakan salah satu bagian dari SEO dan salah satu kebijakan pembuatan blog. Fungsi sitemap itu sendiri untuk mempermudah pengunjung mendapat seluruh informasi/artikel dari blog kita. Lalu bagaimana agar sitemap kita bisa terlihat menarik dan responsive? Silahkan ikuti langkah-langkah berikut.

Alasan pembuatan sitemap adalah agar pengunjung dapat melihat seluruh artikel kita secara otomatis dan berdasarkan label-label/kategori masing-masing. Setiap kita memposting artikel yang baru, maka akan secara otomatis masuk ke halaman sitemap itu sendiri tanpa harus mensetting/mengetik ulang.

Sebenarnya memasang sitemap tergolong dalam hal yang mudah, karena kita tidak perlu menguasai/membutuhkan jasa pembuatan sitemap. Berikut langkah-langkah pembuatan sitemap responsive.

Syarat Agar Artikel Masuk Ke Sitemap

Agar artikel kita berada didalam sitemap kita perlu memberi label pada setiap artikel yang hendak kita posting.

Cara Membuat Sitemap Responsive Diblog

Login ke Dashboard Blogger > Klik Halaman > Pilih Laman Baru

Isi judul laman dengan "Sitemap", karena seluruh blog menggunakan judul tersebut namun bisa diisi juga sesuai keinginan kita sendiri

Klik HTML yang berada disebelah tulisan Compose

Pasang kode HTML dibawah ini ke dalam mode HTML pada pembuatan laman

 <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> 

Terakhir klik Publikasikan dan halaman sitemap sobat sudah selesai dibuat
Nah maka nanti hasilnya akan seperti dibawah ini

Itulah bagaimana cara membuat sitemap dengan cara yang sederhana dan tanpa harus mengedit kembali isi sitemap, semoga bermanfaat.