Как настроить цвета карты сайта по ярлыкам

18.09.2016

В предыдущей статье Карта сайта для Blogger по ярлыкам я Вам рассказывала - как установить такую карту в свой блог, а также предложила несколько вариантов ее цветового оформления с моими настройками. Сейчас покажу, как можно самому настроить цвета карты сайта по ярлыкам под Ваш блог.


Вот код карты сайта, с которым мы будем работать:



Если вдруг код не будет отображаться - пишите в комментариях.

Так она выглядит с моими настройками:



Сразу скажу, что я меняла не все цвета (серые оставила). Также не меняла цвет текста. Поэтому покажу только основные настройки, кардинально меняющие внешний вид карты.

Скриншоты даю с номерами строк кода, чтобы удобнее было искать. Я пользуюсь программой Notepad++, где также видны №№ строк, а сам код в статью вставляла при помощи сервиса.

О том, как выбрать цвета для блога, я писала в нескольких статьях
В коде карты менять будем только 6 символов после знака #, обозначающие код того или иного цвета.

Итак, поехали.

В строке 48 настраивается цвет узкой верхней горизонтальной полосы.



В строке 49 Вы можете настроить цвет фона под текстом "Загрузка, подождите...", который появляется при загрузке карты сайта. Также цвет в этой строке отвечает за фон всего левого столбца с ярлыками.



Если сделать цвет прямоугольного блока под выбранным ярлыком (который меняется в строке 87) более светлым, чем весь столбец слева, то эта полоса даже кажется немного объемной.



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



Вот так всего за 4 шага меняется внешний вид карты сайта для Blogger по ярлыкам

Конечно, вы можете пойти дальше - поменять шрифты, цвет текста и др., даже если Вы не изучали CSS также, как и я. Просто опытным путем меняем цвет, обновляем страницу и проверяем результат...

Вот, например, пока писала эту статью, настроила карту в зеленых тонах:



И даже кодом такой карты сайта с моими настройками могу поделиться :)
(Как установить карту смотрите в предыдущей статье).




Ну и пожелаем, чтобы эта карта устанавливалась и работала нормально еще долго-долго.

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

  1. Здравствуйте, Мария! Обязательно попробую сделать!

    ОтветитьУдалить
  2. Добрый вечер, Мария! Всё получилось! Вот только у меня вопрос - а куда подевались сообщения? Проверила, а некоторые ярлыки словно пустые, не дают результаты. Проверила сообщения - всё на месте, ярлыки в конце сообщения срабатывают верно. Заметила, что не показываются в списке сообщения, которым больше года. А как это убрать?
    http://geografo4ka.blogspot.ru/p/2.html

    ОтветитьУдалить
    Ответы
    1. Мария, Вы уж простите за назойливость, и ещё один вопрос: как сделать расстояние между строчками в правой колонке поменьше???

      Удалить

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