Do you want to create a table of content in your blogger post? Might be you have looked at another post before coming to my post and you didn't get how to create a table of content easily. May you want to understand the thing how it works.
So guys In this post we will learn how to create a "Table Of Content" easily and I will also tell you how it works and what you have to do if you want to customize the colors, fonts, or any other thing in it.
Let's create a table of content steps by step
1. First, open your theme section in blogger and open your current blogger theme as "Edit HTML".
2. Press Ctrl+F and find the </head> element into your theme HTML code.
3. Then enter one new line before this </head> tag and press 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[
function mbtTOC() {var mbtTOC=i=headlength=gethead=0;
headlength = document.getElementById("post-toc").getElementsByTagName("h2").length;for (i = 0; i < headlength; i++)
{gethead = document.getElementById("post-toc").getElementsByTagName("h2")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h2")[i].setAttribute("id", "point"+i);mbtTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("mbtTOC").innerHTML += mbtTOC;}}function mbtToggle() {var mbt = document.getElementById('mbtTOC');if (mbt .style.display === 'none') {mbt .style.display = 'block';} else {mbt .style.display = 'none';}}
//]]>
</script>
Reason:
<head> </head> section is the section of our website where we write the metadata of our website, the scripts (javascript ... can be internal or external), and the external resources that we want to use in our website like we want to load bootstrap framework or fonts from google.
So here we are loading
1. First, we are loading font-awesome for icons like up-down.
2. Second, We are loading the fonts from google.
3. Third, We are writing JavaScript code so that it can select all the h2 (Heading as per blogger) and create a table of content from those headings. Some styling to show it in the block with the background color.
4. Then select the below code and find it again in your template HTML code.
]]></b:skin>
5. Enter a new line before this code and copy the below code.
.mbtTOC{border:5px solid #f7f0b8;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%;}
.mbtTOC ol,.mbtTOC ul {margin:0;padding:0;}
.mbtTOC ul {list-style:none;}
.mbtTOC ol li,.mbtTOC ul li {padding:15px 0 0; margin:0 0 0 30px;font-size:15px;}
.mbtTOC a{color:#0080ff;text-decoration:none;}
.mbtTOC a:hover{text-decoration:underline; }
.mbtTOC 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;}
.mbtTOC button:after{content: "\f0dc"; font-family:FontAwesome; position:relative; left:10px; font-size:20px;}
Reasons:
1. This code is the CSS code for styling the background, buttons, fonts, and colors. Actually, in this code, we have written styling (CSS) for the classes so where ever we use this code it will customize the code.
2. This code we will use while writing the pos because we want to add the table of content in our post.
6. Now search the below code in the HTML code of your template.
<data:post.body/> 
7. Replace the find code with the below code.
<div id="post-toc"><data:post.body/></div>
Note: If you will find more than one <data:post.body/> so replace all by this code above.
Reasons:
1. We are adding <div> tag with id so that we can find the post body in our HTML code. This will help to find so that we can add the table of content for our post.
This is the code that we have to do with our template HTML code.
Now when you write your post you have to add some code so that our code can understand that in which post user want to create a table of content.
1. First your main heading will be Major-Heading (h1 as per HTML code).
2. You don't have to add numbers before Heading (h2 as per HTML code).
3. Once you write your post then open your post into HTML view.
4. Now copy the below code and paste it after your Major Heading.
<div class="mbtTOC">
<button onclick="mbtToggle()">Table Of Contents</button>
<ul id="mbtTOC"></ul>
</div>
5. And add the below code at the last of your HTML code.
<script>mbtTOC();</script>
Now finally it will look like
0 Comments