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


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

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

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

Ну и код

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> и сразу над ней вставляем его. Проверьте шаблон. Если всё нормально, форматируем, сохраняем, возвращаемся и видим, что все заголовки постов в красивом оформлении.

Подобным образом можно оформить и участок текста в сообщении. Здесь более подробно об этом.
Всегда перед тем как что-то менять в шаблоне не забывайте делать резервное копирование!

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



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

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

23 комментария:

  1. Виктория, спасибо! Получилось, только блог стал загружаться медленно.

    ОтветитьУдалить
  2. Татьяна, пожалуйста. Наверное много уже кодов поставили в шаблон. Может от чего-то отказаться нужно.

    ОтветитьУдалить
  3. Спасибо. Воспользовалась! )

    ОтветитьУдалить
  4. Вика, очень красиво смотрится! А блог такой нарядный и веселенький)))

    ОтветитьУдалить
  5. Елена, не за что. Пользуйтесь.

    ОтветитьУдалить
  6. Ответы
    1. Вика, скажите, а можно изменить шрифт заголовков сообщений? Уже всю сеть облазила, не могу найти никак:(

      Удалить
    2. Александра , конечно можно. Прочитайте вот эту статью http://www.shpargalochki.ru/2015/01/vyrovnjat-zagolovki-po-centru.html
      Там есть пункт кака выровнять заголовок поста и по описанному способу вставляете размер шрифта font-size: 16px;

      Удалить
    3. Спасибо, это я знаю, и цвет даже разобралась как поменять:) а вот сам стиль шрифта на свой ? Которого нет в блоггере?

      Удалить
  7. Семейства шрифтов http://www.webpupil.ru/view_articles.php?id=6 или http://www.puzzleweb.ru/css/6_fonts.php

    Чтобы изменить сам шрифт так же можно добавить строку font-family:Georgia (всё в скобках фигурных ) или другие значения шрифтов. Можно найти в интернете.

    В Вашем случае это нужно вставить здесь (над строкой 356)

    .post-header {
    margin: 0 0 1.5em;
    line-height: 1.6;
    font-family:Georgia,Arial,; (ну или что-то своё)
    font-size: 90%;

    }

    ОтветитьУдалить
    Ответы
    1. Понимаете, поменять шрифт заголовка сообщения на таймс или Джорджию можно не роясь в коде, это можно изменить в дизайнере шаблонов. А вот веб-шрифты не действуют на русский язык, только на латиницу. Вот как тут быть, ума не приложу, уже всю голову сломала

      Удалить
    2. Этот комментарий был удален автором.

      Удалить
  8. Спасибо... слишком сложно для меня оказалось:( полдня пыталась разобраться и ни в какую.

    ОтветитьУдалить
  9. Александра. В выходные напишу об этом с картинками и подробнее. Есть ещё небольшие нюансы. Будет легче разобраться. Следите за обновлениями.

    ОтветитьУдалить
    Ответы
    1. Спасибо большое! Буду очень ждать!:)

      Удалить
  10. Доброго времени суток Вика! я не знаю почему, но когда вставляю код для заголовка над ]]> и сохраняю, у меня при просмотре блога, на самом вверху этот код (текст)во всей своей красе висит! меняла и на h2 h3 h4 h1, все равно! Такая же ерунда получалось, когда пыталась оформить заголовок сообщений с Большой буквой (у вас есть статья). Не знаю уже который день пытаюсь оформить заголовок не получается! Помогите пожалуйста! С уважением Тата!

    ОтветитьУдалить
  11. Тата, дайте хотя бы ссылку на блог, чтобы посмотреть. А с меню , что вы спрашивали не получится по вертикали и ширину изменить. Тут практически весь код переписывать нужно.

    ОтветитьУдалить
  12. Виктория благодарю за быстрый ответ! Извините, можно я отправлю вам скрин, по причине того что я как говорится собираю блог и он закрыт для индексации вот адрес https://2.bp.blogspot.com/-EQEaySYX3K8/V-VV78J1rmI/AAAAAAAABVM/-rWOb2In4YsQa4r-XidCtyYirtRZ_H2jACLcB/s1600/2016-09-23_231213.png на вверху обратите внимание на темном фоне текст скрина, который я внесла перед ]]>. И Еще будьте добры как сократить расстояние между заголовком и верхним краем блока и после заголовка? Вот скрин https://1.bp.blogspot.com/-gYeq6Ap-G_w/V-VV6yK7u9I/AAAAAAAABVI/2rmzZM83-lQ0BzSSOq0EtJdnM0hy58lNwCEw/s1600/2016-09-23_231554.png. С уважением Тата!

    ОтветитьУдалить
  13. Тата, скрин первый вижу у вас выскочили вкладки менюшки. А не заголовки сообщений. Попробуйте удалить этот гаджет. Вообще хотелось бы код просмотреть, так что скажешь.
    А со вторым о расстоянии
    убрать над body .navbar {height: auto;}
    убрать под .region-inner.main-inner, .column-right-inner {
    padding-top: 0 !important;
    }
    Также перед стилями в шаблоне

    ОтветитьУдалить
  14. Доброго времени суток Вика! Разобралась я с заголовком, с стилях внесла то что надо было в html, убрала и все получилось, спасибо большое! И с расстояниями все получилось, но почему-то только на второй день! Благодарю за интересные идеи и за поддержку! С уважением Тата.

    ОтветитьУдалить
  15. Доброго времени суток Вика! Разобралась я с заголовком, с стилях внесла то что надо было в html, убрала и все получилось, спасибо большое! И с расстояниями все получилось, но почему-то только на второй день! Благодарю за интересные идеи и за поддержку! С уважением Тата.

    ОтветитьУдалить

Пользовательский поиск
Foto Saya
My Photo