воскресенье, 10 января 2016 г.

Красивое выделение текста (цитат) на Blogger

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

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

На скриншоте ниже вы видите способ выделения текста в цитату. 



То есть, изначально выбираем кусочек текста, который хотим обозначить - затем выделяем его мышкой, после чего кликаем на соответствующий значок "кавычки":






И чтобы текст, заключаемый таким образом в цитату, впоследствии всегда не просто ужимался, а заключался в красивую рамочку - устанавливаем html-код, который приведен ниже, через раздел Дизайн - Добавить гаджет - HTML/JavaScript в любое место структурного каркаса вашего блога.







А вот и тот самый HTML-код, который необходимо добавить (я его оформила как раз как цитату):


<style>.post blockquote{font-size: 15px;font-family: Verdana;font-weight: normal;font-style:italic;background-color: #F2F1F1;color: #000;margin: 5px 10px;padding: 20px 20px 20px 20px;border: 2px dotted lightgrey;border-radius: 10px;box-shadow: -1px -1px 12px 2px gainsboro;transition: background-color .777s;-webkit-transition: background-color .777s;-moz-transition: background-color .777s;-o-transition: background-color .777s;-ms-transition: background-color .777s;}.post blockquote:hover{background-color: #6495ED;CornflowerBlue ;color: #fff;}.post blockquote:active{background-color: #eeeeee;lightblue ; ;color: #000;}</style>


Расшифровка некоторых значений данного кода:

Color: #F2F1F1; -цвет фона, #6495ED; -цвет при наведении мыши, #eeeeee; -цвет при прокрутке.  Вы можете изменить данные части кода под свой вкус, руководствуясь таблицей HTML-кодов цветов


Применяйте и впечатляйте! Всем красоты и удачи!




2 комментария:

  1. Катя просто супер! Огромное спасибо!

    ОтветитьУдалить
  2. всё вроде получается,только цитата уходит немножко вправо.Подскажите как её сдвинуть левее

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