воскресенье, 5 февраля 2017 г.

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

07:32 By , , No comments


Доброго времени суток, уважаемые читатели. Последнее время в некоторых блогах на WP мне попадаются статьи, которые оформлены вот таким образом:
bloki-teksta
Смотрится очень эффектно, по-крайней мере, на мой вкус, и я подумала, что здорово было бы сделать в своем блоге так же.
Позже, когда я завела рубрику "Задайте свой вопрос", и стала публиковать ответы, так же задумалась, как здорово было бы интересней оформить письма от читателей.
Пока я была только в мыслях, от моего постоянного читателя 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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCbuJbVEpj_6EKG53nOT1V1p3WSY0Ac87o213j1w7HfuY9P8p7k673gxrwlkP_EHBiexb_QdZjsZ66X0vBpA__SPFgtIHn8aACWRMWWQSCCbZxgqzCyGhRKhaagN-QjGKaW-8_Uh5g2NM/");
}
.mail {
background-color:#E4F6F8;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWZi1e1FgREo6GI1PKZI6tjbo-f0VeYFrLUDQj8MLn1rFjyYYG3kicuF9k7D-kkT9mZCv0juwhQve3JusvZ68mYTs-Knb-0Mxzl70JK1grmVj7MYMP3ZanILqGV8Czm7SpDonNGTnO6v0/");
}
.info {
background-color:#FFFFCC;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmBrIxUbUWBI0aD0eJYrR4NtxL9Ld_ABsKCF2P95kwCXT9l_luyqrZKT1DM0bM0hmulCCILoq-5qHsjhnTJb2QRDaoWrBPOTzX2Fk-_hWz6R2R3BjotyIJugBjJ9rKGo-ad9KIrrv0Gss/");
}
.kod { background-color:#E9FFD4;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOnLnBf7Dp1ZPPEnB5ZggE9CK0PDe3Rpisqks839pLOLCcsi62owb7d73kWoTG4ufDDyLlUJxGoDy6kC7vFCIzN7m-ZY6w5OfOy-t_cYVY7P2imfqWosmZJ0OQQ4aLXyd3Q6BIVuh46340/");
}
Этот код определяет цвет и путь до картинки. В этом коде вы можете устанавливать свой цвет, и вставлять свою картинку, просто указав ее голый URL. Так же, к этому коду вы можете добавлять стиль для шрифта, указывать его размер и другие параметры (это уже для более продвинутых пользователей).
Сохраняем шаблон. Проделав это однажды, больше к этому мы не вернемся. Теперь главное запомнить, как в теле сообщения выделять нужные куски текста, чтобы они принимали тот внешний вид, который мы для них определили.
Итак, вы пишите свою статью как обычно. Пользуетесь ли вы редактором блогов или отправляете через визуальный редактор 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 - нет скругленных углов и тень, практически, не видна. В остальном все смотрится очень красиво (на мой вкус).
Вот таким не хитрым способом можно внести визуальное разнообразие в свои статьи. Надеюсь, это пригодится не только мне.
Удачи вам.

0 коммент.:

Отправить комментарий