Custom table of contents not showing properly in breakpoint

[mentalizzz]

I am creating table of contents using this css code that I put in Site HTML and in between head

Code: Select all

<style>
#toc_container {
    background: transparent none repeat scroll 0 0;
    border: 0px solid #aaa;
    display: table;
    line-height: 1.8;
    font-size: 16px;
    width: auto;
}

.toc_title {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}

#toc_container li, #toc_container ul, #toc_container ul li{
    list-style: outside none none !important;
}
</style>

And then to make that css code above to work I have to use additional HTML code using HTML object in a page. The HTML code is just like this belo.

Code: Select all

<div id="toc_container">
<p class="toc_title">Daftar Isi</p>
<ul class="toc_list">
  <li><a href="#wb_Text28" style="text-decoration: none;">1. Arti Tenaga Dalam dan Jenis Energi Pembentuknya </a>
</li>
<li><a href="#wb_Text29" style="text-decoration: none;">2. Ciri-Ciri Tenaga Dalam Modern</a></li>
<li><a href="#wb_Text30" style="text-decoration: none;">3. Manfaat Dan Materi Pelatihan Tenaga Dalam Modern</a></li>
<li><a href="#wb_Text31" style="text-decoration: none;">4. Paket dan Biaya Pelatihan Tenaga Dalam Modern</a></li>
<li><a href="#wb_Text32" style="text-decoration: none;">5. Kumpulan Artikel Tenaga Dalam Dan Artikel Spiritual</a></li>
</ul>
</div>

Since my website completely using layout grids, so I tried to drag the HTML object to layout grid and then insert the above HTML code but nothing shows up. So I try to use floating layer and this time the table of contents works perfectly. I know layer is not responsive so I created breakpoints (320px until 1280px). After I previewed the result was good in every breakpoints except 320px. And also when I previewed using responsive mode, below 480px screen width, the table of contents became ruin. The example is below.



How to fix this so it will looks good in every breakpoints and also responsive when the browser manually resized?

[Pablo]

First note that I cannot give support on custom code. The code will be published "AS IS".
So, if it does not work then either the code is invalid or it conflicts with other code on the page.

But it's important to know that a layout grid resets the font size to zero (to make sure white spaces do not affect the layout), so all your styles should have a font-size otherwise the code will not be visible.

[mentalizzz]

First note that I cannot give support on custom code. The code will be published "AS IS".
So, if it does not work then either the code is invalid or it conflicts with other code on the page.

But it's important to know that a layout grid resets the font size to zero (to make sure white spaces do not affect the layout), so all your styles should have a font-size otherwise the code will not be visible.

Okay Pablo thank you so much. Hopefully you can add Table of Contents object later on (next update or in the near future) because Wordpress and Google site already have this feature. Because not only table of contents will make our website user friendly but also good for SEO.

[Pablo]

I am not sure why you need custom HTML for this?
Can't you just use standard text? or a table?

[mentalizzz]

I am not sure why you need custom HTML for this?
Can't you just use standard text? or a table?

I already done that Pablo. Please check my website below.

https://www.energi-positif.net/tenaga_dalam.htm

I have done it beautifully with this great software. But it is using only ordinary text and bookmark. While my website "visually" already user friendly but in the eye of Google it is not. Google only sees my table of contents as ordinary hyperlink text. But the bookmark object is considered by Google as "can not be indexed" object. Table of contents is super important for website that presenting long article that has thousand of words in it. Because it is easier for Google to know the structure of that long article. If I am using bookmark object it will creates hyperlink to that important part of the article. Since bookmark object is can not be indexed so that important part of that article will also considered by Google as "not so" or even "not" important. For our information Table of Contents is the part of Google's ranking factor.

So I hope you can consider my suggestion, so in the future this powerful software can have table of contents object using the global toc code. In this way it will support the website that mainly and regularly posting articles.

[crispy68]

Sorry, but I'm a bit confused. Isn't a Table of Contents simply headings with links utilizing html unordered lists (UL) to other spots on the page or other pages? They are just links. There is nothing any more special about them than bookmarks (which are links). In looking online, I find the same thing. They are bookmarks or "anchors" to other sections. If you go to Wikipedia and search anything, there is a simple table of contents that appears at the top. These are just simple bookmarks.

See here for more info also from the W3C: link They have their own table of contents which are simple bookmarks.

Also, Google doesn't index the anchor link itself but it does index your entire page. Once it has indexed your page that contains named anchors, it has also automatically indexed your named anchors. At its own discretion they may show a named anchor under a search result snippet if the named anchor is relevant to the search. To have this happen the page should also have some sort of link to the named anchors which is what would be in your table of contents.

[Pablo]

I agree with crispy68.

The code you are trying to insert is just a list of bookmarks. You can already create this with the standard text object.

[mentalizzz]

Sorry, but I'm a bit confused. Isn't a Table of Contents simply headings with links utilizing html unordered lists (UL) to other spots on the page or other pages? They are just links. There is nothing any more special about them than bookmarks (which are links). In looking online, I find the same thing. They are bookmarks or "anchors" to other sections. If you go to Wikipedia and search anything, there is a simple table of contents that appears at the top. These are just simple bookmarks.

See here for more info also from the W3C: link They have their own table of contents which are simple bookmarks.

Also, Google doesn't index the anchor link itself but it does index your entire page. Once it has indexed your page that contains named anchors, it has also automatically indexed your named anchors. At its own discretion they may show a named anchor under a search result snippet if the named anchor is relevant to the search. To have this happen the page should also have some sort of link to the named anchors which is what would be in your table of contents.

Sorry crispy68 they are not just ordinary links. And what you saw in Wikipedia and W3, still, in the forms of table of contents. Yes visually that table of contents works like bookmark but if you look closely from both website (code structure), both website using "toc" code and you can not find "bookmark" code. TOC code is used globally to help search engine to know exactly the A to Z structure of a page. After Google knows the structure then Google finally will dive in to the content and finally the whole content. In this way you can ask Google to create the sitelink of that page on Google search engine result. Bookmark is for visitor of the website but not for Google. Bookmark can not provide Google about the page structure.

And also about snippet, it's irrelevant with Table of Contents. You can not ask Google to snippet your page on its search engine result even if your page content is relevant. Because as long as your one page is in high quality and represent what user needs then Google will give you that snippet. And sometimes no need anchor or bookmark whatsoever. But Table of Contents (toc code) can help us to ask Google to always show this page structure based on our request of what in The Table of Contents when user search the requested relevant keyword in Google search. When a page of website have Table of Contents, Google will prioritize that page than the other website which doesn't.

We can make a beautiful website but if it is not "Google friendly", not showing up in the first page of Google search, what's the point of making it? Unless that beautiful website only for show or maybe the owner of that website doesn't care about making money online from that website, or to attract new customers and clients (that's another story).

[mentalizzz]

For example if I search on Google for the keyword "Belajar Tenaga Dalam" from my PC, my very simple website is showed by Google on the first page. And thanks to GOD even my very simple website manage to beat big websites and also Wikipedia for that keyword. And interestingly, Google shows the word "Daftar Isi" in the description. "Daftar Isi" is Indonesian language for "Table of Contents".



Which means Google knew that I have table of contents in that page which I made it from just simple text and bookmark and not from toc code structure. Google will think this table of contents of mine is important but is not build using toc structure. Instead of giving my page a good site/page link structure on Google search. Google put the word "Daftar Isi" in the description. And that word does not tell user what is in that "Daftar Isi" or "Table of Contents".

Imagine if this software has Table of Contents object which is build using toc code, maybe my website will get number 1 position on the first page of Google search result . This is for SEO For the sake of SEO

[crispy68]

Imagine if this software has Table of Contents object which is build using toc code

You keep mentioning using 'toc' code. Can you provide an example of what this code looks like?

Sorry crispy68 they are not just ordinary links.

Please provide an example otherwise.

both website using "toc" code and you can not find "bookmark" code.

Bookmarks are simply anchor tags. If you give a section of code a name (ex: Christmas) and you use a anchor link #Christmas, this is a bookmark (anchor) link.

If you go to wikipedia and search for Santa Claus you will see a table of contents. If you view the code for the TOC, you see the following:

<ul>
<li class="toclevel-1 tocsection-1"><a href="#Predecessor_figures"><span class="tocnumber">1</span> <span class="toctext">Predecessor figures</span></a>
<ul>
<li class="toclevel-2 tocsection-2"><a href="#Saint_Nicholas"><span class="tocnumber">1.1</span> <span class="toctext">Saint Nicholas</span></a></li>

You will notice the link to the section for Saint Nicholas is simply #Saint_Nicholas. This is an anchor link. When clicked it jumps to the section that has an anchor name of Saint_Nicholas. Same as a bookmark does. It's just the ID name of that section:

<h3><span class="mw-headline" id="Saint_Nicholas">Saint Nicholas</span></h3>
<div role="note" class="hatnote navigation-not-searchable">Main article: <a href="/wiki/Saint_Nicholas" title="Saint Nicholas">Saint Nicholas</a></div>

Notice the ID above with the same name matches the anchor link.

Based on everything I've looked at including working examples of table of contents, the code is simply html code using UL and LI (list items) with anchor tags. The fact yours is showing up without using 'toc' code is example that it does work.

[mentalizzz]

Code: Select all

    #toc_container {
    background: #f9f9f9 none repeat scroll 0 0;
    border: 1px solid #aaa;
    display: table;
    font-size: 95%;
    margin-bottom: 1em;
    padding: 20px;
    width: auto;
}

.toc_title {
    font-weight: 700;
    text-align: center;
}

#toc_container li, #toc_container ul, #toc_container ul li{
    list-style: outside none none !important;
}
 

The one above is the toc css code and below the toc html code

Code: Select all

  <div id="toc_container">
<p class="toc_title">Contents</p>
<ul class="toc_list">
  <li><a href="#First_Point_Header">1 First Point Header</a>
  <ul>
    <li><a href="#First_Sub_Point_1">1.1 First Sub Point 1</a></li>
    <li><a href="#First_Sub_Point_2">1.2 First Sub Point 2</a></li>
  </ul>
</li>
<li><a href="#Second_Point_Header">2 Second Point Header</a></li>
<li><a href="#Third_Point_Header">3 Third Point Header</a></li>
</ul>
</div>
 

And then assign the "id" parameter to heading tags

Code: Select all

<h2 id="First_Point_Header">First Point Header</h2>

I got this code from https://www.tipsandtricks-hq.com/simpl ... de-9217

And Google Sites has its own toc and the code example in the link below
http://www.goopal.org/google-sites-htm ... SIWYG-Menu

[crispy68]

#toc_container is just the ID name they gave to the section. You can do the same by changing the ID of the text object or layer or layout grid. This isn't special code. Like we've said before, you can create the same thing in WB. I'm also not aware that the ID's or Classes have to begin with 'toc'. I haven't read anywhere that they have to. I think this has more to do with making descriptive ID's and classes when viewing the code rather than an actual requirement.

[mentalizzz]

#toc_container is just the ID name they gave to the section. You can do the same by changing the ID of the text object or layer or layout grid. This isn't special code. Like we've said before, you can create the same thing in WB.

Yes you are true crispy68 I already changed the id the table of contents and it's works. My question from the beginning was, how to make this toc code works in layout grid? Or if not that in layer? Is there additional code or something? But Pablo said can not provide answer regarding spesific custom code. That I understand and accept it

Thank you so much Pablo and crispy68

[crispy68]

If you are adamant about using 'toc', why not simply change the layout grid ID to 'toc_container'? If you use a heading object you can change its ID to 'toc_title' and then insert the text boxes inside that contain your links to the sections?

However, keep in mind I don't believe ID's or Class names affect SEO in any way. So whether you use #toc_container or #fried_pickles as your table of contents ID, it wont make any difference.

[mentalizzz]

If you are adamant about using 'toc', why not simply change the layout grid ID to 'toc_container'? If you use a heading object you can change its ID to 'toc_title' and then insert the text boxes inside that contain your links to the sections?

However, keep in mind I don't believe ID's or Class names affect SEO in any way. So whether you use #toc_container or #fried_pickles as your table of contents ID, it wont make any difference.

Interesting idea from you. Which means I can just focus on the HTML code without adding custom css? And the layout grid only fill with ordinary text and after that I will put the custom HTML code in the custom Page HTML section? And in this way no need to use HTML object inside the layout grid that will ruining the function of the layout grid itself?