cara membuat daftar isi blog

Tutorial cara membuat daftar isi blog sebenarnya sudah pernah dibagikan sebelumnya pada artikel "cara membuat sitemap (daftar is) blog". Namun untuk tutorial membuat daftar isi kali ini sedikit berbeda. Perbedaannya terletak dari segi tampilannya yang lebih bagus dan tertata rapi. Pokoknya indah dipandang mata.

Keuntungan membuat widget sitemap di blog adalah untuk memudahkan para pembaca dalam mencari dan menemukan artikel blog. Jadi, bagi blogger yang belum memasang ataupun membuat sitemap blog, mari untuk segera menerapkan agar blog anda terlihat lebih profesional.

Jadi, langsung saja sahabat OB, silahkan ikuti beberapa langkah penerapan sitemap berikut ini :

1. Buka Blogger
2. Pilih Laman > Buat Laman baru
3. Salin dan pastekan kode berikut ini pada tab HTML

<div dir="ltr" style="text-align:left;" trbidi="on">
<style scoped="" type="text/css">
.table-of-content{background-color:#222;color:#ddd;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,.1)}
.table-of-content .toc-header{color:#fff;font-family:inherit;font-weight:400;font-size:14px;background-color:#333;margin:0;padding:15px;overflow:hidden;cursor:pointer;border-top:1px solid #444;border-bottom:1px solid #222;transition:initial}
.table-of-content .toc-header:hover{background-color:#3a3a3a}
.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{background:#3a3a3a;color:#fff}
.table-of-content .toc-header.active:before{border-color:#fff 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:#222!important;transition:initial}
.table-of-content a{color:#aaa;text-decoration:none;font-size:86%;transition:initial}
.table-of-content a:visited{color:#666;transition:initial}
.table-of-content a:hover,.table-of-content a:visited:hover{color:#fff;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: 'http://www.ombaron.com/',
    containerId: 'table-of-content',
    showNew: 15,
    newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#009fef;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://cdn.rawgit.com/Arlina-Design/redvision/master/daftar-isi-tea.js"></script>
</div>

Ganti url yang berwarna biru dengan url blog anda, lalu simpan dan kemudian pubikasikan. Sangat mudah buka ? Selamat mencobat.

kalau ingin ada navigasi halaman coba yang dibawah ini

{

"@context": "http://schema.org",

"@type": "BlogPosting",

"mainEntityOfPage": {

"@type": "WebPage",

"@id": "https://www.gurusumedang.com/p/daftar-isi.html"

"headline": "Sitemap ",

"description": "Urutkan artikel berdasarkan: Artikel terbaru Artikel yang terakhir di update Filter artikel berdasarkan kategori: Loading.... Cari artikel dengan kata kun…",

"datePublished": "2020-09-21T00:44:00+07:00",

"dateModified": "2022-04-04T06:40:43+07:00",

"image": {

"@type": "ImageObject",

"url": "https://blogger.googleusercontent.com/img/proxy/AVvXsEhMIzjCwc42yU0Xqiq-XykIa7OajHEB0xite2TmVp2C8KZ8LxvW9bvt1IkIdRNGl-DrXnUWat2cdyEi3r0IA7wwNkAu-uNCa2R3RTekdXmBM-KLipw=w1200-h630-p-k-no-nu",

"height": 630,

"width": 1200

"publisher": {

"@type": "Organization",

"name": "Blogger",

"logo": {

"@type": "ImageObject",

"url": "https://lh3.googleusercontent.com/ULB6iBuCeTVvSjjjU1A-O8e9ZpVba6uvyhtiWRti_rBAs9yMYOFBujxriJRZ-A=h60",

"width": 206,

"height": 60

}

"author": {

"url": "https://www.gurusumedang.com/",

"@type": "Person",

"name": "ADH"

}

// postMeta Custom By Sugeng.id

</script>

<div>

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl2BfNaVG-uRHu1sadHyCYiiJ2_nb1oJJEV-46Eb5s09rnEmAOoD1NZXow8bgZrJqmgCykKrGPykpCbo59ydmfxVa-BuNU-gVVTkyH0r0F36XbZ5N2V9KNoxWa45PYcfEsKq1OlOO70PLaFrLpFzX_6FWxqk6qNGocXWDy_x38jl7qYrRkBmdctIsU8h-j/s235/ffb9b268bb4866573dcf5aa24578e1eb.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="234" data-original-width="235" height="234" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl2BfNaVG-uRHu1sadHyCYiiJ2_nb1oJJEV-46Eb5s09rnEmAOoD1NZXow8bgZrJqmgCykKrGPykpCbo59ydmfxVa-BuNU-gVVTkyH0r0F36XbZ5N2V9KNoxWa45PYcfEsKq1OlOO70PLaFrLpFzX_6FWxqk6qNGocXWDy_x38jl7qYrRkBmdctIsU8h-j/s1600/ffb9b268bb4866573dcf5aa24578e1eb.jpg" width="235" /></a></div><div class="separator" style="clear: both; text-align: center;">Gak Usah Pusing, </div><div class="separator" style="clear: both; text-align: center;">Di blog ini tersedia banyak file.</div><div class="separator" style="clear: both; text-align: center;">Silahkan donlot saja, gratis</div><br /><h1 class="post-title entry-title"><br /></h1><h1 class="post-title entry-title">

Sitemap

</h1>

<label>Urutkan artikel berdasarkan:</label>

</td> <td> <select id="feed-order">

<option selected="" value="published">Artikel terbaru</option>

<option value="updated">Artikel yang terakhir di update</option>

</select> </td> </tr> <tr> <td>

<label>Filter artikel berdasarkan kategori:</label>

</td> <td> <select disabled="" id="label-sorter">

<option selected="">Loading....</option>

</select> </td> </tr> <tr> <td>

<label>Cari artikel dengan kata kunci:</label>

</td> <td> <form id="post-searcher">

</form> </td> </tr> </tbody> </table> </div>

</div> <script type="text/javascript">

var head = document.head || document.getElementsByTagName('head')[0];

var style = document.createElement('style');

style.type = 'text/css';

style.appendChild(document.createTextNode(css));

head.appendChild(style); </script> <script type="text/javaScript"> document.write; var loadToc, loadCategories, _toc = { init: function() { var cfg = {

homePage: window.location.origin, maxResults: 10, numChars: 270, thumbWidth: 140, thumbHeight: 95, navText: "Tampilkan artikel selanjutnya ▼",

resetToc: "Kembali ke Awal", noImage: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh29aYxuQmZqdk60nqEcYi6j9vVaK5cAEKxT_pQGePerj_tADdcg-kfEpPQlrspw94ZSqzOQM671-FbJs17RTHw-dCxv616wOySvBcg7dJbAlT4u0kh7S0RrKTsaV7FjFEOyE3T1HGrT7DI/s1100/no-thumbnail.png", loading: "<span>Memuat...</span>", counting: "<div>Memuat artikel...</div>", searching: "<span>Mencari...</span>" },

w = window, d = document, el = function(id) { return d.getElementById(id); }, o = { a: el('feed-order'), b: el('label-sorter').parentNode, c: el('post-searcher'), d: el('feed-q'), e: el('result-desc'), f: el('daftar-isi-blog'), g: el('feed-nav'), h: d.getElementsByTagName('head')[0], i: 0, j: null, k: 'published', l: 0, m: "" }, fn = { a: function() { old = el('temporer-script'); old.parentNode.removeChild(old); },

b: function(param) { var script = d.createElement('script');

script.type = "text/javascript";

script.id = "temporer-script";

script.src = param;

if (el('temporer-script')) fn.a(); o.h.appendChild(script); },

c: function(mode, tag, order) { o.i++; o.e.innerHTML = cfg.counting; o.g.innerHTML = cfg[mode == 1 ? "searching" : "loading"]; if (mode === 0) {

fn.b(tag !== null ? cfg.homePage + '/feeds/posts/summary/-/' + tag + '?alt=json-in-script&start-index=' + ((o.i * cfg.maxResults) + 1) + '&max-results=' + cfg.maxResults + '&orderby=' + order + '&callback=loadToc' : cfg.homePage + '/feeds/posts/summary?alt=json-in-script&start-index=' + ((o.i * cfg.maxResults) + 1) + '&max-results=' + cfg.maxResults + '&orderby=' + order + '&callback=loadToc');

} else if (mode == 1) {

fn.b(cfg.homePage + '/feeds/posts/summary?alt=json-in-script&start-index=' + ((o.i * cfg.maxResults) + 1) + '&max-results=' + cfg.maxResults + '&q=' + tag + '&orderby=' + order + '&callback=loadToc'); } o.j = (tag !== null) ? tag : null; o.l = mode; o.a.disabled = true; o.b.children[0].disabled = true; }, d: function(json) { var _h; o.g.innerHTML = "";

o.e.innerHTML = o.l == 1 ? '<span>Hasil penelusuran untuk kata kunci <b>“' + o.m + '”</b> (' + json.feed.openSearch$totalResults.$t + ' Hasil)</span>' : '<div>Total: ' + json.feed.openSearch$totalResults.$t + ' Artikel</div>';

if ("entry" in json.feed) { var a = json.feed.entry, b, c, _d, e = "0 Komentar", f = "", g;

for (var i = 0; i < cfg.maxResults; i++) {

if (i == a.length) break; b = a[i].title.$t; _d = ("summary" in a[i]) ? a[i].summary.$t.replace(/<br ?\/?>/ig, " ").replace(/<(.*?)>/g, "").replace(/<iframe/ig, "").substring(0, cfg.numChars) : ""; g = ("media$thumbnail" in a[i]) ? a[i].media$thumbnail.url.replace(/.*?:\/\//g, "//").replace(/\/s[0 9]+\-c/, "\/s" + cfg.thumbWidth + "") : cfg.noImage.replace(/\/s[0-9]+\-c/, "\/s" + cfg.thumbWidth + ""); for (var j = 0, jen = a[i].link.length; j < jen; j++) { c = (a[i].link[j].rel == "alternate") ? a[i].link[j].href : "#"; } for (var k = 0, ken = a[i].link.length; k < ken; k++) { if (a[i].link[k].rel == "replies" && a[i].link[k].type == "text/html") { e = a[i].link[k].title; break; } } _h = d.createElement('li');

_h.innerHTML = '<div class="inner"><img style="width:' + cfg.thumbWidth + 'px;height:' + cfg.thumbHeight + 'px;" data-src="' + g + '" src="' + g + '" alt="' + b + '" title="' + b + '"><a class="toc-title" href="' + c + '" target="_blank" title="' + b + '">' + b + '</a><div class="news text">' + _d + '…<br style="clear:both;"></div></div>'; o.f.appendChild(_h); } _h = d.createElement('a'); _h.href = '#load-more'; _h.innerHTML = cfg.navText; _h.onclick = function() { fn.c(o.l, o.j, o.k); return false; }; } else { _h = d.createElement('a'); _h.href = '#reset-content'; _h.innerHTML = cfg.resetToc; _h.onclick = function() { o.i = -1; o.e.innerHTML = cfg.counting; o.f.innerHTML = ""; fn.c(0, null, 'published'); o.a.innerHTML = o.a.innerHTML; o.b.children[0].innerHTML = o.b.children[0].innerHTML; return false; }; } o.g.appendChild(_h); o.a.disabled = false; o.b.children[0].disabled = false; }, e: function(json) { var a = json.feed.category, b = '<select id="label-sorter"><option value="" selected disabled>Pilih Kategori...</option>'; for (var i = 0, len = a.length; i < len; i++) { b += '<option value="' + encodeURIComponent(a[i].term).replace(/%20/g, " ") + '">' + encodeURIComponent(a[i].term).replace(/%20/g, " ") + '</option>'; } b += '</select>'; o.b.innerHTML = b; o.b.children[0].onchange = function() { o.i = -1; o.f.innerHTML = ""; o.g.innerHTML = cfg.loading; fn.c(0, this.value, o.k); }; } }; loadToc = fn.d; loadCategories = fn.e; fn.b(cfg.homePage + '/feeds/posts/summary?alt=json-in-script&start-index=' + (o.i + 1) + '&max results=' + cfg.maxResults + '&orderby=published&callback=loadToc'); fn.b(cfg.homePage + '/feeds/posts/summary?alt=json-in-script&max results=0&orderby=published&callback=loadCategories'); o.a.onchange = function() { o.i = -1; o.f.innerHTML = ""; o.g.innerHTML = cfg.counting; o.b.children[0].innerHTML = o.b.children[0].innerHTML; fn.c(0, null, this.value); o.k = this.value; }; o.c.onsubmit = function() { o.i = -1; o.f.innerHTML = ""; o.m = o.d.value; fn.c(1, o.d.value, o.k); return false; }; } }; _toc.init();

</script>

</div>

</div></article></div></div>

cara membuat daftar isi blog

ARTIKEL TERBARU

Berita Acak

Berita Terbaru

Footer Menu Widget

Footer Menu Widget