How to add and create table of contents in 2022 for blogger post
Your advantage in creating a table of contents for a post is that when Google crawler indexes your post, it can easily recognize your post content and easily display the entire content of your post to the public.
The table of contents is therefore essential
for the website because if you write 3000 words posts then no one in this post can quickly find what His need but if you create table of contents in this post the viewer can everything in a few seconds. What wants to can find it in your post
How add mobile frindly table of contents in blogger post
An example can be seen in the picture below
If you want to create a nice and mobile friendly table for your blogger post then follow these steps.
Steps 1 Go to your blogger Dishburd thin click theme
Click Edit Html
Steps 2 New press " CTRL + F "
Search </Head>
Copy the code below and paste it between <head> and <\head>
| <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>/> |
Steps 3
Search Again in html code
again search on the theme using "CTRL+F" for " ]]></b:skin> " and again copy the code below and paste code above " ]]></b:skin> "
| /*####Automatic TOC Plugin by MyBloggerTricks designed by Saroj-Tech####*/ .mbtTOC { border: 3px solid #A2A9B1; box-shadow: 1px 1px 0 #EDE396; background-color: #F8F9FA; color: #830000; line-height: 1.4em; margin: 30px auto; padding: 20px 30px 20px 10px; font-family: Open Sans, arial; display: block; width: 100%; border-radius: 5px; } .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: none; font-family: Open Sans, arial; font-size: 20px; position: relative; outline: none; cursor: pointer; border: none; color: #707037; padding: 0 0 0 15px; } .mbtTOC button:after { content: "\f022"; font-family: FontAwesome; position: relative; left: 10px; font-size: 20px; } |
Step4: Now again press " CTRL + F " and Search for " <data:post.body/> " and replace code with " <div id="post-toc"><data:post.body/></div> " then hit on "save theme"
Sterp 5 Now go to the post where you want to show a table of content and click on HTML view at the top and paste the below code.
| <div class="mbtTOC"> <button onclick="mbtToggle()">Contents</button> <ol id="mbtTOC"></ol> </div> |
Place the code at the end of all Your post.
| <script>mbtTOC();</script> |
How to add table of contents in to blogger post in mobile phone
Creating a table of content for blogger post on a mobile phone If you do not have a computer you can create a table of content on a mobile phone.
If you want to set up a table of content on a mobile phone, you need to download a keyboard called "Mobile "Hacker's
Keyboard" which can be used as a computer keyboard.
Keyboard" which can be used as a computer keyboard.
How to edit blogger html code in mobile phone
"Hacker's Keyboard"
An example can be seen in the picture below
0 Comments