Easy methods to Create Desk of Content material in Blogger?

A desk of contents, additionally referred to as a ToC, is among the most necessary elements of your weblog posts. It’s a instrument that makes it simple for readers to rapidly navigate via completely different sections of your weblog submit. Desk of contents shows the details of the content material and works as navigation. 

Reasonably than carry on scrolling, the reader simply clicks on the purpose within the TOC and reaches that time with out scrolling.

In WordPress, you will have a number of plugins that create a desk of contents robotically. However in Blogger it’s important to use a special code.

Right here is the simplest answer for a blogger.

Easy methods to Create a Desk of Contents (TOC) in Blogger?

• Go to Blogger.com.
• Log in and entry your weblog.
• Click on on “Theme.”
• On the dropdown button, click on on “Edit HTML.”
• Now copy the next code and add it earlier than the </physique> tag, and reserve it.

<!–Desk of Contents Script with Lazy Loading–>
<script>
  (perform() {
    // Perform to create the Desk of Contents
    perform createTOC() {
      var toc = doc.createElement(&#39;div&#39;);
      toc.id = &#39;table-of-contents&#39;;
      toc.model.padding = &#39;15px&#39;;
      toc.model.backgroundColor = &#39;#f4f4f4&#39;;
      toc.model.border = &#39;1px strong #ddd&#39;;
      toc.model.marginBottom = &#39;20px&#39;;

      var tocTitle = doc.createElement(&#39;p&#39;);
      tocTitle.textContent = &#39;Desk of Contents&#39;;
      toc.appendChild(tocTitle);

      var tocList = doc.createElement(&#39;ul&#39;);
      var postContent = doc.querySelector(&#39;.post-body&#39;);
      
      if (postContent) {
        var headings = postContent.querySelectorAll(&#39;h2, h3, h4&#39;); // Regulate the heading ranges (h2, h3, h4…)
        
        headings.forEach(perform(heading, index) {
          // Convert heading textual content to a legitimate ID (lowercase, areas changed with hyphens)
          var id = heading.textContent.trim().toLowerCase().substitute(/[^ws-]/g, &#39;&#39;).substitute(/s+/g, &#39;-&#39;);
          heading.id = id;  // Set the ID to the heading textual content

          var listItem = doc.createElement(&#39;li&#39;);
          var hyperlink = doc.createElement(&#39;a&#39;);
          hyperlink.href = &#39;#&#39; + id;
          hyperlink.textContent = heading.textContent;
          listItem.appendChild(hyperlink);
          tocList.appendChild(listItem);
        });

        if (tocList.youngsters.size &gt; 0) {
          toc.appendChild(tocList);
          postContent.insertBefore(toc, postContent.firstChild);  // Insert TOC on the prime of the submit content material
        }
      }
    }

    // Intersection Observer for lazy loading TOC
    perform lazyLoadTOC() {
      var postContent = doc.querySelector(&#39;.post-body&#39;);
      if (!postContent) return;

      var observer = new IntersectionObserver(perform(entries, observer) {
        entries.forEach(perform(entry) {
          if (entry.isIntersecting) {
            // If the submit physique is within the viewport, create the TOC
            createTOC();
            observer.disconnect(); // Cease observing as soon as TOC is created
          }
        });
      }, { threshold: 0.1 }); // Set off when 10% of the submit content material is within the viewport

      observer.observe(postContent);
    }

    // Run lazy load perform when the web page is prepared
    window.onload = lazyLoadTOC;
  })();
</script>

Now your Blogger weblog has a lazy loading desk of contents. Why I used lazy loading is to make sure that the code doesn’t create points together with your core internet vitals rating.

For those who nonetheless have any query, be happy to ask me.