Table of Contents
How to Add Automatic Table of Contents in Blogger or WordPress
The table of contents is an advanced feature that has been introduced to websites mainly in WordPress years ago. So what is a table of contents? How can table of contents improve your blog SEO?
Advantages of the table of contents
- Gives a professional impression to your website.
- Makes it easier for your visitors to navigate through the different parts of your content.
- Improves your SEO as it optimizes your posts to search engines.
- It fastens the indexation by web robots.
- Highlights the most important parts in the post.
- Generates the heading automatically and there is no need to type it yourself.
- Does not affect the load and performance of your website especially if you are using a well coded template or WordPress theme.
- SEO Friendly codes.
- Adds a clickable table of contents ToC to web page topics in Blogger and WordPress.
How to Create a Table of Content in WordPress Posts and Pages
As we all know, adding features and options to WordPress is easy and simple by using the various plugins. Obviously, there some ones that are paid and offer advanced options. But we have tested most of them whether paid or free.
And here are the plugins that we recommend:
Both of these two plugins are very popular exceeding more than 300.000 users and installations. They will do the job automatically and systematically. You still customize your choices through the plugins configuation panel. Just install and forget ????????????.
How To Add SEO Friendly Table of Contents In Blogger
Let's move now to the second part concerning Blogger users. Yeah! You read right. In today's tutorial, we show you how to add a very stylish table of contents. The implementation is easy and does not affect your site performance like adding a sitemap page to Blogger.
As you were browsing this post, the table (TOC) is that table that you find it at the top.
Step 01
First follow these steps:
- Login to you Blogger dashboard.
- Backup your template first.
- Head to Template then edit HTML.
- With Ctrl+C to copy and Ctrl+V to paste the following codes in their appropriate places.
- Search for the line of code by hitting Ctrl+F
- Save your template and exit.;
Step 02
<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 Raqmedia.comfunction 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>
Step 03
Now, search ]]></b:skin> line and paste the following CSS code just above that ]]></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;}
Step 04
After that search for <data:post.body/> tag and replace all of them with the below code.<div id=”post-toc”><data:post.body/></div>How to Add TOC automatically In Blogger Posts
To finish setting up the script, you need to add the following code in every post of your blog right after the first headline. And finally at the end of the blog post paste the following script:<div class=”mbtTOC”><button onclick=”mbtToggle()”>Contents</button><ol id=”mbtTOC”></ol></div>
Important Notice
Note: If you have already used any other scripts of Table of Contents, make sure you delete them. You can change the word “contents” with what you want. Credits goes to MyBloggerTricks.
And that way you have successfully created an automatic Table of Contents in Blogger. If you face any problems or find ways to improve this script or better WordPress Plugins, do share your thoughts and feedback. We love to hear from you ????????.
The “Table of Contents” block enables you to create interactive
and SEO friendly indexable contents
without going through the hassle of coding ???? ????
???? اضافة جدول محتويات الموضوع فى بلوجر, روابط الانتقال السريع او جدول المحتويات
Thank you for a very useful tutorial.