Оформление текста в Blogger

Оформление текста в Blogger

Когда только начинал вести блог, я часто сохранял для себя полезные находки по оформлению и настройке шаблонов. Сегодня хочу поделиться простыми, но эффектными стилями для выделения текста в Blogger. Они помогают структурировать материал: советы можно оформить в синем блоке, предупреждения – в красном, а важную информацию выделить нейтральным серым. Удобно и выглядит аккуратно 😉

CSS-блоки с иконками

Сначала добавляем стили CSS в шаблон перед строкой ]]></b:skin> или </style>:

.info, .tips, .warning {
  line-height: 22px;
  min-height: 38px;
  padding-left: 10px;
  padding: 10px 12px 12px 68px;
  margin: 5px 0;
}
.info {
  background: #e0e5eb url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEo3IYJQGgHiGaf3XNDE2UMFWR_v7YCxHZnAQtPvgLI6VaUFpNku9AimApRXg-HbXqWeCCndHtriHLvSOzWcBn6tHOBNmqfUjQ1xBjzMI0R_N7oxgaF-8jJX2_iYzLd2mU8XcySgoc_7s/s1600/info.png') no-repeat 12px 8px;
  color: #222;
}
.tips {
  background: #7CADDE url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt2G3beHtYzkoFTKORshlz9Fy9j_DeRvqLt-Z2HfLDbpL3eRB5yCe_ZPValeBRFpFxWEOzaUmutz-dIxlmHxxzP5_O3CoX6nkOzPheGnwD0iNFihfTFXWjBrxNyqNCyIPKyoVauGarzus/s1600/tips.png') no-repeat 12px 8px;
  color: #fff;
}
.warning {
  background: #db6161 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh56UmDm2EOigM5O5BlTwIRVyZb54SVy3uqZSVu5qf2CbmeJ32BI_MC-a5DtCgUbMfkiY23ib5DhoqsOyfQQSVzvefmvZHSkbPtQtgU56-ZJjRXLX5rQzZWh9yb3Q3zFMhGdVGefXO2dA4/s1600/warning.png') no-repeat 12px 8px;
  color: #fff;
}

Теперь в редакторе можно обернуть текст в нужный блок. Например:

<div class="info">Ваш текст...</div>

И получится вот так:

Пример блока с информацией: полезный текст можно выделить здесь.
Пример блока с советом: здесь хорошо смотрятся подсказки.
Пример блока с предупреждением: так удобнее заметить важные моменты.

Цветные блоки без иконок

Если иконки не нужны, можно использовать более минималистичный вариант. Добавляем в шаблон такие стили:

.colorbox {
  overflow: hidden;
  position: relative;
  margin: .5rem 0 1rem;
  transition: box-shadow .25s;
  border-radius: 2px;
  color: #fff;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
  padding: 20px;
  font-size: 14px;
}
.colorbox.blue {background:#03a9f4}
.colorbox.green {background:#4CAF50}
.colorbox.red {background:#F44336}
.colorbox.orange {background:#ff9800}
.colorbox.purple {background:#673ab7}

Использование простое:

<div class="colorbox purple">Ваш текст...</div>

И результат:

Фиолетовый блок
Синий блок
Зелёный блок
Оранжевый блок
Красный блок

Таким образом можно быстро и красиво выделять важные части статьи. А чтобы не искать пример каждый раз – я и сохранил его у себя в блоге 😊

Источник: idblanter.com

Комментарии