Красивое оформление заголовков статей | Примеры

 

Красивое оформление заголовков статей на сайте

 

Заголовок - это первое на что обращает внимание посетитель на сайте. Обратит внимание читатель на текст зависит от удачно созданного цепляющего и красиво оформленного заголовка.

 

Говорят, что не судят людей по одежде, а книгу по обложке, но люди делают это каждый день. Мы обращаем внимание на яркие красивые вещи, смотрим в каком переплете книга, цепляемся взглядом за название произведения, пробегаемся мельком по оглавлению и только тогда решаем покупать книгу или нет. Также и в интернете, вебсайты оцениваются по дизайну и по первому впечатлению, которое зачастую зависит от Заголовка (названия статьи, страницы, товара).

 

Давайте и мы добавим немножечко креатива нашим заголовкам и подзаголовкам на сайте. Само собой разумеется красиво оформленный заголовок не задержит посетителя на сайте если контент будет плохой и не даст ответа на вопрос за которым он пришел.

 

  1. Что бы сделать заголовки цепляющие вначале нужно заголовки оптимизировать.
  2. При создании статьи указать Заголовок или подзаголовок.

 

 

 

Оформление заголовков в Blogger
Оформление заголовков в Blogger

 

На скриншоте заголовки редактировала на вкладке "Создать".

Первый заголовок я оставила как обычный, полужирный текст.

Второй - Заголовок, третий и четвертый - подзаголовки, как идет в выпадающем меню.

 

Обратите внимание! Все скриншоты открываются в новом окне браузера в большом размере, наводим курсор на картинку, правой кнопкой мышки открываем меню и выбираем "Открыть изображение в новой вкладке" или "Открыть картинку...".

 

Откроем HTML редактор и посмотрим как все это выглядит в коде.

 

Настройка заголовков и подзаголовков в Blogger
Настраиваем заголовки и подзаголовки

 

Заголовок статьи соответственно должен быть H1. А теперь проверьте как у вас отображаются все заголовки в блоге.

 

Для проверки советую установить расширение для браузеров Плагин Rds bar, незаменимый помощник для вебмастеров и для администраторов сайта.

 

Настройка заголовков и подзаголовков в Blogger (Blogspot)
Проверка заголовков и подзаголовков через плагин Rds bar

 

Так должны быть настроены заголовки в блоге. На рисунке отображена эта статья.

 

Примеры, которые приведены в статье также подходят для оформления подзаголовков h1-h6. Коды стилей можно применить для оформления заголовков блоков сайдбара, рубрик, ярлыков и названий виджетов в подвале сайта.

 

Стили заголовков css для красивого оформления статей | Примеры

 

Пример 1

 

Красивое оформление заголовков статей пример 1
Пример 1. Красивый заголовок для статьи

 

Красивое оформление заголовков статей пример 1
Пример 1. Заголовок при наведении

 

 

<style>

h1{
font-family: Times New Roman !important;
font-style:italic !important;
}
.post h1 {
color:#666;
border-left:10px solid #666;
border-right:10px solid #666;
padding:3px 5px 3px  20px;
border-radius:15px;
-moz-border-radius:15px;
box-shadow:0px 0px 13px #666;
-webkit-box-shadow:0px 0px 13px #666;
-moz-box-shadow:0px 0px 13px #666;
}
.post h1:hover {
color:#f41111;
border-left:10px solid#c10f18 ;
border-right:10px solid#c10f18 ;
box-shadow:0px 0px 13px#c10f18;
-webkit-box-shadow:0px 0px 13px #c10f18;
-moz-box-shadow:0px 0px 13px#c10f18;
}
</style>

 

Пример 2

 

В этом примере перед заголовком вертикальная черта.

 

Красивое оформление заголовков статей на сайте
Пример 2. Заголовки как на сайте Я блоггер

 

<style>
h1{
border-color: rgb(226 , 11 , 11); border-left-style: solid; border-width: 0px 0px 0px 3px; letter-spacing: -1px; line-height: 33px; margin: 0px; padding: 0px 0px 0px 8px; vertical-align: baseline;
}
</style>

 

Красивое оформление заголовков статьи в blogger blogspot

<style>.post h3 {
background: url("http://3.bp.blogspot.com/-gLnHp4LoL-Q/T-hYlORTm3I/AAAAAAAAA0s/IN1bvxW-hwg/s1600/h3.png") no-repeat 4px center transparent;
font-size: 20px;
font-family: Oswald;
font-weight:normal;
padding: 3px 10px 3px 80px;
color: #DAA520;
border: 3px solid #DAA520;
text-shadow: 0 1px 0 #DAA520;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
-moz-box-shadow: 0 1px 3px #DAA520, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
-webkit-box-shadow: 0 1px 3px #DAA520, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
box-shadow: 0 1px 3px #DAA520, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
margin: 15px 3px;
text-transform: uppercase;
line-height: 1.3;
}
</style>


В стандартных шаблонах Blogger скрипт красиво выделяет заголовки и подзаголовки, если вы в сообщениях в настройках отметили подзаголовок.

 

Если вы хотите оформить заголовок статьи то в коде отмечаем h1, подзаголовки h2-h4

 

Устанавливается скрипт довольно просто, как обычный гаджет. Заходим административная панель Blogger > Дизайн > Добавить гаджет > HTML/javascript. Можно изменить цвет рамки, добавить другой маркер списков (галочка в зеленом кружке) или воспользоваться таблицей символов юникода .

 

Красивая CSS лента (ribbon) для заголовков сайта

 

Красивое оформление заголовков сообщений blogger

Лента ribbon для оформления заголовков

 

Как расположить название сообщения по центру, красиво оформить заголовок статьи на Blogger( Blogspot) и выделить его? На все эти вопросы у меня есть один ответ и один способ. С помощью кода СSS можно сделать красивые ленты на заголовках, название будет по центру и красиво оформлено. Такая ленточка достойна украсить любой блог или сайт.

 

Что бы получить такую ленту заходим в Административную панель Blogger > Шаблон > Изменить HTML. Не забываем делать резервное копирование . Вызываем окно поиска, ставим курсор в окно шаблона и нажимаем Ctrl+F. Находим строчку ]]></b:skin> и чуть выше добавляем код CSS:

 

 
       h1{
text-align: center;
position: relative;
color: #fff;
margin: 0 -30px 30px -30px;
padding: 10px 0;
text-shadow: 0 1px rgba(0,0,0,.8);
background: #5c5c5c;
background-image: -moz-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: -webkit-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
-moz-box-shadow: 0 2px 0 rgba(0,0,0,.3);
-webkit-box-shadow: 0 2px 0 rgba(0,0,0,.3);
box-shadow: 0 2px 0 rgba(0,0,0,.3);
} h1:before, h1:after
{
content: '';
position: absolute;
border-style: solid;
border-color: transparent;
bottom: -10px;
} h1:before
{
border-width: 0 10px 10px 0;
border-right-color: #222;
left: 0;
}
h1:after
{
border-width: 0 0 10px 10px;
border-left-color: #222;
right: 0;
}

 

Если у вас еще не оптимизированы теги h1, h2, h3, h4, то попытайтесь сами подставить нужный тег. Код H3 привожу.

 

h3{       text-align: center;       position: relative;       color: #4c1108;       margin: 0 -30px 30px -30px;       padding: 10px 0;       text-shadow: 0 1px rgba(0,0,0,.8);       background: #CECECE;       background-image: -moz-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));       background-image: -webkit-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));       background-image: -o-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));       background-image: -ms-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));       background-image:  linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));       -moz-box-shadow: 0 2px 0 rgba(0,0,0,.3);       -webkit-box-shadow: 0 2px 0 rgba(0,0,0,.3);       box-shadow: 0 2px 0 rgba(0,0,0,.3);   }    h3:before, h1:after   {       content: '';       position: absolute;       border-style: solid;       border-color: transparent;       bottom: -10px;   }    h3:before   {       border-width: 0 10px 10px 0;       border-right-color: #222;       left: 0;   }    h3:after   {       border-width: 0 0 10px 10px;       border-left-color: #222;       right: 0;   }

Будь вместе с Я Блоггер

 

Будь в тренде!

Получай материалы прямиком в свою почту

Я даю согласие на сбор и обработку своих персональных и не персональных данных согласно действующей на сайте — политике конфиденциальности.
* Нажимая на кнопку "Отправить", "Подпишись" или "Комментировать" Вы соглашаетесь с пользовательским соглашением.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Яндекс.Метрика