Фон для заголовка сообщения.

Доброго времени суток, друзья, читатели и гости блога.
Давайте поговорим о том, как выделить фон названия сообщения в Блоггере. Но сначала я попрошу вас прочитать пост как изменить стиль гаджетов в блоге, чтобы при необходимости, вы сами смогли, что-то добавить к предложенным сегодня кодам.
Выглядеть это будет так, как показано на картинке выше. Начну с того, что предложу вам 3 варианта такого оформления заголовка. Так что, будет из чего выбирать.

1. Заголовок поста будет оформлен одинаковым цветом на главной странице и на странице всего сообщения. Здесь совсем всё очень просто.

Идём во вкладку шаблон - изменить HTML. Найдите вот такую строчку  <b:skin>...</b:skin> . Она обычно находится в начале кода. Слева нажмите на чёрный треугольник (маркер), где откроются все CSS коды. Тут нужно найти строчку h3.post-title {. Об этом подробно было написано здесь.


И ниже устанавливаем такой код.
margin:.25em 0 0;
  padding:0 0 4px;
  font-size:140%;
  font-weight:normal;
  line-height:1.4em;
text-align:center;
}

2. Фон заголовка поста на главной будет выделен цветом, а при переходе на страницу сообщения фона не будет.

Также в шаблоне находим вот такой код.
<b:if cond='data:blog.homepageUrl !=
data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<data:post.title/></a>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

То что выделено красным цветом нужно будет заменить на этот код.
<div style='padding:6px 0 6px 5px;border-right:1px solid #000;border-bottom:1px solid #000;margin-bottom:2px;background:#0099DD;color:#000000;'>
<data:post.title/></div></a>

Здесь посоветую сделать на всякий случай резервную копию шаблона, если что пойдёт не так.
В самом начале поста я давала ссылку на оформления гаджетов. Так вот в этот код можно добавлять ещё стили CSS, которые были предложены в статье. Или любые свои.

3. Фон заголовка сообщения на главной одним цветом, а на странице сообщения другим.
Если установить эти оба кода, которые приведены выше, то и будем иметь такой результат.

Вот так просто оформили фоном заголовок сообщения. Наглядный пример здесь.

Благодарю всех за внимание, спасибо что читаете мои шпаргалки. Удачи и до скорых встреч.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


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

  1. Добрый день, Виктория!Подскажите, как оформить приведённый Вами пример (стихотворение "Цветы" внизу страницы)http://test-tri.blogspot.com.by/2016/02/blog-post_48.html Я, наверное, пропустила такую "новинку". Спасибо!

    ОтветитьУдалить
    Ответы
    1. Нет, Лариса. не пропустили. Сотворила только сегодня пост на днях опубликую.

      Удалить

Пользовательский поиск
Foto Saya
My Photo