What is the Table of contents?
Table of content is an important thing for blogger Blogspot. In recent time, most of the professional blogger website is using the table of content for user-friendly and SEO friendly. Even Wikipedia one of the most informational website at you think automatic table of content for their every post and it brings attractive look for their every content.
This table of content JavaScript made by from MBT team. We have just modified some of coding what different look. You can set this table off content for every post or every page you want and it will show automatically if you use a small HTML code for your website. Most professional blogger also using the table of content service for their website. It's also called TOC.
Table Of Content For Blogger
All of you know that there is no plugin for blogger Blogspot for using develop content. You cannot install any plugin from WordPress is different from WordPress but we can add a table of content using HTML and JavaScript manual coding.
This is a very simple trick for every blogger Blogspot website. There is no limit that you cannot use the table of content for your blogger Blogspot. If you are interested in the table of content for your blog on Blogspot then you should read our blog post is step by step.
Why you will Add Table Of Content?
Do you have any question about the table of content as like why we should add a table of contents for the blogger Blogspot website? First of all, it will look like a professional website for every visitor And it will look attractive website for everyone.
Table of content will make you user-friendly for reading for the full post. It has a different facility for you what state that you will understand there every day when you will use this function for your blogger Blogspot.
Features of Table Content
In this table of content has a different facility for your blogger website. If you want to know more about the facility for your blogger Blogspot then you have to use the table of content.
- This table of content is SEO friendly for your blogger website.
- This development entry is digital friendly for your website.
- You can show anywhere you want to show the table of contents.
- Is mobile friendly with responsive design.
- You can easily customise this table of content.
- It has Contains a table button for your post.
- It has a lightweight and fast scoring system for your blogger post.
How to add a table of content for your blogger website
I am going to share a simple method to add a table of content in blogger website. You can apply this table of the content method to every blogger template if you want.
First of all, you have to go to your website dashboard that means you have to login your Gmail account on blogger.com.
Now follow my instruction step-by-step what I tell.
Log in your Gmail account on blogger.com
Now go to theme function from your website dashboard.
Now Back up your theme/template before adding any custom code.
Now to Edit HTML Code.
Now you looking all of HTML code for your Blogspot website we have to find closing head tag from the system code. So you have to click on Ctrl + F button from your laptop or PC keyboard than you will see search bar write<head/> to the search bar and press enter button.
Now copy the source code from below and paste the flowing source code tea for the head tag.
<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 mbtTOCundefined) {var mbtTOC=i=headlength=gethead=0;
headlength = document.getElementByIdundefined"post-toc").getElementsByTagNameundefined"h2").length;for undefinedi = 0; i < headlength; i++)
{gethead = document.getElementByIdundefined"post-toc").getElementsByTagNameundefined"h2")[i].textContent;document.getElementByIdundefined"post-toc").getElementsByTagNameundefined"h2")[i].setAttributeundefined"id", "point"+i);mbtTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementByIdundefined"mbtTOC").innerHTML += mbtTOC;}}function mbtToggleundefined) {var mbt = document.getElementByIdundefined'mbtTOC');if undefinedmbt .style.display === 'none') {mbt .style.display = 'block';} else {mbt .style.display = 'none';}}
//]]>
</script> Now save the code from HTML Editor board.Now you have to click on Control+F again then you will see a search ber and past the code
]]></b:skin> and press enter button. Now Press this below code to befoe the flowing code above.
/*####Automatic TOC Plugin by wetuner####*/
.mbtTOC{border:4px solid #ddd;box-shadow:1px 1px 0 #EDE396;background-color:#00000000;color:#000;line-height:1.4em;margin:10px auto;padding:20px 30px 20px 10px; font-family:oswald, arial;display: block;width: 80%;}
.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:16px;}
.mbtTOC a{color:#0080ff;text-decoration:none;}
.mbtTOC a:hover{text-decoration:underline; }
.mbtTOC button{background:#ffffff0d; font-family:oswald, arial; font-size:16px;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:15px;}
If you want to change little bit something like colour font size font style and you can change from yourself but you have to backup you template before doing this type of Change. after this you have to search for
<data:post.body/>and replace it with the code below:
<div id="post-toc"><data:post.body/></div>Note: You have to find two or more of this code so replace all its instances with the code below we mentioned. Table of content will not work if you replace
<data:post.body/>but some of theme working with one time repleas. just once.
Now save your template from HTML mode. you have done 80% for your blog Table Of Content.
How to Enable The Table of Content?
This is the time to show table off content for your blogger post by manual using a short HTML code. You have to go to your post and turn on external mode from blog post setting.
You can close the place you want to show the table of content body structure from on blog post.
#Step 01 Mention Location Of Table Of Container
Table of Content shows right place after your starting paragraph or before your first heading h2. you have to use h2 heading on blogger post otherwise it will never work on your blog.
To show it you have to switch "HTML" mode of the blogger post editor and then paste the following HTML code before first heading or anywhere you want to show.
<div class="mbtTOC">
<button onclick="mbtToggle()">Table of Contents</button>
<ol id="mbtTOC"></ol>
</div>
Step #2 Activate Table Of Content
Finally it is time to show that table of contents after past this below code
To show the table of content for your blogger blog post you have to pat the flowing Javascript code.
<script>mbtTOC();</script>Now publish your post from external mode and see the magic of your content.< After completing all task in the right way it you show you magic.
If you don't understand well or if you cannot go then let me know. To help you to add the table of content for your blogger blog for website. Thanks for Reading the post from our website to know more about technology and blogging related latest articles.
Post a Comment
Post a Comment