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

В сентябре 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 по датам постов и ярлыкам работали долго и качественно...