Dear Learnmore trick viewers today I am going to teach you how to add a fancy automated table of content (TOC ) in a blog post in an easy manner. You can add your table of contents on your each post for this you should code on your blogger template. Table of contents is important for those who are writing their articles professionally with headings and subheadings. Today I am going to teach you how to add a table of contents for Headings, and Sub headings titles.
What is table of Content (TOC) ?
Table of contents (TOC) is a list of the titles of your articles which gives an idea about which topics are introduced by the author in an article. The table of content carries breif descriptions of titles/chapters which means when viewers want read specific content from your article/post at that time it will be very effective because it jumps on that topic with out scrolling your page. It is generally put on the top of the articles but there is no restriction, You can use where ever you want.
Why we need table of Content ?
- High chance of Rank your Post: Table of contents is that plugins that are very helpful for bloggers and will get a higher rank in the Google search engine for your entire post.
- Quick Look: It is also helpful for your Blog readers to find out specific topics quickly that they want to read with out scrolling the entire post.
- Highligh Spectific topic: Table of content Highligh the entire post in listed form.
- Gives attractive looks for your article.
For which titles we can make table of content ?
Note:If you coding your templates for TOC which use Headings only under TOC then you must make your post titles under headings .Where as if you use sub heading TOC then make sure your titles are under sub headings .
Method-1: Automated table of content using Java Script
- Edit HTML: Coding under Blogger template Theme
If you want to add a table of contents on your blog, Then you must follow these steps:
Step 1: Go to your Blogger Dash board and choose your Blog
Step 2: Then go to Theme
Step 3: Then click on the template HTML
- Press CTRL+F for search box,then search for </head> tag
- Paste below any one code just above </head >
Codes for TOC that show headings
<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
learnmoretrick.com 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>
(Note: Ifyour Post title is under h3 tag then change h2 to h3 )
Codes for TOC that shows Sub headings
<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 learnmoretrick.com
function avsTOC() {var avsTOC=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);avsTOC = “<li><a href=’#point”+i+”‘>”+gethead+”</a></li>”;document.getElementById(“avsTOC”).innerHTML += avsTOC;}}function avsToggle() {var avs = document.getElementById(‘avsTOC’);if (avs .style.display === ‘none’) {avs .style.display = ‘block’;} else {avs .style.display = ‘none’;}}
//]]>
</script>
- Press CTRL+F for search box,then search for]]> </b:skin> tag
- Paste any one code below codes just above ]]> </b:skin>
Codes for TOC that show Headings
/*####Automatic TOC Plugin by MyBloggerTricks####*/
.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 but ton:after{content: “f0dc”; font-family:FontAwesome; position:relative; left:10px; font-size:20px;}
Codes for TOC that show Subheadings
.avsTOC{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%;}
.avsTOC ol,.avsTOC ul
{margin:0;padding:0;}
.avsTOC ul {list-style:none;}
.avsTOC ol li,.avsTOC ul li
{padding:15px 0 0;
margin:0 0 0
30px;font-size:15px;}
.avsTOC
a{color:#EE5535;text-decoration:none;}
.avsTOC
a:hover{text-decoration:underline; }
.avsTOC
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;}
.avsTOC button:after{content:
“f0dc”;
font-family:FontAwesome;
position:relative;
left:10px; font-size:20px;}
Step 6: Search <data:post.body/> on templates and replace all with below codes
<div id="post-toc"><data:post.body/></div>
Step 7: Now save your templates and go to Blog Post.
- Coding under each post :
Note: This is the coding that you must done for your all post where you want to display TOC for this you must make sure where you want to display your table of content on your post .And find it under your HTML editor
Step 8: Go to HTML editor on your post where you want to add TOC , then paste below Code in between heading tags like <h3>,<h2> or paste above your title.
(Note: If you already gives nubering on your titles then change ol to ul.)
<div class="mbtTOC">
<button onclick="mbtToggle()">Contents</button>
<br />
<ol id="mbtTOC"></ol>
</div>
Step 9: At last paste below code at the end of your Post in HTML editor
<script>mbtTOC();</script>
Step 10: Now go to Compose mode and publish /Upgrade your post to see your Table of Content.
Method-2: Automated table of content using CSS
This is also simple method to add table of content on your Blogger ,which is quick method but might not be work for all templates.
<div id="toc" class="mb-toc">
<h2>Table Of Contents</h2>
<ul>
<li><a href="#headingid1">1. Your heading text </a></li>
<li><a href="#headingid2">2. Your heading text</a></li>
<li><a href="#headingid3">3. Your heading text</a></li>
<li><a href="#headingid4">4. Your heading text</a></li>
<li><a href="#headingid5">5. Your heading text</a></li>
</ul>
</div>
