оформление заголовков постов в Блоггер (5 вариантов)

Привет, друзья. Предлагаю вам сегодня ещё 6 вариантов оформления заголовков статей вашего блога. На самом деле их достаточно много и, помимо предложенных сегодня, вы можете посмотреть ещё некоторые примеры. Ведь красиво оформленный заголовок внесёт разнообразие и привлечёт внимание пользователя

заголовок поста

Прочитайте как можно вставить картинку в название сообщения и ещё красивое оформление заголовка сообщения.

Давайте вернёмся уже к сегодняшним вариантам. Не составит особого труда установить коды даже если вы начинающий блогер. Нужно зайти во вкладку Тема и найти строку ]]></b:skin> и сразу над ней установить код понравившегося варианта.

Смотрим

1. Эффектный заголовок синего цвета

заголовок поста

Код

.post h3{margin:0 0 10px;padding:10px;background-color:#00ABC5;box-shadow:0 3px 0 #4ACCDF;color:#FFF;font-size:16px;line-height:16px;font-family:"Bree Serif",serif;font-weight:400;text-decoration:none;text-transform:uppercase}


2. Эффект объёмного заголовка

Код

.post h3{background:#F9F9F9;font-family:'Oswald',sans-serif;font-size:120%;padding:6px 12px;color:#333;text-shadow:1px 1px 1px #AAA;border-bottom:4px solid #03DA03;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:1px 1px 2px #AAA;-moz-box-shadow:1px 1px 2px #AAA;box-shadow:1px 1px 2px #AAA;margin:6px 3px;text-transform:capitalize;width:95%;line-height:1em}
.post h3:hover{border-bottom:4px solid #003F80}


3. Красивый заголовок с градиент эффектом

заголовок поста

Код

.post h3 {
  background: transparent url("http://2.bp.blogspot.com/-jNxuEWNpGTk/UV7-6ovsE3I/AAAAAAAABYs/tXcNlEqxCwM/s1600/h2.jpg") repeat-x scroll 0px 0px;
  color: #FFF;
  font-size: 20px;
  font-weight: 200;
  letter-spacing: 0px;
  font-family: fantasy;
  margin-top: 20px;
  margin-bottom: 20px;
  box-shadow: 0px 1px 6px 3px #000;
  padding: 10px 2px 10px 10px;
  text-shadow: 0px 1px #000;
  text-transform: uppercase;
}


4. Заголовок жёлтого цвета с рамкой и иконкой


Код

.post h3{
  padding: 3px;
  padding-left: 10px;
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
  background-color: #FEBD17;
  border-radius: 9px;
  box-shadow: 2px 2px 2px;
  border: #000 1px solid;
}
.post h3:before {
  font-family: FontAwesome;
  position: relative;
  content: '\f061';
  font-size: 17px;
  padding-right: 10px;
}



 5. Заголовок с пунктирной рамкой


Код

.post h3 {   border: 1px dashed #C7C7C7;
  padding: 3px;   box-shadow: 2px 2px 5px;   padding-left: 10px;
  margin-bottom: 7px;   border-radius: 10px;   border-bottom-color: #000;   background: rgba(218, 218, 218, 0.04);   border-bottom-right-radius: 100px; }

Если вы не хотите применять такие эффекты ко всем заголовкам, можно оформить так же и отдельно взятый пост. В этом случае нужный код следует установить в редакторе сообщений, перейдя в режим HTML, где - нибудь в самом низу. И заключить код в теги вот так

<style> тут весь код</style>

Все варианты предусмотрены для стандартных шаблонов Блоггер, где заголовки постов имеют тег h3. Если вы меняли теги, то естественно нужно прописать соответствующие. 

Вот и всё по теме. Всем предновогоднего настроения.

P.S. Я собрала для вас на отдельной странице варианты оформления блога к Новому году. 


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

введите пожалуйста свой email :

13 комментариев:

  1. Спасибо, Виктория! Мне нравятся заголовки моих постов!

    ОтветитьУдалить
    Ответы
    1. Ирина, каждому, как говорится, своё. Кому - то и пригодится.

      Удалить
  2. Ответы
    1. Наталья, спасибо. Тут вообще поиграться с кодами, с цветами и иконками можно вообще уникальное что - то сделать.

      Удалить
  3. Вика, спасибо! Ненавижу лезть в шаблон, но рискнула! Мне нравится!

    ОтветитьУдалить
  4. Ааа, Вик, хотела красный, но он очень толстый получился. Как его можно уменьшить в высоте( или ширине?) В общем, чтобы был не такой толстый! Спасибо!

    ОтветитьУдалить
    Ответы
    1. Ирина, у тебя синий посмотрела нормально смотрится. А красный толстый там картинка такая и уже к ней стили. Можно попробовать уменьшить шрифт и ширину font-size: 20px;
      font-weight: 200;. Молодец, что тренируешься. Получилось ведь. Не понравиться уберёшь потом.

      Удалить
  5. Да, думаю тоже поиграться в дизайне опять. Но пока бью себя по рукам: новый год на дворе, да и в блоге надо упор на статьи делать, а я всё продолжаю с удовольствием рыться в настройках))).

    ОтветитьУдалить
    Ответы
    1. Валерия, так это у всех так происходит. Сначала настройки, дизайн, потом статьи. Потом опять дизайн и так далее. Я пока на этом остановилась 3 раза меняла всё. Всем советую сделать тестовый блог по образу и подобию главного и там сначала колбасить. Сейчас перед НГ суета, это да.

      Удалить
  6. да, получилось! ты же заинтригуешь по полной такой красотой, вот и приходится..:)) И я даже изменила цвета в твоем коде. Уже прогресс!

    ОтветитьУдалить
    Ответы
    1. Ирина, не так страшен чёрт, как его малюют. было бы желание. Ты молодец!

      Удалить
  7. Обратила внимание, у вас у 5 и 6 оформления одинаковые коды.

    ОтветитьУдалить
  8. Да, Наталья, спасибо за внимание. Убрала один. На самом деле одинаковые. Пока экспериментировала запуталась, видимо. Бывает.

    ОтветитьУдалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML

Пользовательский поиск