I deliberately made a Table of Contents tutorial because it happened that Blog Infonetmu.com was not long built and this topic is not yet on this blog, so there are many more topics about tutorials, tips or tricks to be discussed.
Creating a Table of Contents on a blog is actually very easy and without adding CSS or JavaScript, you can also use ID or sign (#) in the post, but the disadvantage is that we have to make it manually.
Definition and Function of Table of Contents (TOC)
Table of Contents (TOC) or known as table of contents is usually found in words, books and PDFs, serves to present the text in the form of headings as a table of contents, with the presence of TOC in the blog will make it easier for readers to jump to the desired paragraph or topic of discussion.Benefits of Table of Contents on SEO
TOC does not directly affect SEO or the position of the article is on the first page, but with the TOC in the article, search engines like Google, Yahoo, Bin and Yandex are easier to find articles that are neatly written and clear.Creating a Table of Contents (TOC) with a Multi-level List
Already know the functions and benefits of the TOC on the blog, if you already know we continue on the TOC installation tutorial on the Blog. The Table of Contents that I will share this time is automatic so when you install Heading and Sub headings in the article, it will automatically be read directly in the table.
Before proceeding with the installation, it is better for you to check the demo(soon) in the link above so that you will not be mistaken in choosing the TOC to install. I make sure my friend has seen the demo above! If you are interested in installing it, pay attention to the tutorial that I will share below.
How to install Table of Contents (TOC) on a Blog
@font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/materialicons/v53/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2'); font-display: swap; } .material-icons, body, strong { font-weight: 400; } .material-icons { font-family: 'Material Icons'; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; vertical-align: middle; text-transform: none; display: inline-block; white-space: nowrap; direction: ltr; } #toc { background: #edf5f9; color: #000000; margin: 30px auto; padding: 20px; display: inline-block; width: auto; } #toc a { text-decoration: none; color: #000000; } #toc b.toc { text-transform: uppercase; background: #0573de; color: #ffffff; font-size: 13px; font-weight: 400; padding: 5px 0 5px 10px; } #toc ol { padding-left: 20px; margin: 0; } #toc ol li { padding: 5px 0 0; font-size: 15px; color: #000000; } #toc ol li ol { padding-left: 2rem; margin: 0; } #toc ol li ol li, #toc > ol > ol li { list-style-type: disc; } #toc > ol { counter-reset: item; list-style: none; } #toc > ol li > li:before, #toc > ol > li:before { content: counters(item, ".")" "; counter-increment: item; margin-right: 5px; } #toc > ol > ol { padding-left: 1rem; } .post-body h2[id]::before, .post-body h3[id]::before { content: " "; margin-top: -72px; height: 72px; display: block; visibility: hidden; } .toc button { border: 0; font-size: 11px; padding: 4px 5px 9px; outline: 0; height: 28px; line-height: 1.2em; border-radius: 0; margin: 0 0 0 10px; font-family: -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Oxygen-Sans, Ubuntu, Cantarell, helvetica neue, open sans, sans-serif; cursor: pointer; font-weight: 500; background: linear-gradient(to bottom, #f1f1f1 5%, #fbfbfb 100%); background-color: #f9f9f9; text-shadow: 0 1px 0 #ffffff; }
2) Then place the JavaScript code directly above the code </body> or <!--</body>--></body>
<script> //<![CDATA[ function tocShowHide() { var e = { tocHide: !0 }; for (var t in infonetMuSetting)"undefined" != infonetMuSetting[t] && (e[t] = infonetMuSetting[t]); var n = document.querySelector(".toc"), o = document.createElement("button"), r = document.querySelector("#toc ol"); n.appendChild(o), 1 == e.tocHide ? (o.innerHTML = "<span class='material-icons'>toc</span>", r.style.display = "") : (o.innerHTML = "<span class='material-icons'>toc</span>", r.style.display = ""), o.addEventListener("click", function () { "none" == r.style.display ? (r.style.display = "", o.innerHTML = "<span class='material-icons'>toc</span>") : (r.style.display = "none", o.innerHTML = "<span class='material-icons'>toc</span>") }) } function tocOption() { var e = document.querySelector(".toc"), t = { judulTOC: "Daftar Isi", showHideTOC: !0 }; for (var n in infonetMuSetting)"undefined" != infonetMuSetting[n] && (t[n] = infonetMuSetting[n]); e.innerHTML = t.judulTOC, 1 == t.showHideTOC && tocShowHide() } ! function (e) { "use strict"; function t(e) { if ("string" != typeof e) return 0; var t = e.match(/\d/g); return t ? Math.min.apply(null, t) : 1 } function n(e) { var n, o, i, c, a, l, s = e.selector, u = e.scope, d = document.createElement("ol"), p = d, f = (n = e.overwrite, o = e.prefix, function (e, t, r) { e.textContent; var i = o + "-" + r; t.textContent = e.textContent; var c = !n && e.id || i; c = encodeURIComponent(c), e.id = c, t.href = "#" + c }); return i = s, c = u, a = [], l = document.querySelectorAll(c), Array.prototype.forEach.call(l, function (e) { var t = e.querySelectorAll(i); a = a.concat(Array.prototype.slice.call(t)) }), a.reduce(function (e, n, o) { var i = t(n.tagName), c = r(p, i - e) || d, a = document.createElement("li"), l = document.createElement("a"); return f(n, l, o), c.appendChild(a).appendChild(l), p = a, i }, t(s)), d } function o(e) { var t = (e = function (e, t) { for (var n in t) t.hasOwnProperty(n) && t[n] && (e[n] = t[n]); return e } ({ selector: "h1, h2, h3, h4, h5, h6", scope: "body", overwrite: !1, prefix: "toc" }, e)).selector; if ("string" != typeof t) throw new TypeError("selector must be a string"); if (!t.match(/^(?:h[1-6],?\s*)*$/g)) throw new TypeError("selector must contains only h1-6"); var o = location.hash; return o && setTimeout(function () { location.hash = "", location.hash = o }, 0), n(e) } var r = function (e, t) { return 0 > t ? r(e.parentElement, t + 1) : t > 0 ? function (e, t) { for (; t--;) { var n = document.createElement("ol"); e.appendChild(n), e = n } return e } (e, t) : e.parentElement }; "function" == typeof define && define.amd ? define("toc", [], function () { return o }) : e.initTOC = o } (window); var aside = document.getElementById("toc"), toc = initTOC({ selector: "h2, h3", scope: ".post-body" }); null != aside && (aside.appendChild(toc), tocOption()); var infonetMuSetting; //]]> </script>
3) Finally Save it.
😊 Headings
The last step you have to do is for Heading or Sub Heading in the post, Supporting Heading in the Table above Heading h2, Sub Heading h3 and Sub Heading h4 , so if you make an article and want to put a TOC in it must use Heading.
The last step you have to do is for Heading or Sub Heading in the post, Supporting Heading in the Table above Heading h2, Sub Heading h3 and Sub Heading h4 , so if you make an article and want to put a TOC in it must use Heading.
Then put the caller code in the article in code or HTML mode, it's up to you want to put in any paragraph will definitely be read, the following code caller.
<aside id="toc"><b class="toc"></b></aside>
Similarly, How to Make a Multi-level List Table of Contents (TOC) Automatically on a Blog , hopefully with the above tutorial at least can help Blogger friends to install TOC in the article.