Cara buat Sitemap Blog responsive dengan tampilan baru

Bisa Oi- Sitemap atau daftar isi yang ada di sebuah Blog pastinya sangat bermanfaat bagi pembaca. Selain mengetahui artikel yang terdapat pada sebuah blog, pembaca juga akan lebih leluasa dalam mengakses setiap yang ada pada blog tersebut.


Bagi sebuah Blog, sitemap merupakan salah satu hal penting yang harus ada didalamanya. Ada beberapa alasan yaitu ingin agar artikel dapat dibaca secara keseluruhan dan lebih cepat terindeks mesin pencarian seperti, Google, Yahoo, Bing, Yandex, dan lainnya. Dengan begitu kemungkinan besar dapat meningkatkan pengunjung pada setiap blog yang telah dilengkapi sitemap tersebut.

Buat kalian yang masih kebingungan untuk membuat sitemap yang responsive dan cepat keindeks mesin pencarian bisa mengikuti ulasan berikut ini.

Dalam membuat sitemap Blog harus memiliki kriteria responsive agar mesin pencarian dapat mengindeks artikel dengan cepat. Selain itu, tampilan yang rapi dan elegan tentunya sangat menguntungkan blog dimana pengunjung akan lebih nyaman untuk mengakses setiap yang ada didalamnya. Sitemap ini merupakan salah satu update-an dari versi sebelumnya yang dirubah dengan tampilan yang lebih sederhana dan bersih saat di lihatnya.

Cara buat Sitemap Blog responsive dengan tampilan baru

Kalian bisa mencoba dengan mengikuti langkah-langkah untuk membuat sitemap Blog responsive berikut ini.

langkah 1 :  Silahkan masuk ke Dashboard Blogger kalian >> Halaman >> Halaman Baru >> Buat Judul  "Sitemap" atau "Daftar Isi".


Langkah 2 : Pilih menu HTML. Selanjutnya copy Kode HTML dibawah ini dan ikuti intruksinya.

<div class="jontor">
<script src="https://rawgit.com/mastamvan/backup/master/sitemap.js"></script>
  <script src="/feeds/posts/default?max-results=5000&amp;alt=json-in-script&amp;callback=mas_tamvan_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 .mas_tamvan_Label{background:#FFF;display:block;padding:10px;border-radius:5px;box-shadow:0 3px 4px 0 rgba(0,0,0,0.08),0 2px 7px 0 rgba(0,0,0,0.08),0 3px 2px -3px rgba(0,0,0,0.09);margin:3px}
.jontor ol li{position:relative;display:block;padding:.4em .4em .4em .8em;margin:.5em 0 .5em 2.5em;background:#fff;color:#666;text-decoration:none;transition:all .3s ease-out;border-radius:5px;box-shadow:0 3px 4px 0 rgba(0, 0, 0, 0.02),0 0px 0.5px 0 rgba(0,0,0,0.08),0 3px 2px -3px rgba(0,0,0,0.09);margin-right:8px}
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:#039be5;color:#fff;height:2.2em;width:2.2em;line-height:2.2em;text-align:center;font-weight:bold;border-radius:100%}
.jontor ol li:hover:after{left:-.5em;border-left-color:#039be5;}
.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;}
.mas_tamvan_Postname li:nth-of-type(odd){background:#fff;}
.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> .

Keterangan :
Kode ini langsung otomatis akan mengindeks blog kalian tanpa ada memasukkan link didalamnya. Jadi, tinggal copy pastekan saja kode tersebut.

Langkah 3 : Publikasikan halaman sitemap tersebut dan selesai.

Bagaimana cukup mudah bukan membuat sitemap Blog responsive dengan tampilan baru. Cara ini sudah dicoba pada banyak Template Blogger dan semuanya berhasil 100% work. Buat kalian yang masih kesulitan boleh sharing pada kolom komentar atau contact us. Semoga tutorial ini bermanfaat bagi kalian semua, sekian dan terima kasih.