Tutorial Daftar Isi Responsive pada Blog

Daftar isi atau yang biasa disebut dengan sitemap merupakan salah satu widget yang perlu dimiliki karena memiliki banyak manfaat didalamnya. Dengan adanya widget tersebut pengunjung dapat dengan lebih mudah menjelajah blog atau website, dengan harapan dapat meningkatkan page view pada blog.

Sitemap adalah Informasi yang berisi mengenai URL-URL pada situs, seperti sebuah peta untuk search engine. Bukan hanya URL saja yang ada pada sitemap, tetapi juga berisi metadata. Metadata ini merupakan informasi mengenai kapan terakhir kali situs atau blog tersebut diupdate, seberapa sering situs diupdate, dan kapan situs itu diupdate. Sitemap merupakan cara dari para pemilik website untuk memberitahu mesin pencari termasuk google tentang halaman-halaman yang ada di website mereka. Sitemap sangatlah penting dari sisi SEO (Search Engine Optimization). Pada artikel berikut ini, kami akan membahas beberapa fungsi sitemap yang perlu Anda ketahui.

Daftar isi juga dapat mengurangi tingkat bouncing terhadap blog. Dengan begitu widget sitemap ini dapat menunjang SEO blog kita dan bisa bersaing di pencarian google.

Anda dapat melihat contoh Daftar Isi ditempatkan ada Menu Bar. Daftar isi | Sitemap Responsif berdasarkan Label di Blog.

Cara Membuat Daftar Isi

Buka menu halaman, tambah halaman baru. Halaman dalam blog biasanya digunakan untuk membuat halaman About, biodata, privacy policy, dan daftar isi, ditulisnya di halaman bukan di postingan.

Pilih Tampilan HTML

Copy script di berikut lalu tempelkan ke halaman HTML.

<div id="tabbed-toc">
<span class="loading">Loading sitemap, please wait for a moment...</span></div>
<br />
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "https://GANTI DENGAN ALAMAT ANDA.com",
    containerId: "tabbed-toc",
    activeTab: 1,
    showDates: false,
    showSummaries: false,
    numChars: 200,
    showThumbnails: false,
    thumbSize: 40,
    noThumb: "",
    monthNames: [
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December"
    ],

    newTabLink: true,
    maxResults: 99999,
    preload: 0,
    sortAlphabetically: true,
    showNew: 7,
    newText: " - <em style='color: white;padding: 1px 5px;float:right;background-color: #F00;'>✓ New!</em>"
};

</script>
<script src="https://cdn.rawgit.com/agungjakanugraha/table-of-content/e770b230/toc.js" type="text/javascript"></script>
<style type="text/css">
#tabbed-toc{width:99%;margin:0 auto;overflow:hidden!important;position:relative;color:#222;border:0;border-top:5px solid #1565c0;background-color:#1565c0;-webkit-transition:all .4s ease-in-out}
#tabbed-toc .loading{display:block;padding:5px 15px;font:normal bold 11px Arial,Sans-Serif;color:#FFF}
#tabbed-toc ul,#tabbed-toc ol,#tabbed-toc li{margin:0;padding:0;list-style:none}
#tabbed-toc .toc-tabs{width:24.8%;float:left!important}
#tabbed-toc .toc-tabs li a{display:block;font:normal bold 10px/28px Arial,Sans-Serif;height:28px;overflow:hidden;text-overflow:ellipsis;color:#fff;text-transform:uppercase;text-decoration:none;padding:0 12px;cursor:pointer;-webkit-transition:all .3s ease-in-out}
#tabbed-toc .toc-tabs li a:hover{background-color:#515050;color:#FFF}
#tabbed-toc .toc-tabs li a.active-tab{background-color:#bbb;color:#fff;position:relative;z-index:5;margin:0 -2px 0 0}
#tabbed-toc .toc-content,#tabbed-toc .divider-layer{width:75%;float:right!important;background-color:#F5F5F5;border-left:5px solid #bbb;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all .3s ease-in-out}
#tabbed-toc .divider-layer{float:none;display:block;position:absolute;top:0;right:0;bottom:0}
#tabbed-toc .panel{position:relative;z-index:5;font:normal normal 10px Arial,Sans-Serif}
#tabbed-toc .panel li a{display:block;position:relative;font-weight:700;font-size:11px;color:#222;line-height:2.8em;height:30px;padding:0 10px;text-decoration:none;outline:none;overflow:hidden;-webkit-transition:all .3s ease-in-out}
#tabbed-toc .panel li time{display:block;font-style:italic;font-weight:400;font-size:10px;color:#666;float:right}
#tabbed-toc .panel li .summary{display:block;padding:10px 12px;font-style:italic;border-bottom:4px solid #275827;overflow:hidden}
#tabbed-toc .panel li .summary img.thumbnail{float:left;display:block;margin:0 8px 0 0;padding:4px;width:72px;height:72px;border:1px solid #dcdcdc;background-color:#fafafa}
#tabbed-toc .panel li:nth-child(even){background-color:#DBDBDB;font-size:10px}
#tabbed-toc .panel li a:hover,#tabbed-toc .panel li a:focus,#tabbed-toc .panel li a:hover time,#tabbed-toc .panel li.bold a{background-color:#222;color:#FFF;outline:none;-webkit-transition:all .3s ease-in-out}
#tabbed-toc .panel li.bold a:hover,#tabbed-toc .panel li.bold a:hover time{background-color:#222}

@media (max-width:700px) {
#tabbed-toc{background-color:#fff;border:0 solid #888}
#tabbed-toc .toc-tabs,#tabbed-toc .toc-content{overflow:hidden;width:auto;float:none!important;display:block}
#tabbed-toc .toc-tabs li{display:inline;float:left!important}
#tabbed-toc .toc-tabs li a,#tabbed-toc .toc-tabs li a.active-tab{background-color:#222;color:#ccc}
#tabbed-toc .toc-tabs {background:#222}
#tabbed-toc .toc-tabs li a.active-tab{color:#000}
#tabbed-toc .toc-content{border:none}
#tabbed-toc .divider-layer,#tabbed-toc .panel li time{display:none}
}

</style>