Новая карта сайта на Blogger

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

Сегодня нашла работающий на данный момент (январь 2014 г.) вариант карты сайта для Blogger.



В итоге предыдущих редакций карты на сайте Я сама блоггер было опубликовано четыре статьи. 
Кратко пробежимся по ним.

1) Создаем карту сайта для Blogger. При создании использовался скрипт scriptabufarhan.googlecode.com. Летом 2013 работать перестал. Тогда я написала статью
2) Содержание блога - меняем код на работающий. Скрипт был также разработан Абу Фарханом. Использовался с его сайта в обход сервиса googlecode.com, так как там проводилась реорганизация.

3) Оглавление блога с графикой. Интересный вариант карты сайты с превьюшками статей, найденный в Интернете. Минус - нет разбивки по рубрикам. Поэтому я использовала скрипт для странички Все гаджеты для Blogger. (Инструкция - как сделать страницу с Перечнем всех записей по одному ярлыку).

4) Затем меня попросили дать вариант карты сайта без скрипта. Такой нашелся, но опять нет разбивки по ярлыкам/рубрикам.

В конце 2013 года мой друг сообщил мне, что все скрипты, разработанные Абу Фарханом, Google заблокировал почему-то. В итоге, многое перестало работать.

И сегодня хочу Вас порадовать новой картой сайта. Нашла код здесь.

Первоначально карта выглядела в серых тонах:

 Прямоугольные блоки со ссылками на статьи располагаются в три столбца. Есть разделения по рубрикам=ярлыкам. При наведении курсора мыши на название статьи,  меняется фон прямоугольника на темно-серый.

Мне такие цвета показались скучноваты и получилось вот что:

Впрочем, сами можете посмотреть Карту сайта в действии. По состоянию на октябрь 2017 г. в блоге вот эта карта сайта.

Итак, как добавить такой вариант содержания блога.

1. Создаем пустую новую страницы с названием "Карта сайта" и в режиме редактирования страницы HTML вставляем  код

 1) Код карты сайта в серых тонах:
   
    <script src="https://dl.dropboxusercontent.com/u/36169749/scripts/widgets/btnt-sitemap.js" type='text/javascript'></script> 
<script src="http://samasajt.blogspot.ru/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script> 
<style type="text/css"> 
.post-archive { width: 100%; padding: 20px 0; text-transform: capitalize; } 
.post-archive h4 { border-bottom: 2px solid #EEEEEE; color: #333333; font-size: 20px; margin: 0 0 10px 2px; padding: 0 0 10px; } 
.ct-columns-3 { -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-rule: none; -webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-rule: none; column-count: 3; column-gap: 10px; column-rule: none;} 
.ct-columns-3 p { padding: 5px 0px; -moz-column-break-inside: avoid; -webkit-column-break-inside: avoid; -o-column-break-inside: avoid; -ms-column-break-inside: avoid; column-break-inside: avoid; display: inline-block; width: 100%; } 
.ct-columns-3 p a { background: #fafafa; color: #333; display: block; border: 1px solid #FFFFFF; font-size: 14px; line-height: normal; outline: 1px solid #EEEEEE; padding: 10px 15px; -webkit-transition:all .25s ease-in-out; -moz-transition:all .25s ease-in-out; -o-transition:all .25s ease-in-out; transition:all .25s ease-in-out; } 
.ct-columns-3 p a:hover { background: #555; color: #fff; } 
@media screen and (max-width: 768px){ .ct-columns-3 { -moz-column-count: 1; -moz-column-gap: 0px; -moz-column-rule: none; -webkit-column-count: 1; -webkit-column-gap: 0px; -webkit-column-rule: none; column-count: 1; column-gap: 0px; column-rule: none; } } 
</style>


  2) Код карты сайта с моими настройками:

<script src="https://dl.dropboxusercontent.com/u/36169749/scripts/widgets/btnt-sitemap.js" type="text/javascript"></script> 
<script src="http://samasajt.blogspot.ru/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script> 
<style type="text/css"> 
.post-archive { width: 100%; padding: 20px 0; text-transform: capitalize; } 
.post-archive h4 { border-bottom: 2px solid #9966CC; color: #9933CC; font-size: 20px; margin: 0 0 10px 2px; padding: 0 0 10px; } 
.ct-columns-3 { -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-rule: none; -webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-rule: none; column-count: 3; column-gap: 10px; column-rule: none;} 
.ct-columns-3 p { padding: 5px 0px; -moz-column-break-inside: avoid; -webkit-column-break-inside: avoid; -o-column-break-inside: avoid; -ms-column-break-inside: avoid; column-break-inside: avoid; display: inline-block; width: 100%; } 
.ct-columns-3 p a { background: #fafafa; color: #333; display: block; border: 1px solid #CC99FF; font-size: 14px; line-height: normal; outline: 1px solid #EEEEEE; padding: 10px 15px; -webkit-transition:all .25s ease-in-out; -moz-transition:all .25s ease-in-out; -o-transition:all .25s ease-in-out; transition:all .25s ease-in-out; } 
.ct-columns-3 p a:hover { background: #9933CC; color: #fff; } 
@media screen and (max-width: 768px){ .ct-columns-3 { -moz-column-count: 1; -moz-column-gap: 0px; -moz-column-rule: none; -webkit-column-count: 1; -webkit-column-gap: 0px; -webkit-column-rule: none; column-count: 1; column-gap: 0px; column-rule: none; } } 
</style>

В обоих случаях нужно адрес блога заменить на свой.

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

В строке .post-archive h4 { border-bottom: 2px solid #9966CC; color: #9933CC; изменила 2 цвета: 

• #EEEEEE на #9966CC - цвет полосы разделителя между названием рубрики и блоками со ссылками;
• #333333 на #9933CC - цвет названия рубрики.

В строке .ct-columns-3 p a { background: #fafafa (; color: #333 (цвет ссылки на статью); display: block; border: 1px solid #CC99FF; font-size: 14px; line-height: normal; outline: 1px solid #EEEEEE; 
заменила только #FFFFFF (белый цвет) - на цвет #CC99FF (светлый сиреневый). Это цвет рамки блока со ссылками до наведения курсора.

И в строке .ct-columns-3 p a:hover { background: #9933CC; color: #fff; 
поменяла фон блоков со ссылками, который изменяется при наведении курсора мыши с темно-серого #555  на #9933CC (яркий сиреневый).

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

2. После того, как все настройки Вас устраивают, опубликуйте страницу.

P.S. Вы можете оставить свои отзывы о новой карте сайта ниже в комментариях.