Добавляем CSS в HTML шаблона Blogger(Blogspot)

Логотип Blogger и надпись CSS
 Справочная статья о том как добавить CSS в шаблон Blogger, различные способы добавления, описание и примеры.
  Стандартные стили и разделы с CSS в HTML-коде шаблона Blogger-блога. Примеры как найти нужный элемент блога при помощи инструментов для веб-разработчика в браузерах и задать ему свой стиль оформления.

Способы добавления CSS в Blogger

Добавление CSS через "Дизайнер шаблонов"
1. Стандартный
  Самый простой способ: заходим "Панель инструментов" , выбираем нужный блог (если их несколько), затем в админке: "Шаблон" ->"Настроить" -> "Дополнительно" -> "Добавить CSS (инструмент в самом низу списка) и добавляем список свойств CSS для нужного блока, указывая его класс или ID.
 Этот способ хорош тем, что сразу можно посмотреть как добавленный стиль отображается на странице и если нужно, то внести необходимые изменения.
  После сохранения, все добавленные стили будут находится здесь, в редакторе, как говориться - под рукой, и изменить их можно будет снова зайдя в настройки.
На скриншоте выше видно что область для записи CSS в "Дизайнер шаблонов" пуста, хотя стилей добавлено и изменено довольно много. Такое случается если вы вносили изменения в HTML код шаблона, загружали ранее сохраненный шаблон(с уже добавленным стилем). Тут ничего страшного нет, все ваши CSS работают, просто теперь найти их можно зайдя через "Шаблон" -> "Изменить HTML"  все они будут перед строчкой:
]]></b:skin>
Изменить CSS в шаблоне блога на Blogger
2. Добавление и редактирование CSS в HTML коде блога.
  Все дело в том, что почти для всех стандартных блоков Blogger-блога уже задан начальный стиль, который соответствует вашим настройкам в "Дизайнер шаблонов" и выбранной теме.
  Селекторы и идентификаторы уже прописаны с стандартными(по умолчанию) свойствами, которые можно изменить и/или добавить к ним свои.
Стили шаблона в HTML коде начинаются после строки
 <b:skin><![CDATA[
  Сразу за ней обычно указан автор дизайна, ниже, секция переменных для оформления - стили которые можно изменить через "Дизайнер шаблонов". Они указаны после строки:
/* Variable definitions
   ====================
Если вы решили писать CSS самостоятельно, то лучше удалить эту секцию из кода шаблона, чтобы избежать противоречия стилей и ускорить загрузку блога.
  Определение переменных заканчивается на строке:
/* Content
----------------------------------------------- */
  После нее и добавляется свой CSS код. Здесь прописаны почти все селекторы основных блоков вашего Blogger-блога, но для некоторых элементов, чтобы изменить их стиль, нужно будет самостоятельно дописать селекторы, которые не указаны в коде по умолчанию, например для блока комментариев или стандартных гаджетов.
  В шаблоне блога, можно увидеть следующие написание свойств стиля:
.Header .description {
 font: $(description.font);
 color: $(description.text.color);
  Это значит что значения свойств CSS для этого селектора используется по умолчанию/установленные в дизайнере.
  Чтобы применить стиль к элементу с такой записью, в данном случаи это "Описание" в шапке блога, нужно просто убрать $(...) и записать желаемое значение, также можно и добавить еще какое-нибудь свойство.
  Стандартно, как видим, доступно изменить шрифт текста (жирность, написание и сам шрифт), а также цвет текста. Можно добавить выравнивание (лево, право или центр), отступы, фон и т.д. Blogger открыт для экспериментов :)
 Я считаю такой метод - добавление CSS непосредственно в шаблон - лучше, так как уменьшается "вес" блога, и сокращается количество ошибок, ибо вы не дублируете селекторы и стили, а используете существующие.
Для некоторых элементов, CSS определен на стороне сервера Blogger доступа к которому нет. Применение собственных свойств к таким блокам не приводит к желаемому результату, т.к. браузером выполняется серверный стиль, а добавленный игнорируется. В таком случаи, для того чтобы точно указать какой именно код имеет больший приоритет, используется дополнительное свойство - !important.
Например:
.post-body {
  font-size: 110% !important; /*именно это значение будет выполнено*/
  line-height: 1.4;
  position: relative;
}
  3. Локальное добавление CSS
  Но иногда требуется задать определенный стиль элементу, расположенному только внутри сообщения. В Blogger возможно записать стиль прямо в теле поста. Для этого, в редакторе сообщения нужно перейти в режим "HTML", при этом добавляемый CSS код должен находится между тегами:
<style>
  ...
</style>
  Точно также можно добавить CSS и в гаджет HTML/JavaScript для оформления сторонних элементов добавленных в блог с его помощью.

Как узнать идентификаторы и селекторы нужных блоков

  Какой идентификатор отвечает за стиль поста, какой за заголовок, а какой за комментарий в шаблоне Blogger-блога? Узнать это очень просто! Для этого в брузерах имеется инструменты для разработчика. Я пользуюсь для этих целей Dragon Fly - стандартное дополнение Opera.
  Схожие инструменты есть в любом браузере, но на мой взгляд, самые удобные в Chrome и Opera.
  Для использования данной опции: в окне с сайтом, вызываем контекстном меню - клик по правой кнопке мыши, и выбираем "Проинспектировать элемент"(Opera) или "Просмотр кода элемента"(Chrome).
  Пример в Opera:


  На этом все. И не забывайте о содержании ведь дизайн только создает обстановку. Но лучше чтобы она была приятная...
  Посмотреть удобную таблицу CSS свойств, значений и их описания можно на этой странице.
 Спасибо за внимание, буду рад вашим комментариям. :)

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

  1. И тут спасибо вам))) Всё получилось...просто люкс!

    ОтветитьУдалить
    Ответы
    1. Так а я о чем! Знание - сила! Рад что у вас все получается :)

      Удалить
  2. Здравствуйте, в моем шаблоне нет Add CSS, но в настройках шаблона есть добавить CSS и пустое окошко. Есть ли возможность установить CSS не изменяя свой шаблон?
    Заранее спасибо.

    ОтветитьУдалить
    Ответы
    1. Учим английский : Add CSS = добавить CSS - это одно и то же. Вот именно в это самое окошко и добавляем те свойства, которые хотим добавить. Простите за каламбур :)

      Удалить
    2. :) ну с английским у меня не задалось еще с детства. Вообщем есть к чему мне стремиться, спасибо

      Удалить
  3. Здравствуйте! Код CSS для вертикального меню я пробовал добавлять и в тело шаблона, и в гаджет HTML/JavaScript. Мне показалось, что в варианте с гаджетом и меню выпадает быстрее, и блог загужается быстрее. Скажите, как лучше делать?

    ОтветитьУдалить
    Ответы
    1. В Blogger, такие, и другие штуки, типа меню, слайдшоу и пр. лучше, правильнее и несколько удобнее добавлять в гаджет, так по его(шаблона) структуре правильнее. Но это мое мнение, возможно имеются и другие.

      Удалить
    2. При добавлении кода в шаблон размеры его растут и он медленнее загружается. А с гаджетом размер шаблона не растёт? И на скорость загрузки это как-то влияет?

      Удалить
    3. Оба эти действия равносильны, если можно так сказать, что "прямо в шаблон," что в гаджет., "размеры" растут в любом случаи Гаджет, в исходном коде, выглядит как дополнительный контейнер, в котором размещен тот или иной код. Просто по структуре (XML) самого шаблона такое размещение, в гаджете, правильнее, хотя никто не запрещает добавлять код в шаблон "напрямую".

      Удалить
  4. "никто не запрещает добавлять код в шаблон" - я не это имел ввиду, а то, что после добавления кода верт.меню в шаблон, вес шаблона увеличился и он стал заружаться медленней, а с гаджетом вес не увеличился и загружается быстрей, да и меню выпадает мгновенно. Я думаю, что "дополнительный контейнер" не замедляет загрузку блога так, как большой вес шаблона, ибо сначала загружается шаблон, а уж потом уже все контейнеры. Другого обьяснения я не придумал. Или я не прав?

    ОтветитьУдалить
    Ответы
    1. Я честно говоря, вообще не пойму зачем все эти исследования проводите? Есть конкретная структура шаблона и необходимые гаджеты. конкретно в шаблон код можно добавлять лишь в крайнем случаи и желательно чтобы они соответствовали структуре XML

      Удалить
    2. Спасибо, всё понял. Мне и самому удобней код добавлять в гаджет.
      Просто хотел узнать в каком случае быстрее загружается блог.

      Удалить
  5. MagentaWAVE
    Прошу о помощи, у меня со временем пропал весь код CSS (незнаю почему) а как я добился такого результата я уже не помню http://www.logik.com.ua/p/blog-page_758.html
    и добавить следующие проекты из-за этого немогу ( можно ли как то посмотреть CSS коды кнопок?
    Зарание благодарен за ответ.

    ОтветитьУдалить
  6. Спасибо нашел ))) извените невнимательно прочитал статью . Еще раз огромная благодарнасть ))

    ОтветитьУдалить
  7. Здравствуйте!
    Я думаю, что секция "b:template-skin" предназначена именно для дизайнера шаблонов и после удаления секции "Variable definitions" уже не нужна ибо дизайнер всё время пишет: "Неприменимо к этому шаблону". Может можно эту секцию удалить, а все нужные параметры из неё перенести по своим местам?

    ОтветитьУдалить
    Ответы
    1. И даже более, если вы заметили то из дизайнера пропадают некоторые опции настроек после удаления этой секции, т.е. их уже нужно писать самому в коде. Что касается удаление всей секции (b:template-skin), то я этого не делал и собственно особого смысла в этом не вижу.

      Удалить
    2. Просто некоторые записи кажутся мне сомнительными, например:

      <b:variable default='960px' name='content.width' type='length' value='930px'/>
      <b:variable default='0' name='main.column.left.width' type='length' value='180px'/>
      <b:variable default='310px' name='main.column.right.width' type='length' value='180px'/>

      Если у меня ширина блога 930px, а боковые колонки по 180px, то эту запись можно сделать короче и проще.

      Удалить
    3. Эти и такие записи (в этих тегах) это не совсем стили, благодаря им вы можете настраивать блог не "ковыряясь" в коде, а из дизайнера шаблона, т.е. используя его интерфейс, если эти и такие строки с кода удалить, то в дизайнере шаблонов эти опции тоже исчезнут (станут недоступны) и все нужно будет прописывать руками в HTML.
      Итак, если вы хотите и можете сделать дизайн самостоятельно, хорошо разбираетесь по коду, то ясное дело можно "снести" его не нужные элементы, но при этом не нужно забывать предварительно делать резервное копирование шаблона .

      Удалить
  8. Саша, здравствуйте!

    Секцию (b:template-skin) я удалил, а код из неё перенёс:

    в секцию Content:

    body, .body-fauxcolumn-outer {
    min-width: 930px;
    }
    .content-outer, .content-fauxcolumn-outer, .region-inner {
    min-width: 930px;
    max-width: 930px;
    }
    #layout {
    min-width: 0;
    }
    #layout .content-outer {
    min-width: 0;
    width: 800px;
    }
    #layout .region-inner {
    min-width: 0;
    width: auto;
    }

    в секцию Main:

    .main-inner .columns {
    padding-left: 180px;
    padding-right: 180px;
    }
    .main-inner .fauxcolumn-center-outer {
    left: 180px;
    right: 180px;
    }
    .main-inner .fauxcolumn-left-outer {
    width: 180px;
    }
    .main-inner .fauxcolumn-right-outer {
    width: 180px;
    }
    .main-inner .column-left-outer {
    width: 180px;
    right: 100%;
    margin-left: -180px;
    }
    .main-inner .column-right-outer {
    width: 180px;
    margin-right: -180px;
    }

    Получился выигрыш 1 КБ. Скажите, я правильно разнёс по секциям или нужно было перенести в другие места?

    ОтветитьУдалить
    Ответы
    1. Честно сказать я уж совсем смутно понимаю сакральный смысл ваших действий. Зачем вы это все делаете, в особенности переносите коды в различные секции, тем более что это разметка шаблона (ширина колонок и отступы), так сказать, в режиме блога и редактора (админки).

      Удалить
  9. Изначально мой шаблон "Венецианское окно" весил 77 КБ, а сейчас весит 52 КБ.
    Я просто хочу очистить шаблон от всего лишнего.

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

    ОтветитьУдалить
    Ответы
    1. Честно говоря, я даже растерялся увидев ваш вопрос, уж думаю вы то должны уже знать что такое CSS, как выглядит такой код, и что такое HTML и как выглядит код. Если вы не ориентируетесь в этом, то пожалуй пора прекращать крутить этот черный ящик и все-таки начать изучение с начала.
      В этой статье есть ссылки где это делать лучше всего -
      http://www.magentawave.com/2013/01/how-i-learn-css.html

      P.S. Комментарий удалил, так он содержит уж очень большое количество совсем не нужной информации.

      Удалить
  11. Очень хорошая статья, долго искал что то подобное, если будете писать чаще то, подпишусь на рассылку.

    ОтветитьУдалить
  12. Возможно у вас есть информация про программу артистер? И как использовать ее в блогспоте? Если есть то напишите статю, обязательно ею подельсь со знакомыми и читателями. А то нигде не смог раздобыть инфу на эту тему.

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

      Удалить
  13. Анонимный23.06.2015, 09:43

    Интересны у вас сайтик добаовлюка я его в закладки
    от расстаманна фром каннабис хе-хе шутка!!!

    ОтветитьУдалить
  14. Спасибо! Очень полезно!

    ОтветитьУдалить
  15. Очень помогло. Сам бы не додумался до первого способа. Спасибо автору)

    ОтветитьУдалить
  16. Пытался добавить код вот отсюда и не получилось: https://codepen.io/scorch/pen/zdKErE

    Можете подсказать возможно ли это в Блоггере?

    ОтветитьУдалить
    Ответы
    1. Конечно можно, это без проблем все добавляется, но вам нужно вот сюда https://www.magentawave.com/2012/03/change-header-on-blogger.html

      Удалить

Следующее Предыдущее

BestProject