Table Of Content For Blogger
table of content, blogger table of contents, table of content in blogger, how to add table of contents in blogger, table of contents for blogger
Add a Table Of Content In Blogger blog post to simplify your post structure and user-friendy. Table of Content in Blogger blog post makes it easy to read the post for the reader.
Hello, welcome to Lootzone, in this article I will show you how to add a table of content in Blogger. Adding a table of content in WordPress is very easy using some plugin. But it’s very difficult to add a table of content in Blogger as Blogger does not support Plugin.
Here, Today I will guide you step by step to add a table of content in Blogger. Before adding this to your blog you should know some benefits of having a table of content (TOC) in Blogger blog post.
Benefits of Table Of Content
Google always loves well detailed and well-structured blog posts and pages. And by adding a table of content in Blogger blog posts, you make your blog post well structured and user-friendly. add a table of content in blogger to get a better result. And if you add a TOC in your blog post, it will be structured and reader-friendly. Google may display jump to links in the Search Result Page, it’s very beneficial for webmasters and it can increase your CTR.
Step 1-: First login to your Blogger Blog in which you want to add a table of contents. Then click on Theme and go to edit HTML.
Click any where in the html and press ctrl+f then paste </head> in the search box and enter when, you locate the </head> then paste the below-given code just above the </head> (As Shown In Below Image).
Code:
<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[ 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>
Also Read-:Top 5 Adsense Alternative
Step 2-: Again Crtl+f and Search ]]></b:skin> code and paste the below-given code just above.(As Shown In Below Image)
.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 3-: It’s a very easy step. Find <data:post.body/> code in your theme and replace with this new code. If your theme has this code more than one time then you have to replace all with the new code.
<div id="post-toc"><data:post.body/></div>Step 4-: You have to add this HTML code on the blog post, in which you want to show table of contents. You have to add this code to every single post/pages you want to show a table of contents.
<div class="mbtTOC">
<button onclick="mbtToggle()">Table Of Contents</button>
<ul id="mbtTOC"></ul>
</div>Go to blog post and click on Edit then click on HTML. Add this below-given code where you want to show the TOC.
Step 5: Paste this code at the button of the blog post.
<script>mbtTOC();</script>Step 6: If you want to change the colour of any elements, then you can easily change it in simple steps. Find the default style and colour of these all code and change as per your choice. You can Change Font, Font Colour and Font Style.
- Change background color #FFFFEO
- Change font
- Change border color #f7f0b8
- Change font color #707037
- Change Anchor link color #0080FF
- Change the font size of anchor Links 15px
- Change the font size of TOC heading text 20px
- Know HTML code of colour here https://htmlcolorcodes.com/
![[₹2000 Big Loot]Kuku FM - Refer & Earn ₹10 For Per Refer| Redeem ₹50 | Earn Real Paytm Cash](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuqIkhx07FxTYIUt41x4r_Fo0Y9TinPmsNFuBZnejHZhny7vrfRiTRiVYF3dIy0Pgl1855MTCTkvn7hkdGZZg76l0cycWcTZ7giEoGwATFY8I2nIEZABGxGnOCpOOQCmY1jFzWT7wjLtA/w680/Untidff.png)
![[लूट लो] PhonePe Add Money – Flat ₹15-1000 Scratch Card Cashback](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpVh2I_RHSOI2C3dGIKOkRqKKz4usjCD1ZxGHu9GCJwvyBDjVijOGVM8IVlFuXvbxjEv5Kt1rxAAkwnrPdToyYzewyE6dtcOLRXsdjGLU1zMCOPceNbLvE_4ft32YpNea8PNmK8smHcZ4/w680/Untitled.jpg)
![[₹145 Proof] Zupee Gold APK- Get SignUp Bonus Upto Get ₹20 & Get ₹10/ Referral](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSKENkpgJxfbaRZ4sRHkzhebt49Tmt-KFi2urca7WL8U-3FtTfVL60BqBp3d1tM6rvQ01wHlFzl6X29mSYIN_fzLMEso0a3Rfrue_1WG3rJaIQpSZsUBmlUCNYdXgr2o8poh6Iob9KYbg/w680/aja.jpg)
![[Loot Lo] Gamezy Fantasy Cricket App ₹1000/Refer |Earn Paytm Cash](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw7yj8CI09M_qIR6SUB4U35pTYGf_l_-8mxRrbCYggmE7dMHqJO99D8Ab4eGe2oehKdIEmxtdF8jzuWbHlPtedKuHcrWKQpL2cPe9xpngsdNKKEfTLOpb8wGNsV-OKtWlYUVQr7B46hYE/w680/gamezy.png)