Как стилизовать цитаты в Blogger

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

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

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

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

цитаты блоггера

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

”.

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

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

Чтобы изменить внешний вид цитируемого текста, необходимо отредактировать базовый HTML-дизайн вашего блога. Я рассказывал, как это редактировать, в своей предыдущей статье о Blogger Favicons.

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

цитаты блоггеров - панель инструментов

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

цитаты блогера - главная

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

цитаты блоггера edit-html

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

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

Варианты, которые я использую для цитируемого текста в моем личном блоге TechComet, следующие:

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

techcomet-цитата

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

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

Маржа

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

Цвет фона

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

Заполнение

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

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

Стиль шрифта

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

Границы

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

Заключение

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

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

6 комментариев

  1. спасибо за вашу информацию .. действительно помогли мне

  2. Это здорово. Тем не менее, я обнаружил, что серая область цитат соответствует моему обычному тексту с правой стороны. Я хочу переместить край серого поля цитаты влево, чтобы действительно заключить эту цитату в рамку, чтобы у нее не было того же поля справа. Есть ли способ сделать это?


    Не могли бы вы предоставить скриншот? Наглядные пособия всегда помогают!

  3. Привет, Abhiroop, я ищу очень простую помощь по настройке css с цитатой на blogger. Я полагаю, это будет довольно просто, но я понятия не имею, как это сделать. Не могли бы вы мне помочь? С новыми шаблонами blogger (через конструктор шаблонов), если я хочу использовать шрифт Google для цитат, как мне изменить код? Дизайнер шаблонов позволяет изменять шрифт текста сообщения, заголовка блога, гаджетов и т. Д., Но не цитаты. Итак, если, например, я хочу использовать шрифт Google Calligrafitti в цитатах, как мне это сделать? Мы будем благодарны за вашу помощь, и вы обязательно упомянете в моем блоге. Большое спасибо заранее. :)

  4. +1 За это

Комментарии закрыты.