Cara Membuat Daftar Isi (Sitemap) Otomatis Pada Blog

Cara Membuat Daftar Isi di Blog– Membuat Sitemap atau Daftar Isi di blog sering dilupakan oleh para blogger pemula padahal fungsinya sangat penting bagi blog. Dengan memasang sitemap atau daftar isi di blog akan mempermudah pengunjung mengetahui semua artikel di sediakan oleh sebuah blog. sehingga pengunjung dapat dengan mudah mencari artikel yang mereka butuhkan tanpa harus kesana-kemari membuka tiap-tiap halaman.

Nah bagi anda yang ingin memasang sitemap atau daftar isi di blog anda, silahkan ikuti tutorialnya di bawah ini. sebagai catatan cara di bawah hanya untuk pengguna Blogger.

Baca juga : Cara Memasang Ads Txt di Blogger

Cara Membuat Daftar Isi (Sitemap) Di Blogger

1. Buatlah halaman baru di blog anda. Caranya pada menu Dashboard anda pilih Menu “Halaman” kemudian buatlah halaman baru dengan klik “Halaman Baru”. untuk lebih jelasnya lihat gambar di bawah.

Cara Membuat Daftar Isi (Sitemap) Otomatis Pada Blog

2. Kemudian beri judul halaman dengan nama (Daftar Isi atau Sitemap) pilih salah satu saja.

3. Ubah dari mode compose menjadi mode HTML.

4. Setelah itu masukan Script di bawah ini.

<div dir="ltr" style="text-align: left;" trbidi="on">
<div id="bp_toc" style="max-height: 1000px; overflow-x: auto; overflow: scroll;">
</div>
<script src="https://cdn.rawgit.com/Ridlomuhammad/Ridlowrites/d43f8b70/daftarisi-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>
</div>

Untuk tampilan script daftar isi di atas akan seperti gambar di bawah ini.

daftar isi keren model 1

Atau bisa juga menggunakan script di bawah ini.

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="table-of-content" id="table-of-content">
<span class="loading">Memuat konten...</span></div>
<script>
var toc_config = {
    url: 'https://www.ridlowrites.com/',
    containerId: 'table-of-content',
    showNew: 5,
    newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#f39c12;padding:1px 6px 2px 6px;line-height:normal;float:right;border-radius:3px;text-transform:uppercase;">baru</strong>',
    sortAlphabetically: {
        thePanel: true,
        theList: true
    },
    maxResults: 9999,
    activePanel: 0,
    slideSpeed: {
        down: 400,
        up: 400
    },
    slideEasing: {
        down: null,
        up: null
    },
slideCallback: {
down: function() {},
up: function() {}
},
clickCallback: function() {},
jsonCallback: '_toc',
delayLoading: 0
};
</script><br />
<script src="https://cdn.rawgit.com/Ridlomuhammad/Ridlowrites/32b1be40/sitemap.js"></script><br />
<style scoped="" type="text/css">
a,a:link,a:visited {color:#222;text-decoration:none;transition:all .3s}
a:hover,a:hover:visited {color:#f39c12}
.table-of-content{background-color:#fff;color:#444;font-family:Verdana,Geneva,Tahoma,Arial,Sans-serif;font-size:13px;font-weight:400;overflow:hidden;border-radius:4px;box-shadow:0 0 0 1px #eee;}
.table-of-content .toc-header{color:#444;font-family:inherit;font-weight:400;font-size:16px;background-color:#fff;margin:0;padding:15px;overflow:hidden;cursor:pointer;border-bottom:1px solid #eee;transition:initial;}
.table-of-content .toc-header:hover{background-color:#fdfdfd;}
.table-of-content .toc-header.active{color:#f39c12}
.table-of-content .toc-header.active:before{border-color:#f39c12 transparent transparent;top:16px;-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg)}
.table-of-content .loading{display:block;padding:15px;text-decoration:blink}
.table-of-content ol{margin:0;padding:0;list-style:none;transition:initial}
.table-of-content li{line-height:normal!important;margin:0!important;padding:8px 8px 8px 15px!important;white-space:nowrap;text-align:left;overflow:hidden;background:#fcfcfc!important;transition:initial;border-bottom:1px solid #e9e9e9;border-top:1px solid #fff; ;}
.table-of-content li:first-child(border-top:0}
.table-of-content li:last-child(border-bottom:0}
.post ol li a,.post ol li a:link{color:#444!important;text-decoration:none;font-size:86%;transition:initial}
.post ol li a:visited{color:#999;transition:initial}
.post ol li a:link:hover,.post ol li a:visited:hover{color:#f39c12;text-decoration:underline;transition:initial}
.post ol li:before{display:none}
ol {text-shadow:initial;}
.post a:link {color:#444!important;}
#main-wrapper{padding:0;width:100%;border:1}
</style><br /></div>

Ganti url yang di block dengan dengan url blog anda. Sedangkan untuk script diatas tampilannya akan seperti gambar di bawah ini.

sitemap keren model 2

5. Kemudian tinggal publikasikan dan lihat hasilnya.

Baca juga : Cara menambahkan peta situs di Google webmaster

Itulah cara membuat sitemap atau daftar isi di blog. Dengan memasang daftar isi di blog maka pengunjung blog anda akan lebih mudah untuk mengetahui postingan apa saja yang ada di blog anda. semoga artikel diatas berbisa bermanfaat.

Share This

Leave a Reply