Cara Membuat Daftar Isi atau Sitemap di Blogger

Saat ini banyak blogger yang menggunakan daftar isi/sitemap pada laman statis. Tujuannya agar seluruh artikel yang ada di blog mereka dapat dilihat pengunjung dengan mudah dan berharap pengunjung mengunjungi salah satu artikel yang terdapat di daftar isi. Jadi, menggunakan daftar isi itu penting untuk kemajuan blog Anda.

Cara Membuat Daftar Isi atau Sitemap di Blogger

Sudah banyak tutorial dari blog lain yang membahas cara membuat daftar isi. Kali ini saya juga akan memberikan tutorial serupa. Daftar isi/Sitemap yang saya bagikan ini adalah daftar isi berdasarkan label. Jadi, kalau pengunjung klik pada label-nya akan muncul semua artikel yang sesuai dengan label tersebut dan artikel terbaru akan ditandai dengan tulisan “Baru”.

Daftar isi ini memiliki tampilan yang responsive dan valid HTML. Untuk demo silahkan lihat daftar isi atau sitemap blog Wahyu Pratama melalu link di bawah ini.

Untuk pemasangannya silahkan ikuti langkah-langkah di bawah ini.

Cara Membuat Daftar Isi atau Sitemap di Blogger

1. Masuk ke Blogger > Laman > Laman baru

Cara Membuat Daftar Isi atau Sitemap di Blogger

2. Pada page editor, beri judul “Daftar Isi” atau “Sitemap”. Kemudian pilih mode HTML.

Cara Membuat Daftar Isi atau Sitemap di Blogger

3. Salin kode di bawah ini lalu letakkan pada kolom laman tersebut.

<div dir="ltr" style="text-align: left;">
<style scoped="scoped" type="text/css">
.table-of-content{background-color:#fff;color:#444;font-family:Verdana,Geneva,Tahoma,Arial,Sans-serif;font-size:13px;font-weight:400;overflow:hidden;box-shadow:0 0 0 1px #eee;}
.table-of-content .toc-header{position:relative;color:#444;font-family:inherit;font-weight:400;font-size:14px;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:before{content:'';width:0;height:0;position:absolute;top:22px;right:15px;border:5px solid transparent;border-color:#aaa transparent transparent;transition:all .3s ease}
.table-of-content .toc-header.active{color:#fc4f3f}
.table-of-content .toc-header.active:before{border-color:#fc4f3f 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:#fc4f3f;text-decoration:underline;transition:initial}
.post ol li:before{display:none}
ol {text-shadow:initial;}
.post a:link {color:#444!important;}
</style>
<div class="table-of-content" id="table-of-content"><span class="loading">Memuat konten...</span></div><script>
var toc_config = {
url: 'http://www.wahyupratama.com/',
containerId: 'table-of-content',
showNew: 10,
newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#fc7569;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="//googledrive.com/host/0B8a75E285BMHV3VMNHlrRTF3YzA"></script>
</div>

Catatan : Ganti http://wahyupratama.com/ dengan url blog Anda.

4. Klik Publikasikan dan lihat hasilnya.

Sekian tutorial cara membuat daftar isi atau sitemap di blogger. Semoga Anda berhasil menerapkannya. Jika ada masalah, silahkan berkomentar ya. Terima kasih.

Leave a Reply