Георгиевская ленточка

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

08.01.2014

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

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



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

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

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

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

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

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

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

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

Мне такие цвета показались скучноваты и получилось вот что:
Впрочем, сами можете посмотреть Карту сайта в действии.

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

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. Вы можете оставить свои отзывы о новой карте сайта ниже в комментариях.

22 комментария:

  1. Мария, большое спасибо. Подробно, чётко, полезно. Сделала первый шаг. Вот что получилось http://unnetnizhn.blogspot.ru/p/blog-page_9.html С удовольствием приму конструктивную критику )))

    ОтветитьУдалить
    Ответы
    1. Пожалуйста, Татьяна. Почему-то не загрузилась у Вас карта... Нормально все было?

      Удалить
    2. Мария, странно .... я вижу карту. Можете заглянуть ещё раз http://unnetnizhn.blogspot.ru/p/blog-page_9.html

      Удалить
    3. Сегодня все нормально, Татьяна. Видимо, что-то у меня было.

      Удалить
  2. У меня и прошлый вариант вроде работает, но сделал на всякий случай себе и новый. Пусть будет две карты сайта у меня))))

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

    ОтветитьУдалить
  4. Давно пытаюсь поставить ЛЮБУЮ карту сайта, но все бессмысленно. Некоторые карты работают с чужой ссылкой на блог, но как только ставлю свою, ничего нет. Вы случайно не знаете почему?

    ОтветитьУдалить
    Ответы
    1. Здравствуйте, Илья! Спасибо Вам, что на своем блоге разместили код карты сайта со ссылкой на мой блог ))) Я не увидела у Вас гаджета "Ярлыки". Дело в том, что практически каждая карта сайта выстраивается по ярлыкам, присвоенным к каждой статье. Отсюда получаются рубрики=ярлыки.
      1) Для каждой статьи нужны ярлыки. О них я писала здесь: http://samasajt.blogspot.ru/2012/08/blogger.html
      2) Добавляете гаджет "Ярлыки".

      Удалить
    2. Безумно вам благодарен, все работает!

      Удалить
  5. Маша, большое спасибо, всё получилось.

    ОтветитьУдалить
  6. Мария, спасибо большое за доступные рекомендации и коды! Уже пару месяцев, как нашла Ваш блог, чему несказанно рада! Сразу же посоветовала его у себя http://zumietoya.blogspot.com/2013/12/blog-post_15.html Карту сайта сделала, все получилось, но как-то ярлыков у меня многовато, слишком перегруженная карта получилась... надо думать над усовершенствованием...

    ОтветитьУдалить
  7. Спасибо! Долго не могла установить себе Архив/Карту в блог - старые скрипты перестали работать, новые также не давали результата (как оказалось всё из-за настройки - блог был "закрытым", только для личного пользования - пока не "допилю" его)
    Сейчас открыла - красота! Даже лучше предыдущих)

    ОтветитьУдалить
    Ответы
    1. Мария, спасибо! Я сотни раз перепробывала все карты, в том числе и с вашего сайта "Я сама блогер". Мой блог был "закрытым", после изменения настроек все "Карты сайта" от Марии заработали. Урааа!

      Удалить
  8. Мария,добрый вечер!
    При установке карты Dr.Web выдает ,что в скрипте вирус. С чем это может быть связано?

    ОтветитьУдалить
  9. И ссыль на индейца вдовес к карте идёт :). Вы бы к моменту о смене цветов с серого на розовенький добавили инфу, как выковырять ссылку на того чёрненького в очечах.

    ОтветитьУдалить
  10. Спасибо, большое, Вы мне очень помогли!

    ОтветитьУдалить
  11. Я добавил карту своего блога http://le2x.blogspot.com/sitemap.xml в Яндекс, буду ждать результата. Платформа blogger автоматически генерирует карту сайта, зачем еще что-то городить?

    ОтветитьУдалить
  12. Здравствуйте, я добавила код на пустую страницу, но карты почему-то не видно :( http://markshtederyuliya.blogspot.com/p/blog-page_20.html

    ОтветитьУдалить
  13. Мария статья просто супер! А можно написать скрипт Вашего содержания,где аккордеон с синими кнопочками. Или написать в статье. Мой скайп trenerbiz8

    ОтветитьУдалить
    Ответы
    1. Я Вам отправила в сообщении ВКонтакте. Получилось получить код?

      Удалить
  14. Здравствуйте, Мария. Провозился сегодня пару часов со своим новым блогом в плане добавления карты сайта. Ничего не отображается. Адрес сайта заменил на свой. Гаджет "ярлыки" есть, сообщения все обозначены ярлыками. Однако пусто... Посмотрите блог, может Вы что то увидите профессиональным взглядом: https://prostokomp.blogspot.com.by/

    ОтветитьУдалить
    Ответы
    1. Здравствуйте, Игорь. Большое спасибо за слово "профессиональным". Очень приятно, хотя таковой себя не считаю :) С картами сайта проблема бесконечная, поэтому эмоционально назвала эту статью о последнем варианте работающей на данный момент карты - http://samasajt.blogspot.ru/2014/07/nenavizhu-kartu-sajta-dlja-blogger.html

      Удалить

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