Table of Contents - плагин виджет содержание статьи для лучшего продвижения


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


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

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

    Виджет Table of Contents

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

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

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

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

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

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

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

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

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

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

          
    
    /*####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/> может встречаться в шаблоне несколько раз, нужно заменить каждый встречающийся на тег следующего содержания:

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

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

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

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

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

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

    Скриншот в помощь:
    виджет плагин содержание статьи пример 1


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

    <script>mbtTOC();</script>

    Второй скриншот в помощь:
    виджет плагин содержание статьи пример 2

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


    Поделиться

    Facebook TwitterGoogle+ Vkontakte

    Рекомендуем

    Table of Contents - плагин виджет содержание статьи для лучшего продвижения
    4/ 5
    Oleh

    23 Коммент.

    Оставить комментарий
    avatar
    Пепа Табакова
    марта 09, 2017 Этот комментарий был удален автором.
    avatar
    Пепа Табакова
    марта 09, 2017

    Почему у меня не получается?
    www.blogzablogove.com

    Ответить
    avatar
    Пепа Табакова
    марта 09, 2017 Этот комментарий был удален администратором блога.
    avatar
    Шаблоны для Blogger
    марта 09, 2017

    Вы точно сменили все встречающиеся в шаблоне теги: <data:post.body/> на
    <div id="post-toc"><data:post.body/></div>

    Ответить
    avatar
    Пепа Табакова
    марта 09, 2017

    Да, у меня два, сменила

    Ответить
    avatar
    Шаблоны для Blogger
    марта 09, 2017

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

    Ответить
    avatar
    viptransfer24
    июня 21, 2017

    Добрый день! Просмотрел html вдоль и поперек, не могу найти этот код !Использую ваш шаблон viena.Подскажите, пожалуйста, что мне делать!Спасибо!

    Ответить
    avatar
    viptransfer24
    июня 21, 2017

    т.е. вот этот код

    Ответить
    avatar
    viptransfer24
    июня 21, 2017

    Уже нашел!

    Ответить
    avatar
    Марк Корвин
    июня 21, 2017

    Хорошо, что разобрались, если возникнут вопросы пишите.
    И еще, html код в комментариях blogger не отображается, его нужно сперва конвертировать. Вскоре добавлю конвертер на сайт.

    Ответить
    avatar
    technic
    июля 22, 2017

    Добрый день, как данный плагин запустить в мобильной версии блога http://www.natjazhnye-potolki.pro

    Ответить
    avatar
    Марк Корвин
    июля 22, 2017

    Здравствуйте. Данный виджет работает и на мобильных устройствах. Судя по всему у вас включена стандартная мобильная версия блога, отключите ее в разделе Тема, найдите надпись "На мобильных" ниже кликните по колесику, в появившемся окне выберите: Нет, использовать обычную версию темы при просмотре блога на мобильных устройствах.
    Правда ваша тема (шаблон) не адаптирована под мобильные устройства, если хотите адаптировать обращайтесь.

    Ответить
    avatar
    technic
    июля 23, 2017

    Сколько будет стоить адаптация моего шаблона?

    Ответить
    avatar
    Марк Корвин
    июля 23, 2017

    Будет стоить 10$ моя почта shablonublogger@gmail.com

    Ответить
    avatar
    technic
    июля 23, 2017

    Она будет заточена под SEO и можно привести пример. Заранее спасибо за ответ

    Ответить
    avatar
    Марк Корвин
    июля 23, 2017

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

    Ответить
    avatar
    Максим Сафронов
    августа 05, 2017

    Здравствуйте! У меня весь код CSS появился в самом вверху, что сделал не так?

    Ответить
    avatar
    Марк Корвин
    августа 05, 2017

    Приветствую. Значит вставили его за пределами нужных тегов. Должен быть между skin или style

    Ответить
    avatar
    Максим Сафронов
    августа 05, 2017

    Вы написали перед ]]>, я так и сделал

    Ответить
    avatar
    Максим Сафронов
    августа 05, 2017

    Какой skin или style

    Ответить
    avatar
    Марк Корвин
    августа 06, 2017

    Если CSS поставили правильно, тогда другой код не там стоит. Я ставил на вашем шаблоне данный виджет, все работает.

    Ответить
    avatar
    Максим Сафронов
    августа 06, 2017

    Абсолютно все делаю как вы указали, уже 3 раза переделал - все равно получается вот - https://i.paste.pics/1X1LW.png

    Может из-за стрелочки, которую я обозначил в прямоугольник, но она у меня давно - еще с покупки у вас шаблона.

    Ответить
    avatar
    Максим Сафронов
    августа 06, 2017

    А если все убрать то вот эта стрелочка - https://i.paste.pics/1X1M5.png

    Ответить