Хотите добавить некоторые интересные эффекты в ваш блог, такие как снег, 3D-шрифты, неоновые тексты, тени или вы хотите, чтобы дизайн вашего блога вышел на следующий уровень, тогда вам нужно всего лишь вставить несколько строк пользовательского CSS в свой блог. CSS, что это такое? CSS известен как каскадная таблица стилей, которая просто используется для описания внешнего вида вашего блога, или другими словами, используется для определения того, как должны отображаться элементы HTML. Прежде чем вы узнаете о CSS, лучше знать о HTML. На CSS есть много ресурсов, и даже новичок может легко понять основные элементы CSS, но освоение его потребует много времени и практических знаний.
Добавить CSS в Blogger
CSS играет самую важную роль в украшении элементов, и все шаблоны Blogger по умолчанию будут иметь собственный CSS-код. В любое время, если вы хотите еще больше украсить дизайн своего блога, вы можете добавить некоторый пользовательский CSS. В наших учебниках для блогеров мы упоминали, что наши посетители добавляют CSS-коды, например, посмотрите этот пост , но большинство новичков не знают, где добавить CSS.
Blogger позволяет добавлять собственный CSS в шаблон в Конструкторе тем Blogger, который переопределяет CSS-код по умолчанию, Здесь мы покажем вам, как вставлять / добавлять CSS в Blogger.
Как вставить / добавить CSS в Blogger — Понимание CSS в Blogger
Перед тем, как добавить CSS, вам нужно написать CSS, и прежде чем вы сможете написать код стиля CSS, вам нужно найти селектор, для которого вы хотите изменить стиль. Вы можете использовать инструменты разработчика вашего браузера для проверки элемента, здесь мы не будем подробно останавливаться на этом. Например, вы знаете о тегах h1, h2, h3, h4, h5 и h6 и для изменения этих шрифтов вы можете добавить CSS, как показано ниже.
h1 {
font-family: «Times New Roman», Times, serif;
font-size: 15px;
font-weight: bold;
color: rgb(56, 77, 187)
}
Но что вы будете делать для изменения макета страницы, стиля вкладки меню, ссылок, семейства шрифтов, выравнивания, фона или текста, когда вы не знаете класс элемента. Здесь вы должны использовать инструмент разработчиков браузеров. Просто щелкните правой кнопкой мыши по элементу, а затем выберите элемент проверки, в котором вы увидите элементы слева и CSS справа от вас. Измените код CSS и посмотрите, результаты изменений, например, вот код CSS для вкладки меню, который вы найдете в шаблоне.
1 |
.tabs-inner .widget li a:hover { |
2 |
color: #fff; |
3 |
background-color: #FF9900; |
4 |
text-decoration: underline; |
5 |
display: inline-block; |
6 |
padding: .6em 1em; |
7 |
font: normal normal 15px 'Trebuchet MS', Trebuchet, Verdana, sans-serif; |
8 |
border-left: 1px solid #ffffff; |
9 |
border-right: 1px solid #dddddd; |
10 |
} |
С помощью инструмента элемента проверки вы можете просмотреть изменения CSS для любого элемента, и когда вы получите желаемый вид, возьмите код CSS и вставьте его в своем блоге.
Применение CSS в Blogger
Существует два способа реализации CSS в Blogger: редактирование HTML шаблона напрямую, а другой самый простой способ — использовать опцию добавления CSS в Конструкторе тем Blogger
Добавить CSS с помощью Конструктора тем Blogger
Добавление CSS здесь является самым простым и безопасным способом, так как оно не влияет на ваши основные файлы шаблонов. Помимо добавления пользовательского CSS, Конструктор тем Blogger позволяет легко изменять фон вашего блога, настраивая ширину, макет, стили шрифтов, цвета, область гаджетов, содержание нижнего колонтитула и т. Д.
- Войдите в свой блог Blogger, перейдите в раздел «Тема» и нажмите «Настроить».
- Теперь вы увидите страницу Конструктора тем Blogger с 5 параметрами
- Нажмите «Дополнительно», прокрутите подпункты и выберите «Добавить CSS».
- Затем вы увидите поле с правой стороны, и здесь вы должны добавить свой собственный CSS.
Добавьте собственный CSS-код выше, см. Приведенные ниже изменения и когда все будет сделано, нажмите «Применить к блогу» вверху.
Добавление CSS путем редактирования шаблона Blogger
Другой способ применения CSS — прямое редактирование основного CSS или добавление пользовательского CSS в код шаблона. Мы не предлагаем этот метод для новичков, потому что неправильное использование может привести к нарушению вашего шаблона. Поэтому перед добавлением CSS с использованием этого метода обязательно выполните резервное копирование; .
- На панели инструментов Blogger перейдите в Макет, а затем нажмите кнопку «Редактировать HTML».
- Теперь вы увидите свои коды шаблонов, просто нажмите CTRL + F для поиска, а затем выполните поиск <b:skin>
- Разверните <b:skin>, и вы увидите CSS для вашего шаблона блога.
Начните редактирование существующего CSS или вы можете добавить свой собственный CSS, здесь вы не получите параметр предварительного просмотра, который вы получаете в Конструкторе тем Blogger. Наконец, сохраните свой шаблон, когда закончите.
Надеюсь, эта статья поможет вам добавить CSS в Blogger. Начните украшать свой блог и получать больше таких обновлений, подписавшись на наш блог.
