Красивое оформление статей в блоге Blogger/Blogspot

Доброго времени суток, уважаемые читатели. Последнее время в некоторых блогах на WP мне попадаются статьи, которые оформлены вот таким образом:


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

Позже, когда я завела рубрику «Задайте свой вопрос», и стала публиковать ответы, так же задумалась, как здорово было бы интересней оформить письма от читателей.
Пока я была только в мыслях, от моего постоянного читателя Retliff поступил комментарий с просьбой рассказать, как сделать нечто подобное. Возможно, он подразумевал какое-то более простое решение, чем то, которое в итоге сделала я.

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

Главное, обращаю сразу ваше внимание на то, что после всех настроек, когда вы захотите, чтобы определенный кусок текста находился в определенном блоке, нужно будет править HTML код. Сложностей совершенно никаких в этом нет, но потребует от вас внимательности. Итак, приступим.

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

  1. Важно — vajno.
  2. Информация — info.
  3. Письма от читателей — mail.
  4. Код – kod.

Каждому блоку нужно придумать свое название, которое вы должны всегда помнить, потому что постоянно будете его использовать.

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

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

Открываем Дизайн – Изменить HTML, находим строчку:
]]></b:skin>
Весь дальнейший код CSS вы должны поместить до этой строчки.

Итак, у нас есть названия блоков, и есть код, который для всех блоков одинаков. Внесем этот код в шаблон блога.

.vajno, .info, .mail, .kod {
margin:10px;
padding:15px 20px 15px 80px;
border:1px solid #999999;
border-radius: 10px;
-moz-border-radius:10px 10px 10px 10px;
box-shadow:2px 2px 3px #999999;
-moz-box-shadow:2px 2px 3px #999999;
-webkit-box-shadow: #999 2px 2px 3px;
background-position:20px 50%;
background-repeat:no-repeat;
position:relative;
text-align:justify;
}
Посмотрите внимательно, в первой строке через запятую перечислены названия моих блоков vajno, info, mail, kod (перед каждым названием указывается точка). В дальнейшем, если вы придумаете для себя новый блок, то этот код не нужно дублировать, нужно будет только вписать в верхнюю строку название (с точкой) нового блока через запятую.

Дальше мы должны вставить код для каждого блока в отдельности. У меня этот код такой:

.vajno {
background-color:#FFD4A0;
background-image: url(«http://lh4.ggpht.com/_G92voTj-yF0/TO0c43ebP4I/AAAAAAAAA7Y/9LgBZ8FG_70/vajno.png»);
}
.mail {
background-color:#E4F6F8;
background-image: url(«http://lh3.ggpht.com/_G92voTj-yF0/TO0Yze20zPI/AAAAAAAAA7U/AuB_pacAJy8/mail.png»);
}
.info {
background-color:#FFFFCC;
background-image: url(«http://lh5.ggpht.com/_G92voTj-yF0/TO0osHobz7I/AAAAAAAAA7c/UuJQ0vP5k18/info.png»);
}
.kod { background-color:#E9FFD4;
background-image: url(«http://lh3.ggpht.com/_G92voTj-yF0/TO0qiaCAffI/AAAAAAAAA7k/DRmMoObB4ss/kod.png»);
}
Этот код определяет цвет и путь до картинки. В этом коде вы можете устанавливать свой цвет, и вставлять свою картинку, просто указав ее голый URL. Так же, к этому коду вы можете добавлять стиль для шрифта, указывать его размер и другие параметры (это уже для более продвинутых пользователей).

Сохраняем шаблон. Проделав это однажды, больше к этому мы не вернемся. Теперь главное запомнить, как в теле сообщения выделять нужные куски текста, чтобы они принимали тот внешний вид, который мы для них определили.

[ads1]Итак, вы пишите свою статью как обычно. Пользуетесь ли вы редактором блогов или отправляете через визуальный редактор Blogger – не важно. После того, как статья готова, но ещё не опубликована, переходим на вкладку Изменить HTML.

Находим тот абзац текста, который вы хотите выделить в определенный блок. И окружаем его тегами таким образом:

<div class=»название блока»>Текст, который должен находиться в блоке</div>
Например, если вы хотите часть текста показать в блоке info, то указываете код так:
<div class=»info»>Текст, который должен находиться в блоке info</div>
Получится так:
Текст, который должен находиться в блоке info
Небольшое замечание:
Если вы выравниваете текст статьи по ширине или по центру, то все абзацы по умолчанию в коде HTML уже находятся внутри тегов <div style=»text-align: justify;»>Абзац</div>. В таком случае просто замените открывающий тег <div style=»text-align: justify;»> на тот, который нужно, например <div class=»info»>.
Код проверяла в браузерах Mozilla Firefox, Google Chrome, Opera и Internet Explorer. В браузере Internet Explorer — нет скругленных углов и тень, практически, не видна. В остальном все смотрится очень красиво (на мой вкус).

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

Екатерина Михайлова

View Comments

  • «В Opera нет тени вообще.» — потому что не указано свойство box-shadow.

  • SEO-Дилетант'ка says:

    Спасибо большое за замечание, исправила. Как хорошо, когда есть кому подсказать:)

  • Flee.lancer says:

    Классная статья! Искала как раз нечто подобное для своего блога. Иногда нужно выделить красиво текст даже для восприятия читателя.. Разбавлять картинками конечно вариант, но это легче для блога.

    З.Ы. а если усложнить задачу? и можно добавить вместо заливки? - мне это не нужно, ну мало ли захочется проявить фантазию?))

  • Спасибо огромное, Катя! Я спрашивал именно об этом!-)
    Пока ждал твоего ответа - нашёл в Интернете сервис "Рамочник".
    Он позволяет оформить тект рамками, но никакой автоматизации процесса!-)
    Как всегда всё очень доходчиво и профессионально!
    Слово "Дилетант" в названии твоего блога уже давно утратило актуальность!-)

  • mangust_ru says:

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

  • Дмитрий says:

    спасибо, очень полезный трюк, за код отдельное спасибо :)

  • Очень красиво!
    1.А если без картинки делать - то просто не ставить ссылку на нее?
    2.В WP есть плагин который так делает? (просто завел недавно и там блог)

  • SEO-Дилетант'ка says:

    Усложнить задачу можно, только для этого нужно код дорабатывать. Дело в том, что картинка в блоке уже является фоном (background-image), т.е. заливкой, а залить один бокс двумя фонами сразу нельзя.

  • SEO-Дилетант'ка says:

    Сергей, я рада, что смогла угодить тебе. "Рамочник" теперь в топку? :)

  • SEO-Дилетант'ка says:

    Пока ещё мало где изменила, но некоторые статьи постепенно доработаю. Спасибо.

Share
Published by
Екатерина Михайлова
Tags: blogger

Recent Posts

Диагностика сайта и Страницы в поиске. Разбор ошибок в Яндекс.Вебмастер

Доброго дня, читатели блога SEO-Дилетанта. Я всегда получаю много вопросов от вебмастеров, владельцев сайтов и блогеров об ошибках и сообщениях,…

7 лет ago

Обзор uSocial — сервиса социальных кнопок*

*Рекламный обзор Доброго дня, читатели Блога SEO-Дилетанта. Кнопки «Поделиться» и «Подписаться на обновления» необходимы любому сайту для…

7 лет ago

Протокол HTTPS. Как настроить и перевести сайт на https на примере WordPRess

Доброго дня, читатели блога SEO-Дилетанта. На днях* в августе 2016 года я полностью перевела свой блог на защищенный протокол…

7 лет ago

Мои работы по созданию блога и сайта за 2016 год

Доброго дня, читатели блога SEO-Дилетанта. Обычно подобные посты пишут в конце года, и я готовила его в декабре, но не успела…

7 лет ago

Настройка WordPress — самое важное и актуальное для быстрого старта блога

Доброго дня, читатели Блога SEO-Дилетанта. В сети множество статей о создании и настройке блога на WordPress. Каждый автор видит…

8 лет ago

Как выбрать хостинг — мой личный опыт

Доброго дня, читатели блога SEO-Дилетанта. О том, как выбрать хостинг, написано немало статей. Только в Яндексе на данный…

8 лет ago

This website uses cookies.