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

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


    Коммент.

    BLOGGER: 6
    Loading...
    Имя

    Бесплатные шаблоны WordPress Блог Все для blogger Все для WordPress Графический дизайн Заказ сайта Заработок в интернете Инструменты для сайта Контакты Купить шаблон blogger Наши услуги Новичкам Оптимизация сайта Партнерки для сайтов Перевод статьи Плагины для WordPress Полезные сайты Полезные сервисы Полезные статьи Разделы сайта Сайты - блоги Шаблоны для Blogger Шаблоны для Joomla Шаблоны для PrestaShop Шаблоны для Ucoz Шаблоны на русском Шаблоны blogger 2016 Шаблоны blogger бесплатно Шаблоны blogger магазин Шаблоны Bootstrap 3 Шаблоны Magento best blogger templates
    false
    ltr
    item
    Шаблоны для сайтов и блогов: Table of Contents - плагин виджет содержание статьи для лучшего продвижения
    Table of Contents - плагин виджет содержание статьи для лучшего продвижения
    Установить, добавить на сайт или блог виджет \ плагин Table of Contents - содержание статьи.
    https://4.bp.blogspot.com/-rbSEP6LfgS8/WKwaddyFAkI/AAAAAAAAkIY/gpXo0FL8NSMieMP8FLx3KDNKiCFGlXlbwCLcB/s400/Table%2Bof%2BContents%2B-%2B%25D0%25BF%25D0%25BB%25D0%25B0%25D0%25B3%25D0%25B8%25D0%25BD%2B%25D0%25B2%25D0%25B8%25D0%25B4%25D0%25B6%25D0%25B5%25D1%2582%2B%25D1%2581%25D0%25BE%25D0%25B4%25D0%25B5%25D1%2580%25D0%25B6%25D0%25B0%25D0%25BD%25D0%25B8%25D0%25B5%2B%25D1%2581%25D1%2582%25D0%25B0%25D1%2582%25D1%258C%25D0%25B8.jpg
    https://4.bp.blogspot.com/-rbSEP6LfgS8/WKwaddyFAkI/AAAAAAAAkIY/gpXo0FL8NSMieMP8FLx3KDNKiCFGlXlbwCLcB/s72-c/Table%2Bof%2BContents%2B-%2B%25D0%25BF%25D0%25BB%25D0%25B0%25D0%25B3%25D0%25B8%25D0%25BD%2B%25D0%25B2%25D0%25B8%25D0%25B4%25D0%25B6%25D0%25B5%25D1%2582%2B%25D1%2581%25D0%25BE%25D0%25B4%25D0%25B5%25D1%2580%25D0%25B6%25D0%25B0%25D0%25BD%25D0%25B8%25D0%25B5%2B%25D1%2581%25D1%2582%25D0%25B0%25D1%2582%25D1%258C%25D0%25B8.jpg
    Шаблоны для сайтов и блогов
    http://www.shablonu-dlya-blogger.ru/2017/02/plagin-soderzhanie-statji.html
    http://www.shablonu-dlya-blogger.ru/
    http://www.shablonu-dlya-blogger.ru/
    http://www.shablonu-dlya-blogger.ru/2017/02/plagin-soderzhanie-statji.html
    true
    5286106991494805428
    UTF-8
    Похожих постов не найдено Отобразить все Читать дальше Ответить Отмена Удалить By Главная Страницы Пост. Отобразить все Рекомендуем Тег Архив Поиск Все посты По вашему запросу не найдено ни одного поста Вернуться на главную Воскресение Понедельник Вторник Среда Четверг Пятница Суббота Вс Пн Вт Ср Чт Пт Сб Января Февраль Март Аперль Май Июнь Июль Август Сентябрь Октябрь Ноябрь Декабрь Янв Фев Мар Апр Май Июнь Июль Авг Сен Окт Ноя Дек только что минуту назад $$1$$ мин. назад час назад $$1$$ час. назад Вчера $$1$$ дней тому назад $$1$$ недель тому назад более 5 недель Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy