Membuat Daftar isi Otomatis Berdasarkan Label - Deny Listianto

January 17, 2018

Membuat Daftar isi Otomatis Berdasarkan Label

Untuk memudahkan para pengunjung blog kita, yang kebingungan mencari artikel yang mereka butuhkan namun lupa judulnya ataupun bingung mau mulai darimana.

Inilah suatu cara membantu para pengunjung blog yang kebingungan itu dengan cara membuat halaman Daftar Isi atau Sitemap artikel blog kita.

Sitemap

Daftar isi atau sering di sebut sitemap ini, bisa membantu para pengunjung blog kita yang mecari artikel yang mereka butuhkan

Sitemap juga bisa di fungsikan untuk menginformasikan kepada search engine ( Google misalnya ) tentang halaman-halaman pada situs kita yang bisa di crawl.

Bentuk paling sederhana Sitemap adalah berupa file .xml yang berisi daftar url sebuah situs beserta metadata-nya masing-masing. Metadata misalnya : kapan terakhir di-update.

Biasanya file sitemap.xml ini sudah otomatis ada dan bisa sobat lihat melalui URL ini:

http://URLDOMAINMU.com/sitemap.xml

Penampakan file sitemap.xml tersebut kurang lebih seperti ini:

Tampilan Sitemap

Sitemap bisa kita buat di halaman statis blog kita dengan cara berikut ini.

Widget yang saya bagikan ini merupakan hasil modifikasi dari widget yang dibuat oleh Arlina Design di blognya www.arlinadzgn.com.

Ok, Langsung saja berikut caranya :

Membuat Daftar isi Otomatis Berdasarkan Label


1. Buka Dasbor Blogger.
2. Buka Menu Halaman lalu buat Halaman Baru. 
3. Pindah ke HTML Lalu masukkan kode berikut:

<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 10px rgba(0,0,0,.2)}
.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 #ccc;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:#4e6cef}
.table-of-content .toc-header.active:before{border-color:#666 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:#444359!important;transition:initial}
.table-of-content a{color:#d9d9d9;text-decoration:none;font-size:86%;transition:initial}
.table-of-content a:visited{color:#a2a2a9;transition:initial}
.table-of-content a:hover,.table-of-content a:visited:hover{color:#4e6cef;text-decoration:none;transition:initial}
.post ol li:before{display:none}
</style>

<div class="table-of-content" id="table-of-content">
<span class="loading">Memuat konten...</span></div>
<script>
var toc_config = {
    url: 'https://www.denylistianto.com/',
    containerId: 'table-of-content',
    showNew: 15,
    newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#5c5a78;padding:1px 6px 3px 6px;line-height:normal;float:right;border-radius:3px;">baru</strong>',
    sortAlphabetically: {
        thePanel: true,
        theList: true
    },
    maxResults: 9999,
    activePanel: 1,
    slideSpeed: {
        down: 400,
        up: 400
    },
    slideEasing: {
        down: null,
        up: null
    },
    slideCallback: {
        down: function() {},
        up: function() {}
    },
    clickCallback: function() {},
    jsonCallback: '_toc',
    delayLoading: 0
};
</script>
<script src="https://rawgit.com/Deny-Listianto/tips/master/Sitemap1.js"></script>
</div>

Ganti Kode url: 'https://www.denylistianto.com/' dengan url blog sobat, dan showNew: 15 adalah jumlah artikel yang akan di tampilkan dengan tulisan Baru/New

Terakhir Publikasikan dan lihat hasilnya.


Demikian tutorial Membuat Daftar isi Otomatis Berdasarkan Label, semoga bermanfaat, semoga bermanfaat.
Disqus Codes
  • To write a bold letter please use <strong></strong> or <b></b>
  • To write a italic letter please use <em></em> or <i></i>
  • To write a underline letter please use <u></u>
  • To write a strikethrought letter please use <strike></strike>
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>
    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Notifications

Disqus Logo