Как выделить отдельный пост в Blogger


Не так давно я открыл рубрику «Зеленые страницы». Закономерно, что мне захотелось выделить сообщения этой рубрики зеленым цветом (как ни странно) в отличие от общей цветовой схемы блога.

Первое, что приходит на ум &ndash это заключить все сообщение внутри специального элемента. Например так:
<div class="green-page">
...Тело поста...
</div>

И для этого элемента и его дочерних элементов задать стили CSS в общих стилях шаблона Blogger.

.green-page {
  background-color:#9FFFA3;
}
.green-page a, .green-page a:link {
  color: #076F0B;
}
.green-page a:visited {
  color: #3E8F42;
}
.green-page img {
  border:1px solid #076F0B;
}

Проблема этого метода в том, что стили будут распространяться только на сам элемент и его вложенные, «дочерние» элементы. А хотелось бы выделить еще и заголовок. К сожалению, CSS в своей текущей инкарнации не поддерживает «родительские» селекторы. Поэтому надо каким-то образом охватить весь контейнер сообщения.

Уникальный идентификатор поста Blogger


Задача – каждому контейнеру сообщения задать уникальный идентификатор, чтобы уже к этому идентификатору привязывать стилиCSS.
  1. В редакторе шаблона Макет - Изменить HTML отметь Расширить шаблоны виджета

  2. Найди строки

    <b:includable id='post' var='post'>
  <div class='post hentry'>

    3. Каждое сообщение в блогах на платформе Blogger имеет собственный глобальный уникальный идентификатор. Этот идентификатор и будешь использовать как идентификатор контейнера сообщения, предварительно снабдив коротенькимпрефиксом, чтобы избежать возможной путаницы с другими виджетами шаблона. Лично я задал префикс rb.

  3. Добавь идентификатор во вторую строку из предыдущего пункта

      <div class='post hentry' expr:id='&quot;rb&quot;+data:post.id'>
  4. Сохрани шаблон.


Локальные стили сообщения


Допустим, у тебя уже есть сообщение, которое ты хочешь выделить.
  1. Обнови главную страницу блога и открой просмотр исходного кода HTML в меню браузера

  2. Найди свое сообщение в коде. Оно будет заключено внутри контейнера вида:

    <div id="rb2861954547900697711" class="post hentry">
...
</div>

    Скопируй его идентификатор. В моем случае это"rb2861954547900697711". Этот идентификатор сообщения ты теперь можешь использовать для привязки стилей.

  3. Открой редактор сообщения и добавь в него стили для контейнера сообщения, заголовка и т.п. В моем случае это выглядит так:

    <div class="green-page">
  <style type="text/css">
    div#rb2861954547900697711 {background-color:#EFFFEF; padding: 15px 10px;}
    div#rb2861954547900697711 h3 a {color: #076F0B;}
  </style>
...Тело сообщения...
</div>

    4. Важно: Если у тебя в настройках блога стоит автоматическая расстановка переносов, то стили CSS должны быть вытянуты в одну строку!

    <style type="text/css"> ... </style>

  4. Сохрани отредактированное сообщение


Теперь у тебя для выделенного сообщения действуют как глобальные(привязанные к контейнерам class="green-page") так и локальные стили (заданные для каждого сообщения отдельно).

Развлекайся :).