Table of Contents: плагин, виджет содержание статьи

Приветствую друзья, давненько на сайте не публиковалось чего-то стоящего и интересного, что могло бы помочь продвинуть сайт в поисковых системах. Сегодня мы это исправим.

Важно!!! Скрипт плагина подходит для всех платформ, например Blogger, WordPress, Joomla и др..

Думаю каждый время от времени посещает сайт Википедии. С первого взгляда ничего необычного, сайт энциклопедии да и все. Все верно, это обычный сайт, но в его публикациях есть плагин, который отображает структуру публикаций и тем самым помогает читателю лучше понять о чем они и выбрать нужный раздел. Этот плагин называется ToC - Table of Contents - таблица содержания контента или просто содержание. В общем перед основной частью текста отображается таблица с основными разделами статьи, кликнув по названию нужного раздела браузер мгновенно выдает нам этот раздел. Демо плагина можете увидеть на этой странице.

Подобная организация статьи весьма полезно сказывается на ее продвижении в поисковых системах. По-этому не стоит упускать возможность оформления постов с помощью этого виджета.

Виджет Table of Contents

Виджет, который мы предлагаем вам установить является автоматическим решением, которое поможет забыть об утомительном, время затратном и трудоемком процессе составления содержания для длинных постов. Этот виджет автоматически создает удобное оглавления статьи с их молниеносным отображением. К тому же он создан на чистом коде JavaScript и для его работы не требуется подключения к библиотекам Jquery, это в свою очередь позволит странице загружаться быстрее. И конечно все это индексируется поисковыми роботами.

Доказательство того, что это действительно важно, для поисковиков можно понять из того, что после индексации статьи в сниппете появляется место в котором указывается ярлык "Перейти к прочтению" с ссылкой на заголовок самого важного по мнению робота раздела статьи. В общем крутая вещь.

Больше полезных виджетов

Как работает виджет Table of Contents

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

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

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

Сейчас перечислим особенности виджета:

• Создан на чистом JavaScript - всего 10 строк
• Легкий и быстрый
• SEO дружественный
• Добавляет уникальный идентификатор для каждой секции статьи отдельно
• Создает упорядоченный список
• Включает кнопку отображения содержания (спрятать или показать)
• Показывает выбранный раздел
• Легко устанавливаемый
• Адаптивный

Как установить виджет Table of Contents в блог на blogger

Друзья, как я уже упоминал выше виджет подходит не только для блоггер, но и для сайтов на других движках. Но в этом разделе я покажу, как установить виджет именно на blogger.

1. Зайдите в панель управления, раздел "Шаблон".
2. Сохраните резервную копию шаблона на всякий случай.
3. Кликните по кнопке Изменить HTML
4. Перед закрывающим тегом </head> добавьте следующий код:

HTML       

<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[           
//*************TOC plugin by MyBloggerTricks.com           
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>

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

  5. Следующим делом найдите в шаблоне тег: ]]></b:skin> и перед ним добавьте код:

CSS      

/*####Automatic TOC Plugin by MyBloggerTricks####*/          
.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;}
     

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

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

7. Теперь сохраните шаблон.

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

Каждый раз когда нужно будет добавить виджет содержание статьи для определенного поста следуйте этим указаниям.

1) Расположение виджета в посте.
Лучше всего добавлять виджет после первого абзаца статьи. Для этого в редакторе сообщения переключитесь на вкладку HTML и вставьте следующий код:

HTML<div class="mbtTOC"> 
    <button onclick="mbtToggle()">Содержание</button> 
    <ol id="mbtTOC"></ol> 
    </div>

Скриншот в помощь:

2) Активация плагина.
Чтобы плагин заработал и начал отображаться в статье, нужно на той же вкладке HTML в самом конце статьи добавить код:

JS<script>mbtTOC();</script>

Второй скриншот в помощь:

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

Mark Korvin 2/21/2017 30 Коммент.

Поделиться в социальных сетях:

Facebook Vkontakte

Рекомендуем