Как оформить свои цитаты в Blogger

Практически все блог-платформы, включая Blogger, имеют функцию «цитировать текст». Это полезно, когда вы хотите выделить разделы из других текстов или когда вам нужно выделить информацию из вашей собственной статьи. Цитируемый текст можно настроить так, чтобы он отличался от основной части статьи, и эти различия выделят его среди других.

В этой статье я опишу, как использовать функцию «цитировать текст» в блогах Blogger, а также как настроить ее внешний вид.

Как цитировать текст

Выбрать текст для цитирования довольно просто. Например, в Blogger вы можете «цитировать текст», выделив его и нажав кнопку «цитировать текст».

Вы также можете выбрать текст для цитирования, добавив

Как цитировать текст

».

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

Редактирование внешнего вида цитируемого текста

Для редактирования внешнего вида цитируемого текста необходимо изменить базовый HTML-дизайн вашего блога.

Сначала откройте панель управления Blogger и выберите «Дизайн».

Затем в главном окне Blogger выберите «Изменить HTML».

Откроется редактор шаблонов HTML. Здесь установите флажок «Развернуть шаблоны виджетов», чтобы убедиться, что весь HTML-код вашего блога виден.

Редактирование внешнего вида цитируемого текста" alt="цитаты блоггера edit-html">

Затем прокрутите вниз и найдите раздел, содержащий слово «blockquote». Все соответствующие параметры цитируемого текста будут располагаться между «{» и «}».

Настройка внешнего вида цитируемого текста

Для цитируемого текста я использую следующие параметры:

blockquote {
margin:1em 20px; 
background: #dfdfdf;
padding: 8px 8px 8px 8px;
font-style: italic;
}

Когда я выделяю текст для цитирования, это дает следующий эффект:

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

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

Маржа

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

margin
Настройка внешнего вида цитируемого текста
pan>

Цвет фона

Далее вы можете изменить цвет фона, отрегулировав тег «background». Я выбрала светло-серый цвет. Цвета в HTML-коде представлены шестью «шестнадцатеричными цифрами».

background: #dfdfdf

Отступы

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

Первая цифра — это расстояние (в пикселях) от верха текстового поля цитаты до начала текста, вторая цифра — это правый отступ, третья цифра — нижний отступ, четвертая цифра — левый. отступ (Короче говоря, 4 цифры начинаются сверху и идут по часовой стрелке).

padding: 8px 8px 8px 8px

Стиль шрифта

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

font-style: italic
font-style: bold

Границы

Я не решил добавлять рамку к цитируемому тексту, однако, если вы хотите, вы можете сделать это с помощью тега «border». Вы должны выбрать толщину, стиль и цвет рамки.

border: 2px solid #dfdfdf
border: 2px dotted #dfdfdf

Заключение

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

Сообщите нам, как цитируется текст в ваших статьях!

Заключение