Cara Membuat Sitemap Blogger SEO dan Responsive

Selamat datang kembali bersama saya admin blog kumpulan sitemap keren, kali ini saya akan berbagi desain sitemap ala blog rakinformasi on com. Pada sebelumnya juga saya juga membuat tutorial yang serupa disini dan membuat sitemap mirip IDNTHEME di blog ini juga.

Dan pada kali juga saya akan memberikan tutorial cara memasang sitemap keren, yang akan meningkatkan SEO juga tentu saja responsive. Cara pasang sitemap ini sangat mudah sekali buat platform blogger.

Cara Memasang Sitemap di Blogger

Tanpa panjang dan lebar kali tinggi, berikut ini cara memasang sitemap/daftar isi di blogger.

Pertama, buka blogger.com dan masuk dengan akun masing-masing, selanjutnya di dashboard buka menu Halaman dan buat halaman baru lalu tempel kode di bawah ini.

<div class="jontor">
<script src="https://rawgit.com/rezamuhamad/rakinfo/master/sitemap.js"></script>
<script src="/feeds/posts/default?max-results=5000&amp;alt=json-in-script&amp;callback=rak_info_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 .rak_info_Label{background:#89abbc;color:#fff;text-decoration:none;display:block;padding:5px 0px 5px 10px;font:13px 'Arial';font-weight:bold;}
.jontor ol li{position:relative;display:block;padding:.4em .4em .4em .4em;margin:.5em 0 .5em 2.5em;background:#d9f4f2;color:#fff;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:#89abbc;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:#89abbc;}
.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:12px 'Arial';padding:0;margin-bottom:2em;text-shadow:0 1px 0 rgba(255,255,255,.5);margin-left:26px;}
.rak_info_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>

Selanjutnya save dan pubslih halaman, oh ya jangan lupa kasih nama hamalannya.

Jika berhasil, maka tampilannya akan seperti gambar diatas atau kamu bisa melihat langsung dengan menekan tombol Demonstrasi atau bisa lihat disini.

Itulah cara membuat sitemap blogger yang keren, kamu bisa menerapkannya langsung di blog kesayangan kamu. Kunjungi juga kumpulan tutorial keren disini. Jangan lupa berkomentar bila ada kesusahan.