3 Cara Mudah Membuat Halaman Sitemap Daftar Isi Sederhana Blog

3 Cara Mudah Membuat Halaman Sitemap Daftar Isi Sederhana Blog

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.

1. Yuk di simak tutorial cara membuat halaman sitemap di blog:

Cara mudah membuat halaman sitemap atau daftar isi sederhana di blog
Ilustrasi sitemap sederhana by ardilas.com

  1. Buka blogger dan masuk ke dashboard blogger sobat
  2. Pilih menu Laman lalu buat Laman baru dengan memilih tombol Laman baru
  3. Beri judul Sitemap atau Daftar Isi atau apapun terserah sobat
  4. Pilih mode HTML
  5. Masukkan kode di bawah ini
<script src="https://cdn.rawgit.com/D-dig/js/gh-pages/sitemap1.js"></script>
<script src="http://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="http://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, hanya 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

Related Posts

Tidak ada komentar untuk "3 Cara Mudah Membuat Halaman Sitemap Daftar Isi Sederhana Blog"