• How to Add a Table of Contents to Blogger(Blogspot)Blog


    Step 1
    1. Login into your Blogger account with your ID
    2. Click on Layout
    3. Click on Edit HTML
    4. Tick on Expand Widget
    5. Now search the line of code.

      <b:include data='post' name='post'/>
    6. Now, replace the above code with the following code
      <b:if cond='data:blog.homepageUrl !=
      data:blog.url'>
      <b:if cond='data:blog.pageType != "item"'>
      <a expr:href='data:post.url'>
      <div style="padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#333333;color:white">
      <data:post.title/></div></a>
      <b:else/>
      <b:include data='post' name='post'/>
      </b:if>
      <b:else/>
      <b:include data='post' name='post'/>
      </b:if>
      <!-- Hack by bloggers-atoz2u.blospot.com -->
    7. Save your template now and your end for the Step 1.
    Step 2

    Inserting Table of Contents into your Navigation Bar
    1. Go to Layout
    2. Edit your page element of your Navigation bar code
    3. And Add the below line of code
      <a href="http://YourBlogURL/search?max-results=200">Table of Contents</a>
    4. Click on Save changes and your done
    Or some of you may have the navigation bar on your template, in that case

    1. Go to Layout
    2. Click on Edit HTML
    3. Click on Expand Widget
    4. Find for the codes where your navigation code is implemented
    5. And add
      <a href="http://YourBlogURL/search?max-results=200">Table of Contents</a>
    6. Save Template and your work is done.
    Changing the Style of Table of Contents.

    After implementation of this is hack, it would sometimes not please your eyes as the style does not match with the template. So basically there are 3 elements you need to know if you want to change of the Style of this hack.
    1. Background Colour
    2. Text Colour
    3. Table of Content Size


    You can change the Background Color and the text color of your choice by changing this part of the code.

    <b:if cond='data:blog.homepageUrl !=
    data:blog.url'>
    <b:if cond='data:blog.pageType != "item"'>
    <a expr:href='data:post.url'>
    <div style="padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#333333;color:white">
    <data:post.title/></div></a>
    <b:else/>
    <b:include data='post' name='post'/>
    </b:if>
    <b:else/>
    <b:include data='post' name='post'/>
    </b:if>
    <!-- Hack by bloggers-university.blospot.com -->


    Blue --> Background Color
    Green --> Text Color
    And, now if you want to adjust your List Size of your Table of Contents in your Blog, Simply just change the amount of display list of here



    0 comments:

    Post a Comment