В данной статье мне бы хотелось осветить вопрос эстетики, который будет актуален для всех пользователей 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-кодов цветов
Применяйте и впечатляйте! Всем красоты и удачи!
Катя просто супер! Огромное спасибо!
ОтветитьУдалитьвсё вроде получается,только цитата уходит немножко вправо.Подскажите как её сдвинуть левее
ОтветитьУдалить