Table of content is a very important factor to rank a blog. If you want to show your site on google featured snippet, you should always try to add Table of content. But you do not get any option to add Table of Content in blogger. So in this article, I will share with you, how to add Table of content in blogger.

    Benefits of Adding Table of Content:


    If you have added table of content in your post, your post can show in google featured snippet. So, you will get huge organic traffic.


    Go to blogger.com and login with your Google account. Then go to the themes section of your blogger dashboard. Now click on edit HTML.


    2nd Step:


    After clicking on edit Html, you will see your site full theme HTML. 

    Now search </head> tag and paste the below code code before </head>

    Copy the below code:

    <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[ //*************Table of Content (TOC) plugin by anantvijaysoni.in function toviralideasTOC() {var toviralideasTOC=i=headlength=gethead=0; headlength = document.getElementById("post-toc").getElementsByTagName("h3").length;for (i = 0; i < headlength; i++) {gethead = document.getElementById("post-toc").getElementsByTagName("h3")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h3")[i].setAttribute("id", "point"+i);toviralideasTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("toviralideasTOC").innerHTML += toviralideasTOC;}}function toviralideasToggle() {var toviralideas = document.getElementById('toviralideasTOC');if (toviralideas .style.display === 'none') {toviralideas .style.display = 'block';} else {toviralideas .style.display = 'none';}} //]]> </script>


    3rd step:


    Now, Search for ]]></b:skin> Code and Paste Below CSS Code before ]]></b:skin>


    .toviralideasTOC{border:5px solid #EE5535;
    box-shadow:1px 1px 0 #EDE396;
    background-color:#FFFFE0;
    color:#707037;
    line-height:1.4em;
    margin:30px auto;
    padding:20px 30px 20px 10px;
    font-family:oswald, arial;display: block;
    width: 70%;}
    .toviralideasTOC ol,.toviralideasTOC ul {margin:0;padding:0;}
    .toviralideasTOC ul {list-style:none;}
    .toviralideasTOC ol li,.toviralideasTOC ul li {padding:15px 0 0;
    margin:0 0 0 30px;font-size:15px;}
    .toviralideasTOC a{color:#EE5535;text-decoration:none;}
    .toviralideasTOC a:hover{text-decoration:underline; }
    .toviralideasTOC button{background:#FFFFE0;
    font-family:oswald, arial; font-size:20px;
    position:relative;
    outline:none;cursor:pointer; border:none;
    color:#707037;padding:0 0 0 15px;}
    .toviralideasTOC button:after{content: "\f0dc";
    font-family:FontAwesome; position:relative;
    left:10px; font-size:20px;}



    4th Step:


    Now, Search for <data:post.body/> and replace it with the code below


    <div id="post-toc"><data:post.body/></div>


    After that, save the html code and go to posts option.

    5th Step:


    Now edit your post on html format and paste the below code before first heading where you want to show your table of content.


    <div class="toviralideasTOC"> <button onclick="toviralideasToggle()">Contents</button> <ol id="toviralideasTOC"></ol> </div>


    6th Step:


    At last, you have to add a code at the end of your post in html format.


    <script>toviralideasTOC();</script></div>


    Conclusion:


    In think this post will help you to add Table of content in your blogger website. If you face any problem regarding this matter, you can tell me on comments.

    Post a Comment

    Previous Post Next Post