Рада видеть вас на моем блоге!!!

3.1.16

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

Заголовок в рамочке нужного цвета

Красивое оформление заголовков статей - это элемент дизайна блога. Не каждому блогу он подходит, но выбор - за автором. 


Блог можно оформить с помощью скриптов, вставленных во вкладке "Дизайн" с помощью гаджета "HTML/JavaScript".

Чтобы добавить скрипт "Красивое оформление заголовков статей",  в административной панели Blogger нажмите на вкладку "Дизайн" > "Добавить гаджет" > "HTML/JavaScript".

В содержание гаджета вставьте HTML-код (заголовок добавлять не нужно):

<style>.post h3 {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9xZOMrUmDyGjfiCv0XuAcM9UrSDs48J8QQX4qjr_Uy9s2XGqQL5Xb6IGE6CQ6zXo0ofs6kbG0kb3Wy3hKENqVKTwatSb2Jed7liDqlOfHWirRF8NLJ5izfoh1xSAbhemsEK9Bhp9ZzwU/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>

Только гаджет поставьте в footer блога, чтобы он не отражался в сайдбаре. 

Можно сделать обводку оформления заголовков статей не жёлтым, как на моём блоге, а другим цветом - красным, к примеру.

Для этого в Таблице HTML-кодов цветов  возьмите код другого цвета, к примеру, красного #FF0000.

Этим кодом нужно заменить в HTML-коде все коды, выделенные красным цветом. Посмотрите, что получится...


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


Буду рада, если вы поделитесь статьёй в социальных сетях, нажав на кнопочки:

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

  1. Красивое оформление заголовков статей. Копирую HTML/JavaScript и пытаюсь вставить на свой блог, но HTML не отображается, а только вот такой текст
    Источник: http://sunduktatianiosharinoi.blogspot.com/2016/01/blog-post.html Авторское право принадлежит© Бабушкин сундук Татьяны Ошариной Так что красиво оформить не получилось!

    ОтветитьУдалить
    Ответы
    1. Нина, попробуйте скопировать ещё раз. Внесла изменения. Спасибо за замечание - недогляд!

      Удалить
  2. Добрый день, Татьяна! Увидел вашу статью, которую искал. Мне как раз нужно было найти то, как нужно изменить стиль заголовков статей в блоге. Но у меня возник такой вопрос. На данный момент, стиль заголовков в статьях в моем сайте bvb-russia.com идентичны стилю ссылок. Скажите, как нужно сделать так, чтобы стиль заголовков не повторялся со стилем ссылок? Поясню: например, после использования вашего кода у меня хотя и визуально изменяется стиль заголовков, но все равно сохраняются стиль ссылок в плане эффекта hover

    ОтветитьУдалить
    Ответы
    1. У Вас очень яркий блог. Может быть Вам и не нудно ставить это оформление. Выберите сами- Ваш стиль или это оформление.

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

      Удалить
    3. Мой логин в скайпе ti_osharina. Может разберёмся с показом экрана?

      Удалить
    4. Вы знаете, у меня есть скайп, но нет вебки, так что тут не получится... Но для этого необязательно нужен скайп. Есть программа Teamviewer, но мне достаточно и просто в скайпе вам скрины экранов переслать и там могу обвести то, что имею ввиду

      Удалить
  3. Всем привет. Я тоже блогер

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