HTML, CSS в Blogspot. Изменяем шаблон.

 В прошлой статье научились как найти в шаблоне то, что хотим изменить. Сплющили там старушку Шапокляк. Ну так ей и надо. Вредная бабка, ничему хорошему не научит. Вернее научит, если делать все наоборот. Как в народной мудрости: не знаешь как поступить, спроси у женщины и сделай наоборот. Что то мы отвлеклись на женщин. Наверно тема более интересная чем HTML.
Итак, если Вы еще не познакомились с курсами Е. Попова, то щелкните по картинке. Вы, наверно, не стали дожидаться этой статьи и попробовали сами: нашли где и бум менять, но не знам как.
Строчку кода, отвечающую за элемент нашли. Напрашивается скопировать ее и поискать в шаблоне. Копируем: щелчок правой кн. по синей строчке, в меню выбираем Copy as HTML. Переходим в панель управления блогом, в ней слева в меню выбираем Шаблон, жмем в окне Изменить HTML. Нажатием Ctrl + F вызываем окно поиска, копируем в него ссылку (щелчек правой, из меню выбираем Вставить). Получаем результат: 0 из 0. Т. е. ни чего не найдено. ????

А этого элемента там и не должно быть. Что такое шаблон? Это то постоянное, неизменное, то что мы видим на всех страницах блога. Статей в блоге много, картинок еще больше.
Значит править нужно не в шаблоне, а в редакторе статей. Выбирайте у редактора режим HTML и там правьте. То же относится элементам страниц, которые меняются от страницы, к странице.

Сейчас выделим в правом окне строчку: .post-body img,.post-body .tr-caption-container, .Profile  скопируем и вставим в поиск. Мгновенно в окне появляется встроенная в  шаблон таблица стилей с этой строкой. Можем править, мы изменим правила сразу для 4 классов. Можно, конечно, .post-body img убрать из этой строки и написать для нее свои правила. Но мы изменим правила для вывода всех картинок во всех статьях.
Вообщем, Вы поняли алгоритм такой:

1. На странице блога щелкаем правой кнопкой по элементу, который хотим редактировать и выбираем в меню Посмотреть код элемента. Копируем эту строку: щелчек правой кн. по ней и в меню выбираем Copy as HTML.
2. Из панели управления переходим в Шаблон --> Изменить HTML. Жмем Ctrl+F. и в окно поиска вставляем скопированную строку. Если нашлась, правим. Не нашлась, значит не там ищем.

Для закрепления удалим из шаблона навигационную панель. Вообщем то она не мешает, но кое что мне не нравиться:

• В меню Еще есть строка Сообщить о нарушении. Какой нибудь козел/козлиха щелкнет по ней и доказывай, что ты не верблюд/верблюдиха.
• Щелчек по пункту Следующий блог унесет посетителя "неизвестно куда" и самое обидное, что это "неизвестно куда" займет вкладку Вашего блога.
• Зачем всем показывать адрес Вашей электронной почты? Кому нужно к Вам обратятся через комментарий или страницу Контакт.

Из полезного:

• Кнопка (фавикон), приводящая в аккаунт Blogger. Сделайте закладку в браузере на этот ресурс и попадете туда быстрей чем из блога.
• Поиск можно организовать в блоге.
• +g - это есть в блоге.
• Новое сообщение и Настроить - можно из аккаунта.

Удаляем! Щечек правой кнопкой по навигационной панели, выбираем Показать код элемента и получаем:

 Опа! Что то новенькое. Об этом потом.

Анализируем код. Найденная строка говорит, что элемент,  по которому я щелкнул находится в последней ячейке таблицы, состоящей из одной строки. Но мы решили удалить всю панель, а вся панель начинается с 2 строчки скриншота (id="navbar"). Проведите не спеша мышкой по коду снизу вверх и наблюдайте за выделениями на навигационной панеле.

Щелкаем по 2 строчке (id="navbar") правой кнопкой, выбираем Edit as HTML, переходим в панель CSS. В самом низу:
div { display: block; }, а нам нужно none. Исправляться не хочет. Ну и не надо: 1 - щелчек по + . В появившемся поле 2 вводим:
display: none; Все навигационного бара, как не было, а прежняя оказалась перечеркнутой(см низ скриншота).
Знаем как, не знаем где. Копируем селектор #navbar и идем в Шаблон --> Изменить HTML. Ctrl+F, вставляем скопированное. Поиск по нулям. Таких элементов в документе шаблона нет. Значит в блог он вставляется в виде виджета.


Заходим в Изменить HTML, прокручиваем его до встроенной таблице стилей и в любом ее месте печатаем код. Я напечатал в разделе /* Widgets. (серенький прямоугольник). Все навигационного бара как не было.
Можете возразить, а зачем мы искали в Изменить HTML, сразу бы напечатали код.
А если бы этот код там был? Дали бы загадку браузеру.
В современном конструкторе блога убрать навигационную панель можно проще: заходите в Дизайн, справа в верху Навигационная панель, жмем Изменить, в окне выбираем Выключить.
В этом случае панель пропадет, но ее место сохранится и будет залито фоном.
В нашем случае ее как бы и не было, тело блога приподнимется. На мой взгляд, смотрится лучше.
Внизу блога есть блок подписаться на Атом. Попробуйте убрать его сами.
До встречи.