Привет, друзья. Предлагаю вам сегодня ещё 6 вариантов оформления заголовков статей вашего блога. На самом деле их достаточно много и, помимо предложенных сегодня, вы можете посмотреть ещё некоторые примеры. Ведь красиво оформленный заголовок внесёт разнообразие и привлечёт внимание пользователя
Прочитайте как можно вставить картинку в название сообщения и ещё красивое оформление заголовка сообщения.
Давайте вернёмся уже к сегодняшним вариантам. Не составит особого труда установить коды даже если вы начинающий блогер. Нужно зайти во вкладку Тема и найти строку ]]></b:skin> и сразу над ней установить код понравившегося варианта.
Смотрим
1. Эффектный заголовок синего цвета
Код
2. Эффект объёмного заголовка
Код
3. Красивый заголовок с градиент эффектом
Код

Прочитайте как можно вставить картинку в название сообщения и ещё красивое оформление заголовка сообщения.
Давайте вернёмся уже к сегодняшним вариантам. Не составит особого труда установить коды даже если вы начинающий блогер. Нужно зайти во вкладку Тема и найти строку ]]></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}
.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;
}
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. Я собрала для вас на отдельной странице варианты оформления блога к Новому году.
хотите оформить подписку на новые шпаргалки
Спасибо, Виктория! Мне нравятся заголовки моих постов!
ОтветитьУдалитьИрина, каждому, как говорится, своё. Кому - то и пригодится.
УдалитьКрасиво
ОтветитьУдалитьНаталья, спасибо. Тут вообще поиграться с кодами, с цветами и иконками можно вообще уникальное что - то сделать.
УдалитьВика, спасибо! Ненавижу лезть в шаблон, но рискнула! Мне нравится!
ОтветитьУдалитьАаа, Вик, хотела красный, но он очень толстый получился. Как его можно уменьшить в высоте( или ширине?) В общем, чтобы был не такой толстый! Спасибо!
ОтветитьУдалитьИрина, у тебя синий посмотрела нормально смотрится. А красный толстый там картинка такая и уже к ней стили. Можно попробовать уменьшить шрифт и ширину font-size: 20px;
Удалитьfont-weight: 200;. Молодец, что тренируешься. Получилось ведь. Не понравиться уберёшь потом.
Да, думаю тоже поиграться в дизайне опять. Но пока бью себя по рукам: новый год на дворе, да и в блоге надо упор на статьи делать, а я всё продолжаю с удовольствием рыться в настройках))).
ОтветитьУдалитьВалерия, так это у всех так происходит. Сначала настройки, дизайн, потом статьи. Потом опять дизайн и так далее. Я пока на этом остановилась 3 раза меняла всё. Всем советую сделать тестовый блог по образу и подобию главного и там сначала колбасить. Сейчас перед НГ суета, это да.
Удалитьда, получилось! ты же заинтригуешь по полной такой красотой, вот и приходится..:)) И я даже изменила цвета в твоем коде. Уже прогресс!
ОтветитьУдалитьИрина, не так страшен чёрт, как его малюют. было бы желание. Ты молодец!
УдалитьОбратила внимание, у вас у 5 и 6 оформления одинаковые коды.
ОтветитьУдалитьДа, Наталья, спасибо за внимание. Убрала один. На самом деле одинаковые. Пока экспериментировала запуталась, видимо. Бывает.
ОтветитьУдалить