Давай разберёмся, как изменить CSS стили в шаблоне на Blogger
Маленькая история: Вчера в 3 часа ночи я чуть не поседел. Я просто хотел сделать заголовок оранжевым. Просто. Оранжевым. Но вместо этого у меня съехал сайдбар (вместе с моей крышей, потому что это произошло на Проде), пропали картинки, а футер улетел куда-то в космос.
Blogger - удивительная штука. Он вроде бы простой, как палка, но стоит захотеть чуть большего, чем стандартный шаблон "Ромашка", как ты оказываешься в аду из скобок и непонятных символов.
Я не программист. Если ты покажешь мне чистый код, я, скорее всего, упаду в обморок. Но методом "тыка", боли и сотен обновлений страницы я нашел 5 способов в этой системе, куда можно впихнуть красивые CSS стили и ничего (почти) не сломать.
Расставил для тебя способы от "легальных" до "варварских". (За ⚔️ варварские тебе ничего не будет)
1. Способ 👶. Меняем CSS стили через Дизайнер тем
Это единственный способ, который Google одобряет официально (шутка, ему вообще всё равно, как ты будешь добавлять CSS стили на свой блог). Если ты боишься кода до дрожи в коленках - тебе сюда. Мы меняем CSS стили Blogger через встроенное окошко. Оно маленькое, неудобное, но безопасное.
Где находится этот Дизайнер тем: Заходишь в панель управления: Жми Тема, в открывшейся вкладке - Настроить
Как редактировать CSS стили в дизайнере тем: После нажатия Настроить откроется окно редактирования элементов сайта. Ты с лёгкостью можешь отредактировать: Фон, Расширенные, Гаджеты.
Чтобы сохранить все изменения, которые ты сделал, нажми на дискету в правом нижнем углу. Если тебе не понравилось то, что ты насоздавал - нажми отмену. Находится там же возле дискеты. Но если ты уже сохранил стили, отмена не поможет - жми Отменить расширенные изменения, эта функция находится снизу под редактором стилей.
Вносим свои стили в шаблон Blogger: Для того чтобы внести свои стили, нужно жмякнуть Тема, далее Настроить, потом Расширенные, выбери из списка Добавить CSS. Внеси свои стили и нажми на дискету. Всё, иди проверяй. Как видишь, сложного ничего нет.
Вот тебе CSS стили для H1, из-за которых у меня была бессонная ночь. Он полностью доработан и можешь использовать в своих целях.
/* Стиль H1: Дерзкий, с тенью, но без КАПСА */
h1 {
font-size: 36px !important;
line-height: 1.2 !important;
font-weight: 900 !important;
color: #ff3300 !important;
/* ВОТ ЗДЕСЬ ИЗМЕНЕНИЕ: */
text-transform: none !important; /* Отключаем капс, буквы будут нормальными */
text-align: center;
letter-spacing: -1px;
text-shadow:
2px 2px 0px #000000,
4px 4px 0px rgba(0,0,0,0.2);
margin: 15px 0 20px 0;
}2. Способ. 👨💻 Добавление CSS стилей через правку HTML шаблона
Добро пожаловать во взрослый мир. Здесь мы редактируем CSS через HTML шаблона. Это сердце твоего блога.
Ты заходишь в редактор кода Тема ▶ Изменить HTML.
<b:skinПосредине кода ставишь курсор мышки, нажми Ctrl+F (или Cmd+F на Маке) и вбей в поиск <b:skin. Жми Enter. Ты увидишь много CSS стилей, спускаешься вниз до ]]></b:skin>.
<b:skin><![CDATA[
... много-много строчек непонятных CSS code ...
]]></b:skin>
Это граница между стилями и самим сайтом, пишешь свой код ПЕРЕД ней. В правом верхнем углу жми на дискету для сохранения изменений. Всё, CSS стили в шаблон Blogger добавлены.
Почему это круто: Код загружается мгновенно. Браузер "глотает" его вместе с темой. Это самый правильный, профессиональный путь.
Главный страх: Одно неверное движение, случайно удаленная скобка } - и твой красивый блог превращается в набор развалин.
3. Способ. Изменение CSS стилей в шаблоне Блогспот через условные теги b:if
Представь, ты хочешь сделать так: на Главной боковая колонка прозрачная, а когда человек открывает статью - бац! И она становится белой (чтобы текст лучше читался). Обычный CSS тут бессилен, он красит всё подряд.
Тут мы достаем секретное оружие - условия b:if. Мы говорим шаблону: "Эй, примени этот стиль, ТОЛЬКО ЕСЛИ читатель открыл пост".
Куда это вставлять?
В HTML редактор шаблона (Тема ▶ Изменить HTML).
Нажми CTRL+F и найди закрывающий тег ]]></b:skin>. Вставляй свой код ПРЯМО ЗА НИМ. Это самое надежное место.
Пример CSS стилей через условные теги b:if
Ниже показан пример кода, используемый через условные теги b:if для статей. Что мы хотим сказать браузеру этим кодом: "Эй, если мы находимся внутри статьи (item), найди блок с классом .flex-col и покрась его фон в белый. А на остальных страницах не трогай".
<b:if cond='data:blog.pageType == "item"'>
<style>
/* Красим только конкретный блок */
.flex-col {
background: #ffffff !important; /* Белый фон */
}
</style>
</b:if>
Как перекрасить один блок (и не сломать остальные)
Частый вопрос: "А если я задам новый цвет блоку, его старые настройки слетят?"
Нет! Представь, что ты надел на телефон новый чехол. Телефон остался тем же - он звонит, работает. Ты изменил только его внешний вид.
Так и здесь. Допустим, ты хочешь покрасить боковую колонку (.flex-col) в белый цвет только на страницах "Контакты".
<b:if cond='data:blog.pageType == "static_page"'>
<style>
.flex-col {
background: #ffffff !important; /* Меняем ТОЛЬКО фон */
/* Всё остальное (размеры, отступы) останется родным */
}
</style>
</b:if>
📋 Шпаргалка условий от LeVa
Cобрал для тебя список команд, которыми пользуюсь сам. Просто меняй условие в первой строчке <b:if cond='...'> на нужное из списка.
| Для чего это | Код условия (Вставлять в cond='...') |
|---|---|
| Только для Статей (Когда читатель открыл пост) |
data:blog.pageType == "item" |
| Только для Главной (Лицо твоего блога) |
data:blog.url == data:blog.homepageUrl |
| Только для Страниц (Типа "О нас", "Контакты") |
data:blog.pageType == "static_page" |
| Только для Списка постов (Главная, Архивы, Поиск - везде, где лента) |
data:blog.pageType == "index" |
| Только для Страницы ошибки 404 (Можно сделать красивый фон для потеряшек) |
data:view.isError |
| Только для Конкретной статьи (Если хочешь выделить ОДИН особенный пост) |
data:blog.url == "ССЫЛКА_НА_ПОСТ" |
4. Способ. Добавление CSS стили через Гаджет HTML/JS он же "Костыль"
Любимый метод ленивых вебмастеров. Нужно срочно, вот прямо сейчас изменить кнопку, а лезть в дебри шаблона лень? Мы берем обычный гаджет, пишем туда стили и кидаем его в сайдбар сайта.
Почему это называют "Костыль": Потому что это не ремонт, а заплатка. Метод "Костыль" (добавление CSS через гаджет) работает, но засоряет код. Представь, что у тебя отваливается бампер на машине, и ты примотал его скотчем. Держится? Да. Красиво? Ну такое.
Когда использовать: Когда нужно протестировать гипотезу за 5 секунд или вставить быстрый код.
Куда вставлять: Дизайн ▶ Боковая панель ▶ Добавить гаджет, выбери HTML/JavaScript, добавь стили и сохрани. Обязательно нажми на Дискету.
Пример кода для гаджета (сделай свой H1 крутым):
<style>
/* Стиль H1: Дерзкий, с тенью, но без КАПСА */
h1 {
font-size: 36px !important;
line-height: 1.2 !important;
font-weight: 900 !important;
color: #ff3300 !important;
/* ВОТ ЗДЕСЬ ИЗМЕНЕНИЕ: */
text-transform: none !important; /* Отключаем капс, буквы будут нормальными */
text-align: center;
letter-spacing: -1px;
text-shadow:
2px 2px 0px #000000,
4px 4px 0px rgba(0,0,0,0.2);
margin: 15px 0 20px 0;
}
</style>
Запомни, добавление CSS стили через Гаджет HTML/JS - это временное решение, этим способом не стоит злоупотреблять.
5. Способ. 💀 Инлайновые стили
Инлайновые стили - это когда ты пишешь стиль прямо внутри статьи, в конкретном теге. Когда лезть в b:skin не хочется. Требуется сменить что-то разово, вот только в этой конкретной статье. Тогда можно использовать инлайновые стили. Это когда CSS стиль прописывается прямо внутри тега.
Как пользоваться: В редакторе поста переключись из Режима верстки в HTML найди нужный элемент.
Предположим, хочешь сделать один блок с синим фоном. Ищешь его тег <div> и дописываешь ему атрибут style.
<div style="align-items: center; background: rgba(46, 204, 113, 0.1); border-radius: 2px; border: 1px solid rgb(46, 204, 113); display: flex; margin: 20px 0px; padding: 15px;"> Твой текст.......</div>
Это быстро, это просто, но это порочная практика для глобальных изменений. Ты оформил сто абзацев, а потом решил сменить оттенок синего. Тебе придется пройтись по всем ста сообщениям и поменять его вручную. А если бы ты задал правило через b:skin для специального класса, то поменял бы в одном месте, и он изменился бы везде. Вывод инлайн-стили только для экстренных, единичных случаев.
Запомни: Инлайновые CSS - это зло. Это Дарт Вейдер в мире верстки. Они сильнее всех остальных стилей. Если в шаблоне написано (Белый), а в инлайне (Красный) - будет красный.
Вывод
- Хочешь по уму? Используй Способ №2.
- Боишься сломать? Способ №1.
- Нужно сделать "финт ушами"? Способ №3.
- А скотч и изоленту (способы 4 и 5) оставь на крайний случай.
Экспериментируй, ломай (на копии!) и чини. Только так становятся вебмастерами.
📚 Полезные материалы по теме:
Чтобы ты не бегал по интернету, вот мой джентльменский набор для работы с дизайном:
-
🎨 100 лучших HEX цветов
Моя личная шпаргалка. Не нужно гадать, какой код у "небесно-голубого". Заходишь, выбираешь, копируешь код и вставляешь в CSS. -
🚀 Создание блога на Blogspot (Инструкция)
Идеально, чтобы создать тот самый "Тестовый блог" (Стейджинг), о котором я говорил в начале. Ломай его полностью, чтобы основной сайт жил спокойно. -
😎 Словарь сленга веб-мастера от LeVа
Если слова "Прод", "Костыль" или "Индексация" всё ещё звучат как эльфийский язык - загляни сюда. Перевожу с айтишного на человеческий. -
⚡ Как добавить Скрипты в Blogger
CSS - это красота, а Скрипты - это мозги. Готовлю статью о том, как их подружить. Ссылка появится здесь.