Заголовок - это первое на что обращает внимание посетитель на сайте. Обратит внимание читатель на текст зависит от удачно созданного цепляющего и красиво оформленного заголовка.
Говорят, что не судят людей по одежде, а книгу по обложке, но люди делают это каждый день. Мы обращаем внимание на яркие красивые вещи, смотрим в каком переплете книга, цепляемся взглядом за название произведения, пробегаемся мельком по оглавлению и только тогда решаем покупать книгу или нет. Также и в интернете, вебсайты оцениваются по дизайну и по первому впечатлению, которое зачастую зависит от Заголовка (названия статьи, страницы, товара).
Давайте и мы добавим немножечко креатива нашим заголовкам и подзаголовкам на сайте. Само собой разумеется красиво оформленный заголовок не задержит посетителя на сайте если контент будет плохой и не даст ответа на вопрос за которым он пришел.
- Что бы сделать заголовки цепляющие вначале нужно заголовки оптимизировать.
- При создании статьи указать Заголовок или подзаголовок.
На скриншоте заголовки редактировала на вкладке "Создать".
Первый заголовок я оставила как обычный, полужирный текст.
Второй - Заголовок, третий и четвертый - подзаголовки, как идет в выпадающем меню.
Обратите внимание! Все скриншоты открываются в новом окне браузера в большом размере, наводим курсор на картинку, правой кнопкой мышки открываем меню и выбираем "Открыть изображение в новой вкладке" или "Открыть картинку...".
Откроем HTML редактор и посмотрим как все это выглядит в коде.
Заголовок статьи соответственно должен быть H1. А теперь проверьте как у вас отображаются все заголовки в блоге.
Для проверки советую установить расширение для браузеров Плагин Rds bar, незаменимый помощник для вебмастеров и для администраторов сайта.
Так должны быть настроены заголовки в блоге. На рисунке отображена эта статья.
Примеры, которые приведены в статье также подходят для оформления подзаголовков h1-h6. Коды стилей можно применить для оформления заголовков блоков сайдбара, рубрик, ярлыков и названий виджетов в подвале сайта.
Стили заголовков css для красивого оформления статей | Примеры
Пример 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
В этом примере перед заголовком вертикальная черта.
<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>
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>
Если вы хотите оформить заголовок статьи то в коде отмечаем h1, подзаголовки h2-h4
Устанавливается скрипт довольно просто, как обычный гаджет. Заходим административная панель Blogger > Дизайн > Добавить гаджет > HTML/javascript. Можно изменить цвет рамки, добавить другой маркер списков (галочка в зеленом кружке) или воспользоваться таблицей символов юникода .
Красивая CSS лента (ribbon) для заголовков сайта
Как расположить название сообщения по центру, красиво оформить заголовок статьи на Blogger( Blogspot) и выделить его? На все эти вопросы у меня есть один ответ и один способ. С помощью кода СSS можно сделать красивые ленты на заголовках, название будет по центру и красиво оформлено. Такая ленточка достойна украсить любой блог или сайт.
Что бы получить такую ленту заходим в Административную панель Blogger > Шаблон > Изменить HTML. Не забываем делать резервное копирование ☻. Вызываем окно поиска, ставим курсор в окно шаблона и нажимаем Ctrl+F. Находим строчку ]]></b:skin> и чуть выше добавляем код CSS:
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; }
Настройки:
color: #4c1108; - цвет текста background: #CECECE; - фон ленты
Будь вместе с Я Блоггер
