Clickable Table of Content Plugin [Widget] for Blogger Blog

Blogger Blog Post Table of Content

Clickable table of contents is one of those features that make your blogger blog posts attractive and interesting to read. But for most blogger blog bloggers, having clickable table of contents within their blog posts is seemingly a tasky task to accomplish.


    In this tutorial, I am going to work you through the step by step guides on how to create a clickable table of contents for your blog post.


    Ready now? Okay. Let's get to the point then.


    What is Clickable Table of Content?

    A Table of Contents which is also commonly referred to as TOC or ToC in blog posts or article is a box that displays the contents of a blog post segmented mostly in either numeric or alphabetical order.


    Usually, the content of the blog post or article in a particular page are grouped by their headings or subheadings within the table of contents and when clicked on within the table of contents box, takes the reader straight to that particular heading or subheadings in the post body.


    And that is why some websmasters prefer to use the term clickable table of contents than just table of contents.


    Meanwhile, on a further note, the headings and subheadings in the blog post or article refer to the h2, h3 and sometimes the h4 tags present within the blog post in their respective arrangement.


    How Can You Insert Clickable Table of Content in Blogger Blog Posts

    Basically, you can manually or automatically insert clickable table of contents within your blogger blog posts.


    What is Automatic Insertion of Clickable Table of Content

    Automatic method of inserting Clickable Table of Contents in blogger blog allows us to pull together all the different headings and subheadings from a particular blog posts automatically without manually defining the heading tags.


    To do this, we make use of some JS codes which automatically discover, arrange and make this headings and subheadings within the blog post into a nice table within the post, usually before or after the first paragraph for the readers to spot and navigate easily.


    What is Manual Insertion of Clickable Table of Content

    Just as the name implies. Manual means having to do it manually; by yourself.


    Therefore, the process of inserting the clickable table of contents within your blog post by yourself is referred to as the manual insertion.


    Benefits of Using Clickable Table of Content in your Blogger Blog Posts

    As it is, clickable table of contents is advantageous in so many ways as it helps improve your blog post users experience and its SEO.


    Other than for the SEO reasons, here are other reasons for which you should have clickable table of content present within your blogger blog posts.


    You should have clickable table of contents present in your blogger blog post because:


    • It gives your blog post a professional look and propel a good impression.
    • It makes navigating your blog post easy for your readers.
    • It helps organise your blog post in a systemic manner such that your post focus points are easily identified.
    • It makes readers stay longer in your blog.

    SEO Benefits of Clickable Table of Content

    Other than the reasons mentioned from above, clickable table of contents has many other SEO advantages than you can think of.


    Below here I list a few of the SEO benefits of featuring clickable table of contents in your blogger blog posts.

    • It adds up your blog post content - this is a good thing because most search engines including Google use length of a particular blog post as part of their ranking factors. With clickable table of contents in your blog posts, you have a longer post which is directly equal to a better chance of ranking higher in search engine results pages.
    • It improves your blog post keyword density - because clickable table of contents uses your headings and subheadings, it most likely lists your keywords, giving your blog post another heads up SEO-wise.
    • It gives your blog post a better chance of ranking higher in search engine results pages.
    • It improves your blog click through rate in the search results pages.

    How to Automatically Insert Clickable Table of Content in Blogger Blog Post

    1. Preparation:

    Before you can be able to automatically insert clickable table of contents in your blogger blog post, you need to tweak your blogger blog template a little bit.


    Using the tutorial set forth, I would be guiding you on how to tweak your blogger blog so that you may be able to automatically insert clickable table of contents in your blogger blog posts.


    Please, be sure to backup your blogger blog template before you proceed.


    And when you are set, let's proceed below.


    2. Login your Blogger Blog Account

    Visit blogger.com and login your blogger account.


    When logged in, from the menu to your left, locate and click on Theme. The next page that opens shows you the source code of your blogger blog.


    3. Search for the head Tag within your Blog Source Codes

    Now, click within the source codes and then press cntr + f keys together and at once. Once pressed, a search widget should appear in upper-left corner of the source codes. This widget allows you search from within the source codes only.


    Now, search for head within the source codes through the search widget that just popped up.

    You may copy the head from below and paste it in the search widget.


    </head
    

    4. Copy the JS Codes Below and Paste it Just Above the head Tag

    Once you found the head tag you searched for from above, copy the JS Codes in the codes block below and paste it just above the head tag.

    <link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>   
    <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
    
    <script type='text/javascript'>      
      //<![CDATA[      
      //*************TOC plugin by ivtheme.com      
      function ivTOC() {var ivTOC=i=headlength=gethead=0;      
      headlength = document.getElementById("iv-toc").getElementsByTagName("h2").length;for (i = 0; i < headlength; i++)      
      {gethead = document.getElementById("iv-toc").getElementsByTagName("h2")[i].textContent;document.getElementById("iv-toc").getElementsByTagName("h2")[i].setAttribute("id", "point"+i);ivTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("ivTOC").innerHTML += ivTOC;}}function ivToggle() {var ivt = document.getElementById('ivTOC');if (ivt .style.display === 'none') {ivt .style.display = 'block';} else {ivt .style.display = 'none';}}      
      //]]>     
      </script>
    

    Configure Blogger Blog Post Table of Content - step 4

    5. Copy and Paste the Styling CSS Codes within your Blogger Blog CSS Section

    The next step for you is to copy the CSS code in the code block below and paste it in the Search Widget again. Just like you did when you searched for the head tag.


    ]]></b:skin>
    

    Then press the Enter key on your keyboard.


    Just above the code you copied from above, copy the entire CSS code from the codes block below and paste it there.


    .ivTOC{display: block; height: 220px; width: 300px; border:5px dashed #ddd; box-shadow: 1px 1px 0 #444; background-color: #f8f8f8; color: #000; line-height:1.4em; margin: 15px 20px; padding: 15px 10px; font-family:oswald, arial; overflow-x: hidden; overflow-y: auto; float: left;}
    .ivTOC ol, .ivTOC ul {margin: 0; padding: 0;}      .ivTOC ul {list-style: none;}
    .ivTOC ol li, .ivTOC ul li {padding: 15px 0 0;  margin:0 0 0 30px; font-size: 15px; font-weight: 500; }      
    .ivTOC a{color: #0080ff; text-decoration: none;}
    .ivTOC a:hover{text-decoration: underline; }     .ivTOC button{background: #FFFFE0; font-family:oswald, arial; font-size:20px; position: relative; outline:none; cursor: pointer; border:none; color: #660099; padding: 0 0 0 15px;}
    .ivTOC button:after{content: "\f0dc"; font-family:FontAwesome; position:relative; left:10px; font-size:20px;}
    

    NOTE: you may customize the look and feel of your clickable table of contents to fit the style of your blogger template by modifying the CSS code as highlighted below:

    • To Change background color: modify #f8f8f8
    • To Change border color: modify #ddd
    • To Change font color: modify #000
    • To Change link color: modify #0808ff
    • To Change link anchor text size: modify 15px

    6. Modify your Blogger Blog data:post-body Tag

    Again in the search widget, type data:post-body and press the enter key to search for the data:post-body tag.

    You can also copy the data:post-body from the codes block below and paste it directly in the search widget.


    <data:post-body/>
    

    Once found, replace the data:post-body with the codes in the codes block below:

    <div id="iv-toc"><data:post.body/></div>
    
    Configure Blogger Blog Post Table of Content - step 6

    NOTE: You may find several occurrences of the data:post.body. Simply replace all of them with codes copied from the codes block above.

    7. Save your Blogger Blog Theme

    Finally, you can click Save to effect the changes made on your blogger blog theme.


    Having completed the steps from above successfully, you now have a fully functional automated clickable table of contents plugin installed on your blogger blog.


    How to Automatically Insert Clickable Table of Content in your Blog Post

    As earlier noted, the aim of these whole modification process is to enable you automatically insert table of contents in your blogger blog post.


    And to do just that, there are a few other simple steps you need to follow each time you create or edit post you wish to insert the clickable table of contents in.


    To insert clickable table of contents in your blog post simply;


    1. Create New Blog Post or Edit Published Blog Post

    Either you have a new post to publish and you wish to insert clickable table of contents in it or you wish to insert the clickable table of contents in your already published post, simply start by creating a new post or edit the published post.

    2. Switch to Post HTML Editor View

    From the New Post Edit screen, switch to HTML Edit view.


    Insert Blogger Blog Post Table of Content - step 2

    3. Paste this HTML Tag Where you Want Clickable Table of Content Box Appear

    Copy the HTML tag in the codes block below and paste it within your blog post where you want the clickable table of contents box appear within your blog post body.


    <div class="ivTOC">    
    <button onclick="ivToggle()">Table of Content</button>
       <ol id="ivTOC"></ol>
       </div>
    

    Insert Blogger Blog Post Table of Content - step 3

    4. Trigger the Clickable Table of Content Using the JS Code Below

    Next, copy and paste the JS Code in the codes block below and paste it after the last end of your post edit space.


    <script>ivTOC();</script>
    

    NOTE: ensure that nothing appears after the JS Code copied from above in your post edit screen.


    Insert Blogger Blog Post Table of Content - step 4

    5. Publish Your Blog Post

    Finally, you may now click Publish or Update to effect the changes in your blog post.


    Final Thought on Clickable Table of Content

    As tiny or tideous as these procedures may seem to you, it is extremely beneficial for your blogger blog both in your blogger blog post SEO optimization aspect and the user experience.


    Therefore, in every blog post you write always make sure you have clickable table of contents present within the blog post body.


    And if you can, you may include it in all your already published post. It may be a tasky task, but it is extremely recommended.


    0 Comments

    to top