Cara Membuat Sitemap Model Tabel Responsive

Fungsi sitemap di website / blog adalah untuk memudahkan pengunjug mencari artikel post atau konten di blog.

Sitemap ini seperti daftar isi setiap post yang dipublikasikan.

Banyak sekali model sitemap yang dibagikan, tapi rata-rata semuanya gak berfungsi karena script yang dihosting sudah dihapus. Ada juga yang bergungsi tapi gak responsif, malah jadi berantakan.

Nah, dari semua yang saya dapet, ada satu yang keren. Kenapa saya bilang keren? Karena kodenya "bersih" tanpa ada kode penyusup (link credit gitu...). Dan untuk berjaga-jaga, file javascript-nya saya host sendiri supaya nanti kalau sitemap-nya gak muncul bakal di host ditempat lain. Hubungi saya kalau ada masalah itu. Tapi kalau mau, bisa host sendiri atau extract file javascript-nya dan embed di halaman yang diinginkan. Caranya buka alamat http://yourjavascript.com/84618120632/articfsitemap.js, Copy semua kode yang ditampilkan, kemudian Paste pada Notepad dan simpan dengan ekstensi .js, contoh sitemap.js
dan upload ke layanan host script kepercayaan kamu.

Langsung saja. Atau lihat dulu demonya

1. Copy kode dibawah ini, pastikan kode ditempatkan pada tab HTML Editor

Copy this code:

<div id="bp_toc">
Please wait....</div>
<script src="http://yourjavascript.com/84618120632/articfsitemap.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:#ffaaa4;color:#666;margin:0 auto;padding:5px;}
span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#ffcfcc;font-weight:700;text-transform:uppercase;font-size:30px;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;}
.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;}
td.toc-entry-col2 {background:#fafafa;}
#bp_toc a{text-align:left;float:none;font-size:90%;padding:0}
</style>

2. Ganti link javascript (warna biru) dengan link kamu (gak usah diganti kalau gak mau host sendiri).

3. Paste kode tadi pada HTML Editor, lalu Simpan dan lihat hasilnya.

Feed akan otomatis terindeks tanpa harus memasukkan alamat blog kamu. Jika ada masalah jangan malu-malu untuk komen ya!

Kalau kamu ingin warna background luarnya sama dengan warna background halaman di blog supaya matching, ubah saja kode warna #ffaaa4 dengan kode warna yang kamu sukai. Untuk mengetahui kode warna, kunjungi htmlcolorcodes.com.

_________
featured image source: keaheylawoffice.com
*link sumber script gak saya cantumkan, soalnya saya rangkum dari berbagai sumber