Google blogger is known to be one of the popular free blogging platform on the internet now. It was developed by Prya Labs and later bought by Google in 2003. Since then, Google have had full control of the platform and added it to their products.
Using Google blogger is a bit technical because, mostly using free themes, you’ll need to install some codes to get some additional features like table of content and many others to make your website look professional.
Unlike, WordPress where you’ll just have installed plugins, and you’re good to go. Blogger seems to be a bit technical, when working on it and care is not taken, you might delete some codes of your theme and break it at the end of the day.
In this particular guide, we will be elaborating on the procedure to insert automatic Table of Content in all your posts or articles on Google blogger website. And also, an embedded YouTube video that will help take you through this procedure step-by-step.
Procedure To Insert Automatic Table Of Content In Google Blogger Site
Inserting table of content automatically in all your posts or articles uploaded is not a big deal. All you have to do is copy and paste organized codes and follow the step-by-step procedure to get it done.
#Remember you’ll be dealing with codes, in this case, if you miss a procedure or make a little mistake, you’ll are not going to get the expected outcome. Also, if care is not taken, and you delete any code of your installed theme, it could lead to the breakdown of your website or theme.
Which means you’ll have to install that particular theme on your website once again.
In this guide, we will be using a code provided by (Techier). We will drop a video guide to get this done as well below.
Because of cases, our readers won’t be allowed to copy the code in the article. If you need the code, please do email us through (bronzegroupsteam@gmail.com)
We will do well to forward the code PDF to you through Gmail for free. We will reply to messages within 24 hours.
Please do well to be clear when you email us. Thank You!
1. Head over to Blogger>Themes>Edit Theme
2. Paste the following code provided below above the closing head tag (</head>)
<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 MyBloggerTricks.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>
3. Search for ‘]]></b:skin>’ in the edit theme section. (Tip, Press Ctrl + F to search)
4. Paste the following code just above the ‘]]></b:skin>’
.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;
}
4. Find <data:post.body/> in the edit theme section and replace it with ‘<div id=”post-toc”><data:post.body/></div>’
You’re done with the first part. We will now have to open the preferred article where we’re willing to insert our Table of Content.
We will be adding a few codes to the HTML of that particle article as well. After that our table of content have to pop up successfully o our post or article.
5. Create a new post and paste the following code in the HTML Section wherever you want to show your Table Of Contents. So with this, you’ll have to paste this immediately before your first H2 heading or in HTML (tag).
This will help your table of content appear perfectly in ascending order thus, From (H2, H3, H4,H5, H6)
<div class=”mbtTOC”>
<button onclick=”mbtToggle()”>Contents</button>
<ol id=”mbtTOC”></ol>
</div>
6. Add the following code in the last of your post in the HTML section.
<script>mbtTOC();</script>
7. You’re done now, your table of content has to appear in your article when it’s refreshed or published.
Always do well, to arrange your Headings very well, this will help your Table of Content appear very neat and clean.
#If yours did not work, you might have probably missed a step or a single code, take not that, you’ll be dealing with codes. In these cases if any is missed out, your command cannot be successfully rendered.
If anything like that happens, we suggest you go back to the first steps and glance through the codes you pasted to detect the fault and fix it. Else, you can install your theme again and try to insert the codes once again.
Video Tutorial To Add Automatic Table Of Content On Google Blogger Website
Please do well to subscribe to their YouTube channel, to get more guide on Google Blogger.
YouTube Channel:- https://www.youtube.com/channel/UCHs0f12EPjFSAWiVoen5zZA
Article Reference
The Techier on YouTube, Channel link (https://www.youtube.com/channel/UCHs0f12EPjFSAWiVoen5zZA)
Hi I’m Michael, a digital marketer and a webmaster at Bronze-review. I have a degree in Political science and Information science. I’m an introvert type that enjoys listening to music whiles working on blogs. Even though I didn’t read marketing or computer science in school, I’m very much interested in digital marketing and technology related stuff. You can contact me on bronzegroupsteam1@gmail.com.
