Cara Membuat Table Of Contents (TOC) Multi-level List Otomatis di Blog



Tahun ini mungkin tahunnya Table Of Contents (TOC) selain SEO dan Speed Template, karena kebanyakan website dan Blogger menggunakan TOC didalam postingan serta topik tentang pembahasannya sangat ramai dibahas termasuk yang sementara di tulis saat ini.

Sengaja saya membuat tutorial Table Of Contents karena kebetulan Blog Infonetmu.com belum lama dibangun dan topik inipun belum ada di blog ini, jadi masih banyak lagi topik tentang tutorial, tips atau trik yang akan dibahas.

Baca juga: Cara Membuat Related Posts Dengan 3 Style Melalui Layout



Membuat Table Of Contents  di blog sebenarnya sangatlah mudah dan tanpa menambahkan CSS atau JavaScript juga bisa yaitu dengan memanfaatkan ID atau tanda (#) di dalam postingan sudah bisa namun kekurangannya yaitu kita harus membuatnya secara manual.

Pengertian dan Fungsi Table Of Contents (TOC)

Table Of Contents (TOC) atau yang dikenal dengan daftar isi biasanya terdapat pada word, buku dan PDF, berfungsi untuk menyajikan tulisan yang berformat heading sebagai daftar isi, dengan adanya TOC didalam blog maka akan memudahkan pembaca melompat ke paragraf atau topik pembahasan yang diinginkan.

Manfaat Table Of Contents Terhadap SEO

Secara langsung TOC tidak terlalu berpengaruh terhadap SEO atau posisi artikel berada dihalaman pertama, namun dengan adanya TOC di dalam artikel, mesin pencari seperti Google, Yahoo, Bin dan Yandex lebih mudah menemukan artikel yang ditulis dengan rapih dan jelas.

Membuat Table Of Contents (TOC) Dengan Multi-level List

Sudah tahukan fungsi dan manfaat TOC terhadap blog, jika sudah tahu kita lanjut pada tutorial pemasangan TOC di dalam Blog.  Table Of Contents yang akan saya bagikan kali ini bersifat otomatis jadi ketika sobat memasang Heading dan Sub heading di dalam artikel, maka secara otomatis akan langsung terbaca di dalam table.

DEMO

Sebelum melanjutkan pada pemasangannya, alangkah baiknya sobat cek dulu demonya pada Link di atas agar nantinya sobat tidak salah dalam memilih TOC untuk dipasang. Saya pastikan sobat sudah melihat demonya di atas ya!, Jika tertarik untuk memasangnya perhatikan tutorial yang akan saya bagikan di bawah ini.

Cara Pemasangan

1. Simpan code CSS nya tepat di dalam code <style> ... </style> atau <b:skin<![CDATA[ ... ]]></b:skin>

@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. Kemudian letakkan code JavaScriptnya tepat diatas code </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

<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. Simpan

Heading

Langkah terakhir yang harus sobat lakukan yaitu buat Heading atau Sub Heading di dalam postingan, Heading yang suport pada Table diatas Heading h2, Sub Heading h3 dan Sub Heading h4, jadi apabilah sobat membuat artikel dan ingin memasang TOC di dalamnya harus menggunakan Heading.

Baca jugaCara Memasang Iklan AdSense di Tengah Artikel Melalui Layout

Kemudian letakkan code pemanggilnya di dalam artikel pada mode code atau HTML, terserah sobat mau letakkan pada paragrap berapa saja pasti akan terbaca, berikut code pemanggilnya.

<aside id="toc"><b class="toc"></b></aside>

Demikian Cara Membuat Table Of Contents (TOC) Multi-level List Otomatis di Blog, semoga dengan adanya tutorial di atas setidaknya bisa membantu para sahabat Blogger untuk memasang TOC di dalam artikel.

Hanya Blogger Pemula yang suka menulis dan membaca

Disqus Comments