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

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

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

Вот такую красоту мы будем делать.

На блоге это очень эффектно смотрится. При наведении курсора фон меняет цвет. А самое главное, что в зависимости от вашего желания, вы сможете поменять  его по своему вкусу.

Чтобы увидеть, как это будет выглядеть на странице, предлагаю перейти по этой ссылке.

Ну и код

h3{
font-family: Times New Roman !important;
font-style:italic !important;
}
.post h3 {
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 h3:hover {
color: #00BFFF;
border-left:10px solid#75A6CB ;
border-right:10px solid#75A6CB ;
box-shadow:0px 0px 13px#75A6CB;
-webkit-box-shadow:0px 0px 13px #75A6CB;
-moz-box-shadow:0px 0px 13px#75A6CB;
}
blockquote {
background: #FFFAFA url() no-repeat right bottom ;
margin: 0 20px;
padding: 20px 70px 20px 20px;
color:#595959;
font: bold 0.9em "comic sans ms", "GEORGIA", Times, serif;
border:1px solid #DCDCDC;
}
blockquote:hover {
background: #FFFAFA url() no-repeat right bottom ;
color:#FF0000;
}
blockquote p {
margin: 0;
padding-top:10px;
}

 То, что выделено синим цветом, а именно, значение #00BFFF- отвечает за цвет фона. Значение italic можно просто удалить. Тогда шрифт будет прямой, а не курсив, как у меня.

После всех изменений заходим во вкладку шаблон-изменить HTML. Находим нашу любимую строку  ]]></b:skin> и сразу над ней вставляем его. Проверьте шаблон. Если всё нормально, форматируем, сохраняем, возвращаемся и видим, что все заголовки постов в красивом оформлении.

Подобным образом можно оформить и участок текста в сообщении. Здесь более подробно об этом.

Всегда перед тем как что-то менять в шаблоне не забывайте делать резервное копирование!

У меня на сегодня всё. Буду признательна если поделитесь, кому это пригодилось.

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

введите пожалуйста свой адрес электронной почты :