How to Customize Table of Content in Median Ui

How to Customize Table of Content in Median Ui, How to Customize TOC in Median Ui, How to Customize Table of Content in Median Ui 1.3,


Hello Guy! Welcome to infinity blogger, today we are going to learn that how to customize the table of content in medium UI, I am not mentioning the version of median UI because both 1.3 and 1.4 work the same and their table of content are also the same.

What is the table of content?

The short form of a table of content is TOC. So I think many of you don't know that what is the table of content or TOC so don't worry let me explain, table of content is like a marking, it helps you to mark the major heading, heading, subheading, Miner reading. In short, you can mark the title or any Line or paragraph you want in different categories, so users can easily understand your concept.

Advantages of the table of content

To increase your SEO. You must have to use the table of content, table of content really helps you to increase your reach to the viewers it also makes your content more legend and unique. With the help of a table of content, your content is rank fast in Google search because Google bots can easily scroll on your page and learn that what is your content about. With the help of a table of content, they can easily identify that what's the topic of your content, which helps your post rank fast in the Google search engine.

Disadvantages of the table of content

In my view, there are no disadvantages in the table of content because in every way it's the perfect way to rank fast in the Google search engine. But in some cases, the table of the content doesn't match with your post page, so for that, I suggest you change your blogger template, or you can use a blogger template that has a default table of content like median UI.

How to customize a table of content in median UI

Hide the TOC on static pages

If you want to hide a table of content from static pages, then find and replace this code in edit HTML.

1. Find This Code In Edit HTML And Replace:
<b:include cond='data:view.isSingleItem and !data:view.isPreview' data='post' name='post-articleToc'/>
1. Replace With It
<b:include cond='data:view.isPost and !data:view.isPreview' data='post' name='post-articleToc'/>

2. Find This Code In Edit HTML And Replace:
<script>medianTOC();</script>
2. Replace With It:
<b:if cond='data:view.isPost'><script>medianTOC();</script></b:if>

Hide TOC only in certain posts

If you want to hide TOC only on certain pages or posts, then use this code. If you paste this code end of the post then the table of content will not appear on that page. You can also use this code on pages, paste this code end of the page, and then the table of content will not appear on that page.
If you want to permanently disable your table of content from your median UI blogger template, then paste this code below of ]]></b:skin>. It will permanently disable the table of contents from your Median UI blogger template.

// Add this code at the end of the post, page or in the theme, where you want to hide the ToC:
<style>.Blog .post-toc{display: none}</style>

Hides the TOC when the page loads and displays it when the TOC button is clicked

There is a Glitch in median UI that whenever you open a post in mobile or smartphone view, a table of content will pop up in the front of Post and hide the half of Post. And it's not good for users because whenever they come on your site this is one neat and clean interface but because the temple of content popping on the front of your post may sometimes irritate your viewers. Let's solve this problem we are going to make some changes after that table of content will only appear when you click on it without clicking on the table of content it will not appear.
To enable the function you have to change some of the codes below:

1. Find This Code In Edit HTML And Replace:
.Blog .post-tocContent{-webkit-transition:all .3s ease;transition:all .3s ease;max-height:0;overflow:hidden}
.Blog .toc-menu:checked + .post-toc .post-tocContent{max-height:1000vh}
1. Replace With It:
.Blog .post-tocContent{-webkit-transition:all .3s ease;transition:all .3s ease;max-height:1000vh;overflow:hidden}
.Blog .toc-menu:checked + .post-toc .post-tocContent{max-height:0}

info: The code above is located separately, its function is to change the ToC settings on the mobile display
2. Find This Code In Edit HTML And Replace: <input class='toc-menu hidden' id='offtoc-menu' type='checkbox'/> 2. Replace With It: <input class='toc-menu hidden' id='offtoc-menu' type='checkbox' checked='checked'/>

Permanently disable table of contents

If you want to permanently delete the table of contents from your Median UI blogger template then find and delete these Codes given below.
So that's it guys that's it for today, if you are facing any issues then just let me know in the Comment Box, I will replay as soon as possible..

<b:include cond='data:view.isSingleItem and !data:view.isPreview' data='post' name='post-articleToc'/>

<script>medianTOC();</script>
It's All Done Guys! If You Are Facing Any Issue Then Please Let Me Know In The Comment Box, I will Replay As Soon As Possible.