Первое. Крайне желательно, чтобы вы понимали, что такое HTML и CSS.
Второе. Весь описанный в этой статье код основан на стандартных шаблонах из дизайнера шаблонов.
Если у вас шаблон сторонних разработчиков, скачанный из интернета, то код в нем может выглядеть по другому, и вам придется самостоятельно разбираться в нем.
Именно поэтому я рекомендую знать и понимать, что такое язык гипертекстовой разметки (HTML), каскадные таблицы стилей (CSS), и чуть-чуть про XML.
Третье. На всякий случай. Все изменения мы делаем на вкладке Дизайн – Изменить HTML. Устанавливаем галочку – Расширить шаблоны виджетов. Чтобы этот вопрос не поднимался в комментариях:).
Итак приступим.
Устанавливаем правильные теги заголовка h1
В шаблонах для Blogger заголовок блога всегда находится в теге h1. В предыдущей же статье мы выяснили, что это актуально для главной страницы, но не целесообразно для внутренних.
Поэтому мы заменим код, отвечающий за вывод заголовков таким образом, чтобы на главной странице блога заголовок находился в теге <h1>Заголовок блога</h1>. а на всех остальных страницах в обычном теге для текста <p>Заголовок блога на внутренних страницах</p>.
Сначала займемся стилями. Дело в том, что к любому элементу на странице применен стиль CSS, который отвечает за внешний вид элемента. Для этого элементу присваивается идентификатор, для которого потом и определяется стиль.
У заголовка стиль присвоен тегу h1, но мы же собираемся на внутренних страницах блога этот тег заменить на другой <p>. Именно другому тегу необходимо установить такой же стиль, как и тегу h1. Для этого мы должны найти стили, которые прописаны для h1 и продублировать их для тега <p>.
Первое, на что обращаю ваше внимание. Тегу <p> мы присвоим индетификатор ID: <p id=»zagolovok»>, и именно для id=»zagolovok мы будем дублировать стили.
Второе — мне пришлось ещё некоторые стили дописывать, возможно, вам это тоже понадобиться. В общем, начнем, в процессе все должно стать более понятно.
Находим в шаблоне это место. Не зависимо от шаблона оно у всех будет иметь, примерно, одинаковый вид.
Полностью дублируем код, который выделен у меня цветом. У вас он будет свой, зависит от внешнего оформления именно вашего шаблона. Мой брать не нужно. Просто копируем свой и вставляем ниже, меняем в первых строках идентификатор. Должно получиться так:
#zagolovok <
font: $(header. font);
color: $(header. text. color);
text-shadow: 0 0 $(title. shadow. spread) #000000;
margin:0;
#zagolovok a <
color: $(header. text. color);
text-decoration:none;
Что мы с вами сделали. Для нашего нового заголовка #zagolovok мы продублировали те стили, которые заданы для .Header h1. плюс обнулили поля: margin:0;. Может обнуление полей нужно не для всех шаблонов, но в моем случае, это было необходимо.
Изменяем тег заголовка h1, если в шапке используется только текст!
