Как добавить в блог на Blogger автоматический виджет Содержание

За окном уже почти 2026, а я все еще считаю, что плагин "Содержание статьи" один из лучших SEO инструментов, принимающий участие в структуре публикаций. 

Виджет «Table of content» поможет структурировать статью и, таким образом, облегчит взаимодействие пользователя с материалом. Кроме того, содержание создаёт быстрые ссылки в поиске Google, и тем самым увеличивает CTR (кликабельность), проще говоря — сайт будет получать больше посещений из поиска.

Как работает виджет «Содержание»

Предлагаемый виджет будет включать только те заголовки, которые оформлены с помощью тега H2, а не как в Википедии. Википедия — это огромная энциклопедия, и вряд ли кто-то в Blogger захочет делать что-то подобное, поэтому для простоты и удобства лучше выделять только самые важные заголовки.

 
Лучше всего добавлять виджет содержания для длинных постов, как минимум с тремя заголовками H2.

Особенности плагина для отображения содержания статьи

Теперь перечислим функции виджета:

1. Создан на чистом JavaScript — всего 18 строк кода
2. Лёгкий и быстрый
3. Автозапуск
4. SEO-дружественный
5. Добавляет уникальный идентификатор для каждого раздела статьи
6. Создаёт упорядоченный список
7. Включает кнопку для отображения содержания (показ/скрытие)
8. Показывает выбранный раздел
9. Прост в установке
10. Адаптивный для мобильных устройств

Как установить виджет «Содержание» в блог на Blogger

• Перейдите в панель управления, раздел «Тема».
• Сделайте резервную копию шаблона на всякий случай.
• Нажмите на кнопку Редактировать HTML.
• Перед закрывающим тегом  </head> вставьте следующий код:

JS <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <script type="text/javascript"> //<![CDATA[ function generateTOC() { const content = document.getElementById("post-content"); const headings = content.getElementsByTagName("h2"); const toc = document.getElementById("toc-list"); for (let i = 0; i < headings.length; i++) { const heading = headings[i]; const id = "section-" + i; heading.setAttribute("id", id); const listItem = document.createElement("li"); const link = document.createElement("a"); link.setAttribute("href", "#" + id); link.textContent = heading.textContent; listItem.appendChild(link); toc.appendChild(listItem); } } function toggleTOC() { const toc = document.getElementById("toc-list"); toc.style.display = (toc.style.display === "none") ? "block" : "none"; } window.onload = generateTOC; //]]> </script>

Далее найдите тег    ]]></b:skin>  и добавьте CSS-код после него:

CSS<style> .toc-container { background: #f1f1f1; border: 1px solid #ccc; padding: 15px; margin: 30px 0; border-radius: 6px; font-family: sans-serif; } .toc-toggle { background-color: #007acc; color: white; border: none; padding: 8px 12px; border-radius: 4px; cursor: pointer; font-size: 15px; margin-bottom: 10px; } .toc-toggle:hover { background-color: #005a99; } #toc-list { list-style-type: decimal; padding-left: 20px; margin: 0; } #toc-list li { margin: 5px 0; } #toc-list li a { text-decoration: none; color: #007acc; } #toc-list li a:hover { color: #005a99; } </style>

И, наконец, последний шаг. Найдите тег  <data:post.body/>  — он может встречаться несколько раз в шаблоне. Нужно заменить каждое его вхождение на следующий код:

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

Сохраните изменения.

Активация виджета «Содержание статьи» в постах

Лучше всего добавлять виджет после первого абзаца статьи (откройте пост и переключите редактор в HTML), либо просто добавьте код в боковую панель как обычный HTML-виджет:

HTML<div class="toc-container"> <button onclick="toggleTOC()" class="toc-toggle"> <i class="fa fa-list-ul"></i> Содержание </button> <ol id="toc-list"></ol> </div>

Теперь опубликуйте статью и наслаждайтесь результатом.

Видео инструкция