Cara Membuat Sitemap Blogger Keren dan Responsive

Selamat datang kembali dengan saya di kumpulan sitemap blogger keren dan SEO. Kali ini saya juga akan membuat tutorial daftar isi dengan tampilan tabel. Sebelumnya juga saya membuat sitemap dengan style yang sama disini. Selain itu juga saya membuat tutorial sitemap mirip IDNTHEME yang bisa kamu cari di blog sederhana saya.

Baca Juga : Tutorial Blogger Sampai Menghasilkan

Seperti yang kita tahu, Halaman sitemap ini sangat penting untuk SEO. Bukan hanya memudahkan pengunjung melihat seluruh isi artikel, adanya halaman daftar isi ini adalah syarat wajib untuk daftar Adsense.

Nah pada kesempatan kali ini di tutorial yang saya buat sekarang caranya cukup mudah. Jadi ikuti dengan baik tutorialnya ya.

Membuat Sitemap Keren dan SEO

Seperti biasa, buka dahulu website blogger.com dan login dengan akun sendiri ya. Setelah itu langsung saja buka menu Halaman dan buat halaman baru dan beri nama terlebih dahulu serta setting seperti pada gambar.

Selanjutnya kamu buka di mode HTML dan tempel kode berikut ini.

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHOwFLi2U0jlKACSDG9PQkbKxuFxKbMj-99IGaGaALBBxkNbWzK-fUK2JxFdDWGTdQA_w8qWVuiczc-w27kJPgozzK3Eh0hBoDiHwIeZONqQrMLU8c97IhW7v0Et_FkYi6KFrkg27xr5Dn/s1600/DAFTAR-ISI.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="site map" border="0" height="76" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHOwFLi2U0jlKACSDG9PQkbKxuFxKbMj-99IGaGaALBBxkNbWzK-fUK2JxFdDWGTdQA_w8qWVuiczc-w27kJPgozzK3Eh0hBoDiHwIeZONqQrMLU8c97IhW7v0Et_FkYi6KFrkg27xr5Dn/s400/DAFTAR-ISI.png" title="site map" width="400" /></a></div>
<div id="bp_toc" style="max-height: 1800px; overflow-x: auto; overflow: scroll;">
</div>
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/daftar-isi-simple.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>
<style scoped="" type="text/css">
#comments,#Label1,#FollowByEmail1 {display:none;}
#HTML3 {visibility:hidden;}
/* CSS Full Sitemap */
#bp_toc{background:#31a2db;color:#666;margin:0 auto;padding:4px;}
span.toc-note{padding:20px;margin:0 auto;display:block;text-align:center;color:rgba(255,255,255,.5);font-size:1.6rem;text-transform:uppercase;font-weight:700;line-height:normal}
.toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;}
.toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;}
.toc-header-col3 {padding:10px;background-color:#f5f5f5;width:125px;}
#bp_toc td.toc-header-col1,#bp_toc td.toc-header-col2,#bp_toc td.toc-header-col3{border:0;border-bottom:1px solid rgba(0,0,0,0.1);}
#bp_toc tr:nth-child(1) a {color:#666;}
#bp_toc td.toc-header-col1{background-color:#fff;}
#bp_toc td.toc-header-col2{background-color:#fff;}
#bp_toc td.toc-header-col3{background-color:#fff;}
#bp_toc td.toc-entry-col1,#bp_toc td.toc-entry-col2,#bp_toc td.toc-entry-col3{border:0}
#bp_toc td.toc-entry-col1{background-color:#fff;font-weight:700}
#bp_toc tr:nth-child(odd) td.toc-entry-col1{background-color:#f8f8f8}
#bp_toc td.toc-entry-col2{background-color:#fff;}
#bp_toc tr:nth-child(odd) td.toc-entry-col2{background-color:#f8f8f8}
#bp_toc td.toc-entry-col3{background-color:#fff;}
#bp_toc tr:nth-child(odd) td.toc-entry-col3{background-color:#f8f8f8}
#bp_toc td a{color:#666;}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:13px;
text-decoration:none;color:#aaa;font-family:&#39;Roboto&#39;;font-weight:700;letter-spacing: 0.5px;}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {text-decoration:none;}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%}
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;}
.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#cdb280;}
#bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;}
.toc-entry-col1 {counter-increment:rowNumber;}
#bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;}
</style></div>

Save dan Publikasian Halaman

Untuk demonstrasinya silahkan cek halaman DEMONSTRASI

Itulah cara membuat sitemap keren dan SEO yang bisa kamu terapkan di blog kamu sekarang, bila tutorial ini bermanfaat silahkan berkomentar dibawah ya gan.