оформление заголовков постов в Блоггер (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 :