30+ стилей блочных цитат: настройте блочную цитату в Blogger с помощью CSS

30+ стилей блочных цитат

Здесь предоставлены некоторые варианты стилей цитат, их установка и настройка в Blogger. По сути, стиль блочной цитаты - это типографский элемент, основанный на HTML-теге «<blockquote>». Обычно мы используем его для цитирования некоторых строк, абзаца или блока текста. На самом деле, цитата используется для выделения фрагмента текста от другого текста. Поэтому мы должны использовать некоторые привлекательные стили цитат, чтобы выделить текст и сделать его другими.

Сегодня я собираюсь представить некоторые стильные стили блочных цитат. Они основаны на чистом CSS. На самом деле, вы можете просто взять код отсюда и вставить его в свой блог. Вы можете выбрать желаемый стиль цитаты из списка ниже и следовать инструкциям, чтобы добавить его в свой блог Blogger. Также я предоставлю пошаговое руководство для всего процесса.

Как применить стили цитат в Blogger?

Мы должны использовать цитаты, чтобы сделать наш контент более понятным, логичным и информативным. На самом деле, все последние шаблоны Blogger поставляются с блок-цитатами по умолчанию. Если вам это не нравится, этот список предоставит вам несколько красивых стилей CSS-цитат. Используя любой из этих стилей, мы можем улучшить внешний вид блочной цитаты нашего блога. Итак, давайте узнаем, как настроить blockquote в Blogger

Шаг 1. Сначала создайте резервную копию шаблона и войдите в свою учетную запись Blogger и перейдите в раздел « Тема ». Теперь нажмите на кнопку « Редактировать HTML ».

Шаг 2. Найдите «<b:skin>… </b:skin>» и раскройте его.

Шаг 3: Прокрутите весь путь вниз и найдите конечный код « ]]></b:skin> ».

Шаг 4: выберите нужный стиль цитаты из списка ниже и вставьте его прямо над «]]></b:skin>», как показано на следующем рисунке.

Шаг 5: Наконец, нажмите кнопку « Сохранить тему » и зайдите в свой блог, чтобы увидеть измененный стиль цитат.

Устранение неполадок: если вы видите, что настроенный вами стиль цитат блога не совпадает с тем, который вы выбрали в приведенном ниже списке, стиль по умолчанию может конфликтовать с новым. В этом случае, нужно выполнить действия, описанные мною ниже.

Основные способы устранения неполадок.

1. Войдите в свою учетную запись Blogger и перейдите в раздел «Тема»> «Редактировать HTML» и найдите стиль блочного цитирования CSS по умолчанию для шаблона.

2. Вы должны закомментировать (отключить) весь блок цитат по умолчанию, используя / * …. Код… * / как показано выше. Наконец, нажмите кнопку « Сохранить тему », и все готово.

Зайдите в свой блог снова> Удалите историю браузера и кэш> перезагрузите свой блог, и вы увидите, что вновь примененный стиль цитат отображается правильно. Теперь давайте выберем желаемый стиль цитат Blogger из следующего списка.

Список стилей CSS-цитат для Blogger:

Вы можете использовать любой из следующих CSS-кодов, чтобы настроить стиль цитат по умолчанию в своем блоге. Фактически, эти стили также будут работать для любых других страниц CMS или HTML. Поэтому выберите желаемый стиль и сделайте свой блог более профессиональным и привлекательным сегодня.

CSS Blockquote Стиль: 1

blockquote {font: 16px/24px Arial, sans-serif;text-align:left;color: #666;margin: 15px 10px;padding: 15px 10px;}
blockquote:before {background: #ddd;text-align: center;height: 25px;content: open-quote;float: left;line-height: 42px;border-radius: 25px;font-size: 24pt;color: #fff;vertical-align: -0.5em;position: relative;margin-right: 0.5em;display: block;width: 25px;}
blockquote:after {display: block;text-align: center;color: #fff;float: right;border-radius: 25px;vertical-align: -0.5em;content: close-quote;font-size: 24pt;line-height: 42px;background: #ddd;position: relative;margin-right: 1em;width: 25px;height: 25px;}
blockquote:hover:after, blockquote:hover:before {transition: all 350ms;background-color: #555;-moz-transition: all 350ms;-o-transition: all 350ms;-webkit-transition: all 350ms;}

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

CSS Blockquote Стиль: 2

blockquote {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhHeBnHd_o7hgrk-6cLLXXlPIHEOe1DIC6RZAvJif6iQNqarpzP6BodKSY5Gnm637EloHAWbfXTppUWLfOT0UYc8mf2pZ-hpGIAm0FnEzUqtxJmajCJt9XYyU6XDfL5sASfDNdh172HvkI/s1600/bo-blockquote.png) no-repeat;
font-size:15px;text-align:left;color: #555;
border: dashed 1px #eee;margin: 25px 35px;padding: 20px 30px 30px 40px;}

Среди многих стилей blockquote, это очень чистый и легкий дизайн. На самом деле, знак одинарной кавычки даст хороший визуальный эффект и правильно выделит текст. Кроме того, он будет создавать пунктирную рамку вокруг текста.

CSS Blockquote Стиль: 3

blockquote{border-left: 15px solid #c76c0c;font-family: Georgia, serif;font-size:15px;text-align: justify;background: #fff;line-height: 1.2;
display:block;margin: 0 0 20px;padding: 15px 20px 15px 45px;position: relative; font-size: 16px;color: #666;
border-right: 2px solid #c76c0c;box-shadow: 2px 2px 15px #ccc;-webkit-box-shadow: 2px 2px 15px #ccc;-moz-box-shadow: 2px 2px 15px #ccc;}
blockquote::before{font-size: 50px;position: absolute;color: #999;left: 10px;top:5px;font-weight: bold;content: "1C";}
blockquote a{cursor: pointer;color: #c76c0c;text-decoration: none;background: #eee;padding: 0 3px;}
blockquote a:hover{color: #555;}

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

CSS Blockquote Стиль: 4

blockquote:before,blockquote:after{background:transparent;}
blockquote{line-height:normal;font-size:16px;color:#666;padding:12px 0 0 44px;text-align:left;font-style:italic;margin:10px 30px 20px;position:relative}
blockquote:before{color:#ccc;content:"1C";line-height:1;font-size:85px;left:-5px;position:absolute;top:-5px;font-family:Georgia,serif;}

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

CSS Blockquote Стиль: 5

blockquote{text-align:left;
border:1px solid #ededed;
padding:35px;font-size:15px;margin:10px 0;
font-family:'Cookie',cursive;color:#676767;}

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

CSS Blockquote Стиль: 6

blockquote:before, blockquote:after{content: "";}
blockquote{margin: 0 2em;font-size:16px;line-height:22px;text-align:left;quotes: "" "";border-left:3px solid #737e7e;padding-left:10px;}

Очень короткие CSS-линии создают магию для этого дизайна. На самом деле, этот стиль цитирования предназначен для любителей простоты. На самом деле дизайн свободен от каких-либо внешних таблиц стилей с использованием нескольких свойств CSS.

CSS Blockquote Стиль: 7

blockquote {
background: #f9f9f9;margin: 10px 20px;text-align:left;font-size:16px;
border: 1px solid #d2d2d2;
color: #555;padding: 24px;font-style: italic;}

Это отобранный блочный дизайн с курсивным шрифтом. Я должен сказать, что сочетание цветов и способ представления цитаты с использованием этого стиля будет удивительным. На самом деле, этот стиль генерируется с использованием нескольких CSS-свойств.

CSS Blockquote Стиль: 8

blockquote {font-family: "Merriweather", Georgia, serif;font-style: italic;
padding-left: 35px;padding: 17px 58px 20px 55px;font-size: 16px;text-align:left;font-weight: 300;color: #333;background: #F2E4A0;margin: 21px 30px;}
blockquote:before {content: "1C";margin-left: -35px;line-height: 1.33;float: left;font-weight: 700;font-style: normal;font-size: 25px;color: #111;}

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

CSS Blockquote Стиль: 9

@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";
blockquote{padding:15px;margin-left:0;border:1px solid #d8d8be;
background:lightyellow;font-style:italic;text-align:left;font-family:Georgia;}
blockquote:after{font-family:FontAwesome;content:'\f10e';display:inline-block;font-weight:500;
font-style:normal;line-height:1;-moz-osx-font-smoothing:grayscale;
-webkit-font-smoothing:antialiased;color:#999985;margin-left:10px;}
blockquote:before{content:'\f10d';font-style:normal;display:inline-block;font-family:FontAwesome;
line-height:1;-webkit-font-smoothing:antialiased;margin-right:10px;font-weight:500;
color:#999985;-moz-osx-font-smoothing:grayscale;}

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

CSS Blockquote Стиль: 10

blockquote {
color: #8ABA9C;text-align:left;border-left:5px solid #8ABA9C;
padding: 21px;line-height: 20px;
margin: 30px 40px;float: left;}

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

CSS Blockquote Стиль: 11

@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";
blockquote{ font-size: 16px; text-align:left; height: auto; margin: 0px; font-family: 'Roboto Slab', serif;
padding: 20px; font-style:italic; background: #F8F8F8; overflow: hidden;}
blockquote:before {content: "\f10d"; color: #00bf8f; margin-right: 6px; font-family: fontawesome;}
blockquote:after {font-family: fontawesome; content: "\f10e"; margin-left: 6px; color: #00bf8f;}

CSS Blockquote Стиль: 12

@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";
blockquote{background:#f7f7f7;padding:25px;border:1px solid #eee;text-align:justify;position:relative;
font-weight:500;clear:both;font-style:italic;}
blockquote:before{color:#6f6a6a;position:absolute;line-height:1;font-size:25px;z-index:0;
transition:.2s ease-in;font-family:FontAwesome;left:-18px;top:-21px;font-style:normal;padding:7px;content:"\f10d";border:1px solid #ddd}
blockquote:after{content:"\f10e";border:1px solid #ddd;position:absolute;font-size:25px;color:#6f6a6a;z-index:0;
font-family:FontAwesome;line-height:1;bottom:-21px;right:-18px;font-style:normal;transition:.2s ease-in;padding:7px;}

CSS Blockquote Стиль: 13

blockquote{margin:0 auto;position:relative;line-height:24px;padding:24px 20px 24px 45px;text-shadow:0 1px 1px white;
border:1px solid rgba(0,0,0,0.05);background-color:#F2F2F2;
background-image:
-webkit-radial-gradient(center,cover,rgba(255,255,255,0) 0%,rgba(255,255,255,0.1) 90%),
-webkit-repeating-linear-gradient(top,transparent 0%,
transparent 24px,rgba(139,207,173,0.7) 24px,
rgba(139,207,173,0.7) 25px);}
blockquote:before{content:'';position:absolute;top:0;bottom:0;left:20px;border:4px solid rgba(139,207,173,0.7)}
blockquote:after{background:rgba(242,246,193,0.9);z-index:-1;left:0;right:0;transform:rotate(2deg);border:1px solid rgba(170,157,134,0.7);}

CSS Blockquote Стиль: 14

blockquote {
border-left:2px dashed #FACC2E;color:#FACC2E;font-size:14px;
line-height:18px;font-style:italic;
text-align:justify;margin:15px 30px;padding-left:20px;
font-family:Georgia,"Times New Roman",Times,serif;}

CSS Blockquote Стиль: 15

blockquote{quotes:none;margin:1.5em 0;text-align:left;font-size:16px;}
blockquote a{color:#34495f;}
blockquote{display:block;border-left:6px solid rgba(2,2,2,0.4);border-radius:3px;position:relative;
color:#5c5544;background-color:#f2dca8;padding:20px 15px 20px 25px;margin:.75em 0;}

CSS Blockquote Стиль: 16

blockquote {
font-family: Georgia, serif;font-style: italic;background-color:#f5f5f5;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjepsGlOJy_0UWd3IWVhVppwIff15mlPeI048nat7MPRXQk1XrvSTuJTJD2Rv5oJ0SwCKtqZNjqqIomyydnzZ0gWrLtcPzoWw9l-K7JlMySKWDQLL1aPtZYed91rKt00sn125wfJr5776Mx/s1600/quote-icon.png) 0 0 no-repeat;
padding-left:40px;padding-top:10px;margin:1em 0;}

CSS стиль цитаты: 17

@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";
blockquote { margin: 20px 0; color: #666; border: 1px solid #e1e1e1; padding: 20px; background: #f6f6f6; }
blockquote:before {text-align:left;margin-right: 3px; font-family: fontawesome; content: "\f10d"; color: #FF5353; }
blockquote:after { content: "\f10e"; font-family: fontawesome; margin-left: 5px; color: #FF5353; }

CSS Blockquote Стиль: 18

blockquote{text-align:left;position:relative;display:block;background-color:#FCE5AE;color:#555555;
border-radius:4px;padding:10px 15px;margin:.75em 0;}blockquote a{color:#34495e;}
blockquote:before{height:0;content:"";width:0;position:absolute;left:15px;bottom:100%;
border:7px solid transparent;border-color:transparent transparent #FCE5AE}

CSS Blockquote Стиль: 19

blockquote {background: #fafafa;font-style: italic;margin: 1em 1em 1.5em 1em;
font-size: 16px;padding: 2.1em 1.5em;
border-radius: 5px;border-left: 15px solid #1ABC9C;box-shadow: 11px 10px 0px #eee;}

CSS Blockquote Стиль: 20

@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";
blockquote{position: relative;color: #888;line-height: 1.4;border-left: 0;padding: 60px 30px 45px;font-size: 16px!important;font-family: 'Droid Serif',serif;margin: 0;z-index: 1;}
blockquote:after, blockquote:before {color: #f3f3f3;line-height: 1;font-family: FontAwesome;position: absolute;font-size: 50px;transition: .2s ease-in;z-index: 0;}
blockquote:before {content: "\f10d";top: 0px;left: 0;}
blockquote:after {content: "\f10e";bottom: 0px;right: 0;}
blockquote:hover:after {color: #F5BB00;}blockquote:hover:before {color: #F5BB00;}

CSS Blockquote Стиль: 21

@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";
blockquote{margin-left:0;font-style:italic;font-weight:500;font-size:14px;padding:0px;
padding-left:60px;margin:40px 0px;position:relative;}
blockquote:before {content:"\f10d";font-family:FontAwesome;text-align:left;font-size:19px;
line-height:20px;position:absolute;color:#fff;background:#eee;padding:10px;
left:0;top:0;}blockquote:hover:before {color: blue;}

CSS Blockquote Стиль: 22

blockquote{padding:20px 30px;text-align:left;
background: #999 no-repeat right;
color: #fff;font-size: 16px;line-height: 1.4;
border: 0;border-radius: 10px;margin: 0 30px 10px;display: block;
box-shadow: 11px 10px 0px #555;}

CSS Blockquote Стиль: 23

blockquote {position: relative;
display: block;border-left: 5px solid #21610B;
padding: 1.5em 1.5em 1.5em 3.5em;border-right: 2px dashed #21610B;margin: 0 0 1.5em;}
blockquote::before {position: absolute;font-size: 62px;font-weight: bold;
content: "1C";line-height: 1;top: 10px;left: 10px;}

CSS Blockquote Стиль: 24

blockquote{border-left:5px solid #E7C297;background:#FFD4A1;
text-align:left;
margin:20px 30px;padding:20px;}

CSS Blockquote Стиль: 25

@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";
blockquote{background:#FF6052;margin-left:2em;padding:1em 1em;margin-right:2em;color:#fff;
border:3px solid #c94033;font-size:100%;box-shadow:5px 5px 0 rgba(0,0,0,0.1);}
blockquote:before {font-family:FontAwesome;content:"\f10d";font-style:normal;padding-right:4px;
text-decoration:inherit;color:#fff;font-weight:normal;}

CSS Blockquote Стиль: 26

@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";
blockquote{margin:0 auto;background:#f9f9f9;padding:30px 40px;margin-top:1em;margin-bottom:30px;color:#888;position:relative;}
blockquote:after{position:absolute;font-family:"FontAwesome";content:"\f10e";font-size:16px;right:30px;
bottom:20px;font-style:normal;color:#aaa;font-weight:normal}

CSS Blockquote Стиль: 27

@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";
blockquote{background: #fbfbfb; border-left:5px solid #22B7AD; margin-left:0; padding:10px 15px; font-size:14px; color:#555; font-family: georgia; line-height:22px; font-style: italic;}
blockquote:before, blockquote:after{font-family:FontAwesome;display:inline-block; font-style:normal; font-weight:500;
line-height:1;-moz-osx-font-smoothing:grayscale; -webkit-font-smoothing:antialiased; color:#777;}
blockquote:before{content:'\f10d'; margin-right:7px;}blockquote:after{margin-left:10px;content:'\f10e';}

CSS Blockquote Стиль: 28

blockquote {font-family: Georgia, serif;border-left:5px solid #FF7F01;line-height: 1.45;margin: 0.25em 2em;font-size: 14px;
font-style: italic;padding: 1.25em 40px;position: relative;background:#4b8baf;color: #ffffff;}

CSS Blockquote Стиль: 29

blockquote {font-style: italic;color:#fafafa;text-align:left;background: #22B7AD;
background: -moz-linear-gradient(top, #22B7AD 0%, #0e0e0e 100%);background: -webkit-linear-gradient(top, #22B7AD 0%,#0e0e0e 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#22B7AD), color-stop(100%,#0e0e0e));
background: -o-linear-gradient(top, #22B7AD 0%,#0e0e0e 100%);border: 1px solid #ccc;border-radius: 6px;
background: linear-gradient(to bottom, #22B7AD 0%,#0e0e0e 100%);background: -ms-linear-gradient(top, #22B7AD 0%,#0e0e0e 100%);
box-shadow: 1px 1px 1px #ccc;padding:20px 30px;}

CSS Blockquote Стиль: 30

blockquote {position: относительный; цвет: # 333; граница: 5px solid # 0ABCB1; border-radius: 100px; отступ: 30px 60px; поле: 2em 60px 60px; выравнивание текста: по центру; шрифт: 16px Камбрия, Грузия, без шрифт; шрифт вес: 600;}
blockquote: before {display: block; рамка: 10px solid # 21B028; позиция: абсолютная; фон: нет повторения прокрутки 0 0 #FFFFFF; content: ""; высота: 50px; ширина: 50px; справа: 100px; снизу: -40px ; border-radius: 50px; z-индекс: 10;}
цитата: после {позиция: абсолютная; фон: нет повторная прокрутка 0 0 #FFFFFF; отображение: блок; содержимое: ""; высота: 25 пикселей; граница: 10 пикселей сплошная # 5A8F00; снизу: -60 пикселей; справа: 50 пикселей; ширина: 25 пикселей ; border-radius: 25px; z-индекс: 10;}
@media только экран и (максимальная ширина: 500 пикселей) {
blockquote {padding: 30px 20px; поле: 1em 30px 30px; размер шрифта: 12px;}}

Вот полный список некоторых стильных стилей блочных цитат CSS с кодом. Не стесняйтесь использовать любой из вышеперечисленных стилей в своем блоге Blogger (как и любую другую CMS). Несмотря на то, что здесь я описал процесс настройки блочных цитат и устранения неполадок, не стесняйтесь обращаться за дополнительной поддержкой. Кроме того, пожалуйста, поделитесь этим постом, используя кнопки поделиться, чтобы поддержать мою тяжелую работу 😉.