Добавление CSS для сообщений в Blogger(Blogspot)

Эмблема Blogger на разноцветном фоне Изменив дизайн заголовков в блоге, нельзя оставлять без внимания и внешний вид самих постов. С помощью стандартного дизайнера шаблонов, конкретно для сообщений, можно настроить разве что шрифт. Однако, зная необходимые селекторы блоков, для них можно добавить собственный CSS и настроить оформление практически всех элементов сообщения в Blogger-блоге по своему вкусу.
  В принципе, селекторов для манипуляций с блоком постов в стандартном шаблоне Blogger более чем достаточно, но обычно, для изменения дизайна хватает всего нескольких:
- .date-outer - селектор всего блока сообщения, что называется: "с потрохами". В нем расположены все остальные блоки - начиная с даты сообщения и заканчивая комментариями;
- .post-outer - блок сообщения, но уже без даты;
- .post - селектор внутреннего блока поста, который уже не включает в себя комментарии;
- h3.post-title - в помощью этого селектора можно изменить оформление заголовка сообщения.
- .post-body или .entry-content - сообщение, без заголовка, подвала и т.д.
В шаблоне, блок поста записан так:
<div class="post-body entry-content" id="post-bod...
По-этому можно использовать любой селектор для оформления поста, как .post-body так и .entry-content.
- .post-footer - "подвал" сообщения, тут находятся ссылки на профиль автора, дата создания, действия, ярлыки и т.д.
Внутри, блок "подвала" дополнительно делится на секции - .post-footer-line, в которых и расположены элементы функционала и в случаи необходимости ими тоже можно управлять с помощью CSS. Каждая секция, кроме общего имеет также и собственный селектор:
- post-footer-line-1;
- post-footer-line-2;
- post-footer-line-3.
В коде это выглядит примерно так:
<div class="post-footer">
 <div class="post-footer-line post-footer-line-1">
...
 </div>
 <div class="post-footer-line post-footer-line-2">
...
 </div>
 <div class="post-footer-line post-footer-line-3">
...
 </div>
</div>

  Теперь, применяя различные CSS свойства, к приведенным выше элементам, вы можете самостоятельно сделать уникальный дизайн сообщений в своем Blogger-блоге.
©http://magentawave.com
Дальше по теме

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

  1. Можно ли оградить, с помощью "border", две секции: post-footer-line-1 и post-footer-line-2(в одну общую рамку) от post-footer-line-3.
    Можно ли ограничивать секции с помощью post-footer-line-3
    Спасибо за статью !!!

    ОтветитьУдалить
    Ответы
    1. Вы можете самостоятельно, дополнить или изменить HTML разметку блога в разделе админ-панели "Шаблон" -> "Изменить HTML" не забывайте предварительно сохранять шаблон до несения изменений. Т.е. вы можете объединить эти два блока в одном, новом с отличным от других селектором и задать ему необходимые элементы оформления.

      Удалить
    2. Спасибо, все получилось.

      Удалить

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

BestProject