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

красивый заголовок
Приветствую вас, читатели, друзья и гости блога. Очередная шпаргалка в категорию дизайн. Предложу вам ещё один вариант, как красиво можно выделить название сообщения в Блоггере. Код сегодня совершенно простой и даже, если вы начинающий блогер, то трудностей при реализации у вас не возникнет.
Посмотреть о чём идёт речь можно на тестовом блоге.

Код.

<style>.post h3 {
background: url("http://rus-linux.net/MyLDP/mm/inkscape/foto/aigtool-calligraphy.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 #CC3333 ;
text-shadow: 0 1px 0 #CC3333 ;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
-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>
Красным цветом я отметила адрес маленькой картинки. Вы можете подобрать свою и заменить. И синим цветом - это цвет рамки и тени текста заголовка. Зелёным - размер шрифта.

Копируйте предложенный код в блокнот подгоните свои цветовые варианты. Код можно установить в гаджет HTML/JavaScript. Или непосредственно в шаблон блога. Вкладка шаблон - изменить HTML. Находим строку ]]></b:skin> и над ней его устанавливаем. Только уже без тегов <style> код</style>.

Если такой вариант оформления заголовка сообщения вас не устраивает посмотрите другой в этом сообщении.

И сегодня у меня всё. Спасибо вам за визит и до встречи.

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

Введите Ваш email


11 комментариев:

  1. Мне очень понравился такой заголовок сообщения. И ещё тем, что можно код вставить в HTML сообщения, а не шаблона! Подумаю, где его применить!

    ОтветитьУдалить
    Ответы
    1. Пользуйтесь, Ирина. Всё на самом деле достаточно просто. Если подобрать отдельно картинку и изменить цвета,то вообще получится оригинальное оформление.

      Удалить
  2. Виктория, здравствуйте. Получилось чуть интереснее сделать заголовок сообщения, благодаря Вам. Спасибо!!! Правда, в предыдущих сообщениях кое-где текст выделился так же, но я поправила. Всех Вам благ!

    ОтветитьУдалить
    Ответы
    1. Спасибо большое Вам. Пойду посмотрю, что у Вас получилось.

      Удалить
  3. В последнем сообщении своего тестового блога БиблиоИрина (можно зайти в него через блоги "Волшебный фонарик" и "Блог Кота Васьки" - СМОТРИТЕ "МОИ БЛОГИ") только что я сделала оригинальную прокрутку текста и красивый заголовок сообщения. Только у меня получился красивый не заголовок, а подзаголовок сообщения. Но тоже КРУТО! Мне так тоже нравится. Потом также сделаю на ВОЛШЕБНОМ ФОНАРИКЕ и БЛОГЕ КОТА ВАСЬКИ.
    ВИКТОРИЯ! БОЛЬШОЕ СПАСИБО!

    ОтветитьУдалить
  4. Интереснее было бы разные картинки и цвета подбирать! Можно любую картинку уменьшить?

    ОтветитьУдалить
    Ответы
    1. Пожалуйста Ирина. Можно конечно уменьшить любую. но надо заметить, что может пострадать и качество. Сюда лучше устанавливать размером 32Х32. Или чуть больше. Вообще-то их много на сайтах иконок.

      Удалить
  5. Виктория, добрый день! У меня сейчас на обеих блогах ОЧЕНЬ красивые подзаголовки сообщения. На Блоге Кота Васьки я ничего не меняла. А на блоге "Волшебный фонарик" изменила цвет, немного размеры (совсем незаметно)и убрала картинку. Пожалуйста, посмотрите! Получилось просто замечательно!

    ОтветитьУдалить
    Ответы
    1. Да, я уже забегала к Вам. Возможно вы меняли теги заголовков поэтому у вас сейчас так выделены подзаголови.

      Удалить
  6. Виктория спасибо за обучение.Пытаюсь делать как Вы советуете, начинает получаться, даже подправила для себя цвет рамки.

    ОтветитьУдалить
  7. Любовь, не за что. Желание и терпение и всё получиться.

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

Пользовательский поиск