Membuat Sitemap atau Daftar isi With Icon di Blogger

Membuat Sitemap atau Daftar isi pada blog merupakan salah satu trik yang jitu untuk membuat para pengunjung mudah menemukan apa yang mereka cari, hal ini akan meningkankan kualitas blog anda dan tampil lebih profesional ibaratkan seperti sebuah buku yang memiliki daftar isi yang lengkap dan pastinya lebih mudah menemukan apa yang kita cari di dalam buku tersebut.

Baca juga : Cara Mudah membuat Daftar Isi Pada Blogger.

Mungkin ada ribuan tutorial tentang bagaimana cara membuat sebuah daftar isi pada blog, namun saya akan menyampaikannya kembali dengan Script yang lebih baru dan tentunya masih dapat digunakan karna saya sendiri perna mencari artikel seperti ini pada google namun yang saya temukan hanya script yang telah mati atau sudah tidak dapat digunakan lagi.

Untuk tampilannya, Anda dapat melihatnya di http://www.contohblogger.com/p/daftar-isi.html  dan bagaimana cara membuatnya? simak tutorial dibawah ini.

1. Buka Blogger dan pilih blog yang ingin di buat daftar isi.

2. Klik Page / Halaman.

3. Create New Page / Buat Halaman Baru.

4. Klik HTML

5. Copy dan Pastekan code HTML di bawah ini pada Kolom HTML halaman baru.

<div dir="ltr" style="text-align: left;" trbidi="on">
<style 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;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: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><br />
<style>
#sidebar-wrapper {display:none;} 
#post-wrapper {width:100%;max-width:100%;} 
.post-inner {padding:0;} h3.post-title a, h2.post-title a, h1.post-title a, h2.post-title, h1.post-title {font-weight:700; font-size:2rem;color:#999;} 
.post-body p,.post-body code {font-size:1.3rem;font-weight:700;} 
.post-body td a {background:initial;color:#444;padding:0;font-size:100%;float:initial;display:initial;border-radius:0;font-weight:700;} 
.post-body td a:hover {background:initial;color:red;} small{width:100%;display:block;text-align:center;font:14px helvetica,Arial}.searchblog{position:relative;width:34px;margin:50px auto}.searchblog .body{position:relative;z-index:3;width:34px;height:64px;display:block;background:#4b96e9;border-radius:0 0 40px}.searchblog .body::after,.searchblog .body::before{position:absolute;display:block;background:#4b96e9;border-radius:0 0 10px 10px;content:""}.searchblog .body::after{top:12px;left:-7px;width:14px;height:9px}.searchblog .body::before{top:0;left:-10px;width:25px;height:12px}.searchblog 
.eye{position:absolute;top:10px;left:11px;z-index:5;width:12px;height:12px;display:block;background:#fff;border-radius:50%}
.searchblog .beak{position:absolute;top:0;left:8px;z-index:2;width:48px;height:23px;display:block;background:#f3af2d;border-radius:50px 50px 0 0}.searchblog .beak::after{position:absolute;top:23px;left:12px;width:24px;height:11px;display:block;background:#f38928;border-radius:0 0 25px 25px;content:""}.searchblog 
.wing{position:absolute;top:30px;left:-25px;z-index:5;width:50px;height:26px;display:block;background:#61c8ea;border-radius:0 0 50px 50px}.searchblog .tail{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);position:absolute;top:46px;left:-18px;z-index:3;border:18px solid transparent;border-bottom:18px solid #4b96e9;border-radius:50%} .post-body table td, .post-body table caption {border:none;padding:0;text-align:left;vertical-align:middle;} .gsc-control-cse .gsc-table-result {padding:10px;margin:0;display:block;} .cse .gs-webResult .gs-snippet, .gs-webResult .gs-snippet, .gs-fileFormatType, .gs-imageResult .gs-snippet {color:#666;padding:10px 0;} .cse .gs-result .gs-snippet, .gs-result .gs-snippet, .cse .gs-spelling-original, .gs-spelling-original {font-size:13px;line-height:normal;} .gsc-control-cse .gs-spelling, .gsc-control-cse .gs-result .gs-title, .gsc-control-cse .gs-result .gs-title * {font-size:15px;text-decoration:none;font-weight:700;color:#444;} .gs-result img.gs-image, .gs-result img.gs-promotion-image {vertical-align:middle;border:none; margin-bottom:0;} .gs-webResult div.gs-visibleUrl-long, .gs-promotion div.gs-visibleUrl-long {display:block;font-size:10px;} .post-body td:hover{background:#fff;} .cse .gsc-cursor-box, .gsc-cursor-box {border-top:1px dotted;border-color:#ddd;} .cse .gsc-results .gsc-cursor-page.gsc-cursor-current-page, .gsc-results .gsc-cursor-page.gsc-cursor-current-page {color:#fff;background-color:#333;text-shadow:none;padding:3px 7px;} .gsc-results .gsc-cursor-box .gsc-cursor-page {cursor:pointer;background:#f6f6f6;color:#666;text-decoration:none;padding:3px 7px;} .gsc-selected-option-container {font-size:inherit;}</style><br />
<br />
<div class="table-of-content" id="table-of-content">
<span class="loading">Memuat konten...</span></div>
<script>var toc_config = {     url: 'http://www.URL-ANDA.com/',     containerId: 'table-of-content',     showNew: 5,     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="https://cdn.rawgit.com/Arlina-Design/redvision/master/daftar-isi-tea.js"></script><br /></div>

6. Ubah  http://www.URL-ANDA.com/dengan alamat blog anda.

7. Klik Publikasikan dan selesai. 


Selamat mencoba.