Карта сайта для Blogger по датам постов и ярлыкам

05.09.2016

В сентябре 2016 года блоггеры вновь столкнулись с проблемой неработающего скрипта карты сайта (последний вариант был этот). 

Итак, ставим другой вариант карты сайта для Blogger по датам постов и ярлыкам.
Если честно, проблема с картой сайта уже изрядно потрепала нервы не одному автору блогов на платформе Blogger (и мне в том числе). Но русские не сдаются :) 

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


И еще нашла (источник) - как добавить в блог на Blogger карту сайта (или содержаниепо датам постов и ярлыкам.

! Перед всеми изменениями не забываем делать резервную копию блога


ВАРИАНТ 1. Вносить код этого содержания нужно в шаблон и на статичную страницу.
(если карта не работает - пробуйте ВАРИАНТ 2).



1. В настройках блога заходим в пункт Шаблон, нажимаем Изменить HTML.

2. В рамке с кодом шаблона ставим курсор, далее клавиши Ctrl+F.

3. В появившейся строке поиска вписываем ]]></b:skin>



4. Если Вы ранее устанавливали карту сайта по этой статье, то сначала удалите код старой карты.

   Затем перед ]]></b:skin> вставьте этот код:

/* Sitemap plugin By MyBloggerLab */
#bp_toc {
color: #666;
margin: 0 auto;
padding: 0;
border: 1px solid #d2d2d2;
float: left;
width: 100%;
}
span.toc-note {
display: none;
}
#bp_toc tr:nth-child(2n) {
background: #f5f5f5;
}
td.toc-entry-col1 a {
font-weight: bold;
font-size: 14px;
}
.toc-header-col1,
.toc-header-col2,
.toc-header-col3 {
background:#9E9E9E;
}
.toc-header-col1 {
padding: 10px;
width: 250px;
}
.toc-header-col2 {
padding: 10px;
width: 75px;
}
.toc-header-col3 {
padding: 10px;
width: 125px;
}
.toc-header-col1 a:link,
.toc-header-col1 a:visited,
.toc-header-col2 a:link,
.toc-header-col2 a:visited,
.toc-header-col3 a:link,
.toc-header-col3 a:visited {
font-size: 13px;
text-decoration: none;
color: #fff;
font-weight: 700;
letter-spacing: 0.5px;
}
.toc-header-col1 a:hover,
.toc-header-col2 a:hover,
.toc-header-col3 a:hover {
text-decoration: none;
}
.toc-entry-col1,
.toc-entry-col2,
.toc-entry-col3 {
padding: 5px;
padding-left: 5px;
font-size: 12px;
}
.toc-entry-col1 a,
.toc-entry-col2 a,
.toc-entry-col3 a {
color: #666;
font-size: 13px;
text-decoration: none
}
.toc-entry-col1 a:hover,
.toc-entry-col2 a:hover,
.toc-entry-col3 a:hover {
text-decoration:underline;
}
#bp_toc table {
width: 100%;
margin: 0 auto;
counter-reset: rowNumber;
}
.toc-entry-col1 {
counter-increment: rowNumber;
}
#bp_toc table tr td.toc-entry-col1:first-child::before {
content: counter(rowNumber);
min-width: 1em;
min-height: 3em;
float: left;
border-right: 1px solid #fff;
text-align: center;
padding: 0px 11px 1px 6px;
margin-right: 15px;
}
td.toc-entry-col2 {
text-align: center;
}


5. Нажмите Сохранить шаблон.

6. Далее переходим в настройках блога в пункт Страницы -> Создать страницу. 
(Можно отредактировать ранее созданную страницу для карты сайта или содержания - выбрать страницу->Изменить). 


В режиме редактирования HTML вставляем код:

<div id="bp_toc">
</div>
<script src='http://mybloggerlab.com/js/sitemap.js'  type="text/javascript"></script>
<script src="
samasajt.blogspot.ru/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>

Замените адрес моего блога на свой. Страницу сохраните (или обновите).



Демо работающей на данный момент карты сайта для Blogger по датам постов и ярлыкам смотрите на моей странице Содержание.

Основные цвета этой карты сайта серые. Но можно некоторые из них изменить под цвета своего блога.

Например, в приведенном выше коде карты (того, который вставляется в HTML шаблон блога) в строке № 14 есть возможность изменить фон горизонтальных строк в таблице карты сайта, т.к. по сути это таблица с тремя большими столбцами и горизонтальными строками.

Код цвета #f5f5f5 замените на свой. В статье Подбираем цвета для блога есть онлайн-генераторы цвета, которыми Вы можете воспользоваться.  



В строке № 23 определен цвет верхней части таблицы с картой сайта (где расположены заголовки Post Title, Post date, Labels). К сожалению, в коде автора нельзя поменять заголовки на русские.

А изменив значение кода в строке № 64 Вы сможете поменять цвет текста заголовков постов.

Поменяйте всего три цвета и внешний вид Вашего содержания блога преобразится, и не будет уже унылым и серым.

Вот что получилось у меня:




ВАРИАНТ 2. Вносить код этого содержания ТОЛЬКО на статичную страницу.

Внешний вид этой карты похож на ВАРИАНТ 1, но здесь еще вверху таблицы отображается заголовок "Displaying all ... Posts" (Отображение всех ... сообщений). На русский язык заголовок не перевести, т.к. изменения может вносить только автор кода.

Код данного содержания блога нужно скопировать и вставить в статичную страницу в режиме HTML (Отредактировать старую страницу оглавлением или создать новую). И нажать Обновить или Опубликовать.




КОД КАРТЫ САЙТА


<style scoped="" type="text/css"> #bp_toc {background:#008CDB;color:#666;margin:0 auto;padding:5px;} span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#FAFAFA;font-family:'Trebuchet MS';font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;} .toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;} .toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;} .toc-header-col3 {padding:10px;background-color:#f5f5f5;width:125px;} .toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:13px; text-decoration:none;color:#aaa;font-family:'Trebuchet MS';font-weight:700;letter-spacing: 0.5px;} .toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover { text-decoration:none;} .toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%} .toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;} .toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#e76e66;} #bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;} .toc-entry-col1 {counter-increment:rowNumber;} #bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;} td.toc-entry-col2 {background:#fafafa;} #comments {display:none;} </style> <div id="bp_toc" style="max-height:1200px;overflow:scroll;overflow-x:auto;"> </div> <script src='https://cdn.rawgit.com/BloggerSpice/Sitemap/master/sitemap.js' type='text/javascript'></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>



Настройка карты:
1) можно изменить высоту карты сайта в строке 


 <div id="bp_toc" style="max-height:1200px;overflow:scroll;overflow-x:auto;">

    - вместо 1200px поставьте свое значение.

2) изменить цвета заголовка таблицы и границ - значение background:#008CDB   (подобрать цвета для блога онлайн)

  Например:


P.S. Ну, и пожелаем всем нам, чтобы эти варианты карты сайта для Blogger по датам постов и ярлыкам работали долго и качественно...

29 комментариев:

  1. Привет, Мария. Так все карты блога хороши. Тоже почти все варианты перепробовала. Однако когда в блоге опубликовано уже более 150 постов, самые ранние в ней не отображаются. У меня так выпал весь 13 и часть 14 года. Всё пришлось потом руками прописывать. Понимала тему в форме и правда оказывается ввели лимит на отображение в 150 постов. Нет, старые тоже индексируются поисковиками если уже попали в индекс, но не отображаются в карте.
    Это можно даже видеть в Search Console Гугла в Файле индекса Sitemap
    Этот вариант карты очень интересный. Но если кол-во постов превысит лимит тоже самое будет.

    ОтветитьУдалить
    Ответы
    1. Здравствуйте, Вика. У меня на странице "Содержание" (http://samasajt.blogspot.ru/p/blog-page_5070.html) на сегодня с картой сайта, описанной выше, отображается 163 поста. Посмотрим, что будет дальше.

      Удалить
    2. Да, Мария посмотрела. А реально сколько статей. По-моему вы давно ведёте блог, должно больше быть. Или я ошибаюсь.

      Удалить
    3. На данный момент в моем блоге опубликовано 163 поста. Все они и отображаются в карте сайта.

      Удалить
  2. Здравствуйте, Мария. Полночи просидел, не пошла карта. Выбесила просто!!! Имею в виду карту сайта ))))).. Вообще наличие такой карты сайта имеет какое то значение для блога? Я решил в ручную прописывать карту при появлении новых статей. Потому что карты слетают одна за другой а потом время уходит на новые. Не знаете, почему со временем они перестают работать? Гугл выкобенивается?

    ОтветитьУдалить
    Ответы
    1. Привет Игорь. Ох и летят эти карты. Что верно то верно. Я тоже сама прописываю. надоело, ну что сделаешь. А эта слететь могла потому вероятнее всего потому, что после установки кода в режиме HTML нужно сразу нажать опубликовать, не переходя в обычный. Код ломается.
      Мария, ничего что я тут немного встроилась.

      Удалить
    2. Спасибо, Вика за Ваше активное участие в комментировании :)
      И полезный совет при создании карты сайта.

      Удалить
    3. Здравствуйте, Игорь. У меня как-то сразу эта карта сайта встала. Вот есть неплохая статья - зачем нужна карта сайта http://master-css.com/page/o-kartah-sajta
      А перестают работать по разным причинам: в один раз Google заблокировал аккаунт одного из авторов скрипта; в другой раз сами авторы могли просто удалить/отредактировать скрипт/код и т.п.; а сейчас переход на htpps все усложнил...

      Удалить
    4. Скорее всего я опять где то заблудился)) У Вас в статье написано:
      " Затем перед ]]> вставьте этот код:" А код не прописан.
      Если я правильно понял, то этот код нужно копировать со страницы - источника? Т.е. здесь: http://www.mybloggerlab.com/2016/08/how-to-add-html-sitemap-page-in-blogger.html

      Удалить
  3. У меня ыло несколько вариантов Карты и все работали кое-как. Но после 500 постов всё стало меняться и я не знаю принципа наличия статей на этой странице. Попробую вашу. Потом расскажу что у меня получилось. А вот виджет "Последние посты" просто исчез две недели назад - осталась только рамочка... Некоторое время в Мазиле ещё были картинки и тексты, но на этой неделе и там нету. У вас вижу очень красивый и большой вариант этого виджета. Попробую пройти по вашей ссылке.

    ОтветитьУдалить
  4. Этот комментарий был удален автором.

    ОтветитьУдалить
  5. Этот комментарий был удален автором.

    ОтветитьУдалить
  6. Этот комментарий был удален автором.

    ОтветитьУдалить
  7. Всё, я голову сломал. Не получается. Может остались какие то "хвосты" в html коде блога от старых карт. Хоть заново блог оформляй.

    ОтветитьУдалить
  8. Уже и этот не работает.Пол-дня потратила и без толку(((

    ОтветитьУдалить
  9. Непонятно почему сам Гугл не может сделать скрипт для карты блога.

    ОтветитьУдалить
  10. Все сделал, страница пустая и редактор ругается

    ОтветитьУдалить
    Ответы
    1. Здравствуйте. Редактор "ругается" из-за перехода Blogger на //https: Когда появится надпись красного цвета в редакторе, попробуйте 2 варианта: 1) нажать "отменить", 2)нажать "исправить". Если и это не поможет, попробуйте эту карту сайта по ярлыкам https://samasajt.blogspot.ru/2016/09/karta-sayta-dlya-blogger-po-yarlykam.html

      Удалить
  11. Уважаемые читатели! Добавила (20.10.16) в статью ВАРИАНТ 2 карты сайта. Работающий на эту дату!

    ОтветитьУдалить
  12. Установил. Работает. Цвета не менял так как подходит под фон блога ). Теперь главное не топать при входе на сайт что бы не слетела))

    ОтветитьУдалить
    Ответы
    1. Да-да, и сильно не дышать на экран :)

      Удалить
    2. Не то что на экран. Вообще стараться не дышать). И не топать)

      Удалить
  13. Доброго времени суток, Мария)
    Огромная Вам благодарность от начинающего блоггера за Вашу непростую работу над блогом.
    Пробовала все карты, но встала только последняя, которая у Вас в СОДЕРЖАНИИ.
    Но вот вопрос... Скрипт нужно обновлять будет, когда посты станут добавляться, или же он сработает автоматически, добавляя новые посты в карту?

    ОтветитьУдалить
    Ответы
    1. Здравствуйте. Автоматически посты будут добавляться в карту сайта после их публикации.

      Удалить


  14. Если сильно захотеть, то можно перевести :)

    ОтветитьУдалить
    Ответы
    1. Подскажите как вариант 2. У вас же получилось.

      Удалить
    2. Заголовки можно перевести в скрипте https://cdn.rawgit.com/BloggerSpice/Sitemap/master/sitemap.js

      Удалить
    3. Спасибо, всё получилось на русском языке.

      Удалить
  15. Маша получается вариант 2. LeninSW перевел заглавия на русский. Посмотрите https://www.leninsw.info/p/blog-page_17.html

    ОтветитьУдалить

Kwork.ru - услуги фрилансеров от 500 руб.

Загляните и на другие страницы ^