How To Add Table Of Contents To Blog Post Html
Benefits of adding Automatic table of contents in blogger?
Adding table of contents in blogger will give you many benefits in terms of SEO, user friendliness using proper navigation etc, Best example of Adding TOC is Wikipedia. They add TOC to help readers to jump from one section to another section. Below is TOC screenshot from my Blogger blog about Adswiki: Ad networks Review. take example below – if in lengthy article if user just want to check CPM rates of Propellerads then he will click on navigation number 10 then he will be navigated to that page directly skipping all other content.
SEO Benefits of Table of contents.
Adding Automatic table of contents in blogger will provide summary of your blog posts what its all about, Also TOC links are SEO friendly & can be easily crawled and indexed to search engine pages with direct jump to link included, SO TOC will also help you improve your SEO & in addition increase your search engine rankings. Below is example of how your page look in search engine results. Note: Links in TOC are Do-follow.
Automatic TOC setup for blogger/blogspot.
Today i will explain easy way on how to add automatic table of contents in blogger? website, There are 3 ways available to add table of contents in blogger blog, The first one is editing your post html & adding anchor tag for jumping to content. But this method is too much time consuming as you have to edit HTML for every post so bloggers don't afford this way as there are lots of other things to do.
The second way is installing widgets from third party websites, but i suggest you not to use this method as sometime the third party websites closes their business and then the widget gets broken and again we need to start from beginning.
The last method & Best method to add automatic TOC in blogger is by adding some CSS and JavaScript codes in theme template of your blogger blog. by implementing this method you need not do too much HTML editing so will save lots of time here, So lets see how we gonna do it step by step.I also made video on Adding Auto TOC in blogspot/blogger Check it below for easy understanding.
How to Add automatic table of contents in blogger?
Step 1: Go to blogger>Theme>Edit HTML.
Step 2 : Add below CSS code before ]]></b:skin>
After clicking Edit html > press CTRL+F & find this code ]]></b:skin> & Paste below CSS code just before it as shown in image after this code.
<!-- Table of contents CSS start --> .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;} <!-- Table of contents CSS end--> 
Step 3: Add below JavaScript code before closing head tag = </head>
Refer image after this code for better understanding.
<!-- Table of contents Javascript start--> <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> <!-- Table of contents Javascript end --> 
Step 3: Now Find <data:post.body/> Replace this code with below code.
<div id='post-toc'><data:post.body/></div> You will find this code 2 or 3 times in your blogger html replace each with above code as shown in below image.
That's all done with Blogger HTML editor Now next work is with Post html editor you need to add these 2 short codes one at top and another at bottom of post.
How to add TOC in Blogger Post?
Step-4 – Adding 2 short codes in Blogger Post HTML.
Add Below Code at the top of post page before 1st heading.
<div class="mbtTOC"> <button onclick="mbtToggle()">Contents</button> <br /> <ol id="mbtTOC"></ol> </div> 
& Below code at the End of post.
<script>mbtTOC();</script> 
Thats All done > Publish post and you can see Table of contents at top of your page the user will get hide option also for TOC.
Instead of adding short codes every time in Post, i will tell you simple trick. Lets see step by step.
Every time adding these codes in every post is hectic .so I will suggest to
add these 2 codes in blog post template so whenever you click on create
a new post it will automatically generate TOC.
If you create blogger Template and save it in settings every time when you create a new posts these two codes automatically get included without manual innervation just create your post without deleting them by mistake.
How to create Pre-formatted Post template for blogger.com?
While previous steps just shown method adding automatic table of contents in blogger , to further simplify adding automatic table of contents in blogger follow below steps.
Post templates pre-format the post editor with text or code that will appear each time you create a new post. It will help you to save your time that you can utilize for some other tasks.
Step 1 – Click on New post in Blogger.com
Step 2 – Types some sample text where you will start your post every time, So that short codes should not get deleted mistakenly.
Step 3 -Add codes as shown in the previous tutorial, one at top and another at the end of the post, Then copy all content. (by pressing Ctrl+A).
Step 4 – Go to Settings > Posts, comments & Sharing > Then Paste copied html code inside post template box as it is.> Click on save settings option at top right corner.
That's all done!!! now whenever you click on a new post in your blogger blog these TOC codes will automatically get included in post now put your content in between.
Here we have completed our post How to add automatic table of contents in blogger? If you have any question or help required to complete TOC task then please comment below will revert back ASAP.
You may Also Like – How to claim your website on pinterest?
Credits to all codes required here goes to MyBloggerTricks
How To Add Table Of Contents To Blog Post Html
Source: https://bloggerguest.com/automatic-table-of-contents-in-blogger/
Posted by: pendarvisstideass60.blogspot.com
0 Response to "How To Add Table Of Contents To Blog Post Html"
Post a Comment