How to add table of contents in blogger

Add Table Of Content in Blogger :

Hello Friend, welcome to our blog Digital Israel. Today, I would like to tell you how you can automatically add a table of contents to your blogger's blog if you want to learn how to stay with us. how to add table of contents in blogger we discuss in detail.

How to add table of contents in blogger is divided in 3 questions inn below:

Table of Contents?

Friends Table of Contents is a table that you can setup in any post or page of your blog. This will make it easier for your blog visitors to reach your site when they visit your site by using the Table of Contents and accessing any of the headings. The table of contents is used by every blogger, using it. The visitor is very comfortable. Or what you have done in your post, what you have done in your post.

 

Table of Contents What is required for a blog website?

It is very important to use the Table of Contents if you use the Table of Contents on your blog post or page so that your post will rank quickly in Google, or you may find that you can use the Table of Contents. Essential for the purpose of blog post, Table of Contents is an important part of blog post which you can use to make your blog post SEO friendly.

 

How to put Table of Contents on your blogger ?.

Add Table Of Content in Blogger - Dosto Table of Contents If you want to apply to Blogger then you need to use some HTML coding then you can display Table of Contents on your Blogger site. I will provide you or I will tell you just what you want or you will be able to use your blogger's Blog Table of Contents very easily.

How to add table of contents in blogger Step by step in below.

Add Table Of Content in Blogger Step By Step

I will give you a complete guide on how to make Add Table Of Content in Blogger, to complete this process you have to go through 5 steps so that you can successfully add Table Of Content to your blog.

 

Step 1. You need to login to Blogger's dashboard, click on the theme, open your theme edit in HTML, find your </head>, or Copy the given code or paste the code above </head>.

<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>

Step 2. Find ]]></b:skin> code in your Blogger blog and paste the below-given code just above.

.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. Uske bad aap ko is code ko Find karna hai. <data:post.body/> aap ke theme me jaha jaha par ye code hoga to simply aap is code ke jagah par maine jo aap ko niche code diya hai use replace kar dena hai ok.

<div id="post-toc"><data:post.body/></div>

Step 4. Niche diye gaye code ko copy kare or aap ne blob post ko edit HTML me open kare or aap apne first heading ke upper paste kare.

<div class="mbtTOC">

    <button onclick="mbtToggle()">Table Of Contents</button>

    <ul id="mbtTOC"></ul>

     </div>

Step 5. Niche diye gaye code ko copy kare or aap ne blob post sab se last yani post jaha par end ho raha hai waha par paste kare.

<script>mbtTOC();</script>

Blogger Custom robots.txt HTML Code

User-agent: Mediapartners-Google

 Disallow:

 User-agent:

 Disallow: /search

 Allow: /

 Sitemap: www.digitalisrail.com.com/feeds/posts/default?orderby=updated

 

I hope you guys understand that you have learned how to add Table of Contents {Add Table Of Content in Blogger par to your blogger, so friends, in today's blog post you will find only this much for your new blog post. sath thanks for visiting this blog. I tried to cover all question how to add table of contents in blogger .