Cara Membuat Sitemap di Blogspot (Blogger)

"Cara Membuat Halaman Sitemap Sederhana di Blog, cara tutorial dan script halaman sitemap sederhana yang berasal dari blog ardilas."

YZG 14 May 0

Cara Membuat Halaman Sitemap Sederhana di Blog, halaman sitemap atau halaman daftar isi merupakan salah satu halaman yang wajib ada pada sebuah blog, memiliki fungsi untuk dapat memudahkan pengunjung dalam melihat seluruh daftar isi postingan yang terdapat di blog kita.

Cara Mudah Membuat Halaman Sitemap atau Daftar Isi Sederhana di Blog

Banyak cara tutorial dan script-script untuk membuat halaman sitemap pada blog namun setelah catatandroid coba tidak semua dapat work atau mungkin kodenya sudah tidak berlaku lagi.

Berikut ini catatandroid bagikan ulang kode script halaman sitemap sederhana yang berasal dari blog ardilas.

Tutorial cara membuat halaman sitemap di blog

1. Pasang Kode Sitemap

Ilustrasi sitemap sederhana by ardilas.com

Buka blogger dan masuk ke dashboard blogger sobat
Pilih menu Laman lalu buat Laman baru dengan memilih tombol Laman baru
Beri judul Sitemap atau Daftar Isi atau apapun terserah sobat
Pilih mode HTML
Masukkan kode di bawah ini

<script src="https://cdn.rawgit.com/D-dig/js/gh-pages/sitemap1.js"></script>
<script src="https://teksliriksholawat.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Ganti teksliriksholawat.blogspot.com dengan alamat blog sobat

Kemudian publikasikan dan silahkan di lihat (view)

2. Kode Sitemap / Daftar Isi Blog dengan Scroll

<div style="background-color: #dde1e3; border: 1px solid #999999; height: 100px; overflow: auto; padding: 10px; width: 100%px;">
<script src="https://cdn.rawgit.com/D-dig/js/gh-pages/sitemap1.js"></script>
<script src="https://ardilas.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
</div>

Ilustrasi sitemap dengan scroll by ardilas.com

3. *Bonus Cara Membuat Sitemap Daftar isi seperti CatatanDroid

Kali ini catatandroid akan memberikan juga kode html dan javascript halaman sitemap yang kita pakai, catatandroid mendapatkan kode sitemap sederhana ini dari blog Arlinadzgn.

Masuk ke Akun blogger sobat
Buka Pages > New page
Ubah text editor ke mode HTML
Masukan/copas kode di bawah ini

<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:#f4f5f6;color:#666;margin:0 auto;padding:4px;} span.toc-note{padding:20px;margin:0 auto;display:block;text-align:center;color:#7f8c8d;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:12px; text-decoration:none;color:#aaa;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>

Publish dan lihat hasilnya

Keterangan:
max-height: 1800px ubah ketinggian sesuai keinginan sobat

Bagaimana sobat cukup mudah bukan, cukup dengan copas sedikit kode script diatas maka kita telah berhasil membuat halaman sitemap sederhana ala blog ardilas, terima kasih pada blog ardilas yang telah membuatkan kode dan tutorial sederhana ini.

Demikian tips dan tutorial blog Cara Mudah Membuat Halaman Sitemap atau Daftar Isi Sederhana di Blog, semoga dapat bermanfaat bagi sobat catatandroid yang sedang mencari tutorial blog cara membuat sitemap untuk keperluan navigasi blognya. Jangan lupa komen dan share ya! Thanks. CatatanDroid