Blockquote - оформление цитат с помощью css. Примеры оформления

Обновлено: 27 февраля 2021Опубликовано

Для оформления цитат на блогах используется тег blockquote. В запись вставляют код

<blockquote> Текст цитаты </blockquote>

Цитаты могут содержать неавторский текст, коды, важную информацию и т.п.
Самые простые цитаты имеют вид текста с некоторым отступом от края и выделены вертикальной чертой. Дополнительно может быть выделение текста курсивом, жирным шрифтом или отличаться размером или цветом шрифта от основного текста.
Например, может быть оформлена так
2


или так
1
В стандартных шаблонах Blogspot обычно отсутствует (все не проверяла) css код blockquote, поэтому если вы будете использовать коды цитат в записях, то у вас ничего не изменится. Вначале нужно провести работу над шаблоном блога. В нестандартных шаблонах Blogger часто уже прописаны цитаты, но вполне возможно, что вы захотите изменить их стиль. Из этой статьи вы также узнаете, как это можно сделать, а также вы найдете примеры кодов css blockquote.

Примеры Blockquote

  1. Перейдите в Blogger> Шаблон > Изменить HTML,
  2. Сделайте резервное копирование шаблона,
  3. Расширьте шаблон виджета и при помощи клавиши Ctrl + F найдите отрезок кода .post blockquote Чаще всего он выглядит следующим образом: 
    .post-body blockquote { line-height:1.3em; }
OR
.post blockquote{ bla bla bla}

    Удалите этот код с содержимым {…} и замените на любой код, оформления цитаты, который вам понравится (примеры цитат с кодами будут приведены в этой записи ниже) или вы можете сами создать свой стиль.

  4. Вы можете не найти код Blockquote. В этом случае вам нужно найти отрезок кода ]]> </b:skin> и вставить перед ним код выбранного стиля цитаты.
    Код цитаты css

    .post blockquote {
margin : 0 20px;
padding: 60px 30px 40px 20px;
background : #F1F8FE url(URL изображения) no-repeat 350px 5px;
font: normal .9em "comic sans ms", Courier,"Times New Roman", Times, serif;
color : #000;
border: 8px dotted #DAB547;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}

    Настройка кода

    • padding: Отступы цитаты от границ, которые идут в таком порядке –> сверху, справа, снизу, слева
    • background : – Цвет фона или изображение, используемые в цитате. Шестизначный значение цвета фона  или ссылка на изображение –> замените код, выделенный желтым на прямую ссылку на изображение (URL изображения)
    • font : - Она включает в себя шрифт стиль , размер и тип соответственно.Соответствие цвета с кодом выше ссылке.
    • color : -  цвет текста. Вы можете подобрать различные цвета шрифта, используя нашу таблицу цвета
    • border : – Граница и ее значения - width, style and color – ширина, стиль и цвет соответственно.
    • Все остальные цитаты можно настроить таким же образом.
  5. Сохраните шаблон. Вставляйте код <blockquote><div> Текст цитаты </div></blockquote> в режиме HTML при использовании цитаты в сообщении.

Примеры цитат blockquote и коды к ним
owl2
Код:

blockquote {
margin : 0 20px;
padding: 60px 30px 40px 20px;
background : #F1F8FE url(https://3.bp.blogspot.com/_7wsQzULWIwo/SwhrZYtvrRI/AAAAAAAACRs/Q0k6eaIjnys/s1600/owl.png) no-repeat 350px 5px;
font: normal .9em "comic sans ms", Courier,"Times New Roman", Times, serif;
color : #000;
border-left: 8px dotted #DAB547;
}
blockquote p {
margin: 0;
padding-top:10px;
}

PurpleScannedCopy2
Код:

.post blockquote {
margin : 0 20px;
padding: 70px 20px 20px 40px;
background : #E4EAFE url(https://3.bp.blogspot.com/_7wsQzULWIwo/Swb4cWgxCUI/AAAAAAAACN8/k2V4tUcGx14/s1600/angular-purple.gif) no-repeat top left;
font: bold 1em Helvetica, verdana, Georgia, "Times New Roman", Times, serif;
color : #000;
border-bottom : 5px solid #435388;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}

jigsaw2
Код:

.post blockquote {
margin : 0 20px;
padding: 10px 20px 25px 20px;
background : #9FCFFF url(https://1.bp.blogspot.com/_7wsQzULWIwo/SwhrYyb3PiI/AAAAAAAACRU/DyY1rOVnl_k/s1600/block22.gif) no-repeat right bottom;
font: bold .9em "comic sans ms", arial, Helvetica,verdana, Georgia;
color : #484848;
border: 5px dashed #fff;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}

leftsidedbrownish2
Код:

.post blockquote {
background: #F3F3F1 url(https://3.bp.blogspot.com/_7wsQzULWIwo/Swb5Jv9YD4I/AAAAAAAACPc/BJ-zgoLMJXw/s1600/comma-side-orange1.gif) ;
background-position:;
background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 10px 45px;
font-size: 0.9em;
font: italic 1.2em Georgia, "Times New Roman", Times, serif;
}
.post blockquote p {
margin: 0;
padding-top: 10px;
}

leftsidedgreenblack2
Код:

blockquote {
background: #484B52 url(https://3.bp.blogspot.com/_7wsQzULWIwo/Swb5J3xbxyI/AAAAAAAACPk/gxR76OhXXaw/s1600/green-black-side.gif) ;
background-position:;
background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 20px 50px;
color:#C7CACF;
font: normal 0.9em Helvetica, verdana, serif, Georgia, "Times New Roman";
}
.post blockquote p {
margin: 0;
padding-top: 10px;
}

Brown-Scanned-copy[2]
Код:

.post blockquote {
margin : 0 20px;
padding: 20px 60px 80px 20px;
background : #FEE4E3 url(https://1.bp.blogspot.com/_7wsQzULWIwo/Swb4ckuuUwI/AAAAAAAACOE/lJfkdjco3aw/s1600/angular-right.gif) no-repeat bottom right;
font: bold italic 1em  Georgia, verdana, Helvetica,  "Times New Roman", Times, serif;
color : #000;
border: 1px solid #DDD;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}

commasgreen2
Код:

.post blockquote {
  font: italic 1em  "comic sans ms", Tahoma, sans-serif;
  padding-top: 10px;
  margin: 5px;
  background: url(https://4.bp.blogspot.com/_7wsQzULWIwo/Swb4uuhF2EI/AAAAAAAACO8/ExPvCZGUHo0/s1600/comma2-left.gif) no-repeat top left;
  text-indent: 65px;
  }
  .post blockquote div {
    display: block;
    background: url(https://1.bp.blogspot.com/_7wsQzULWIwo/Swb4u1vdKCI/AAAAAAAACPE/cwFfUwwT-ds/s1600/comma2-right.gif) no-repeat bottom right;
padding-bottom:10px;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}

commasnavyblue2
Код:

.post blockquote {
  font: 18px normal Tahoma, sans-serif;
  padding-top: 10px;
  margin: 5px;
  background: url(https://1.bp.blogspot.com/_7wsQzULWIwo/Swb5JEtgobI/AAAAAAAACPM/tqEq7sOrdnQ/s1600/comma-left.gif) no-repeat top left;
  text-indent: 65px;
  }
  .post blockquote div {
    display: block;
    background: url(https://3.bp.blogspot.com/_7wsQzULWIwo/Swb5JRi1ZbI/AAAAAAAACPU/vWtG9Rvfj9U/s1600/comma-right.gif) no-repeat bottom right;
padding-bottom:10px;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}

commashands2
Код:

.post blockquote {
  font:bold italic .9em  "comic sans ms", Tahoma, sans-serif;
  padding-top: 25px;
  margin: 5px;
  background: url(https://1.bp.blogspot.com/_7wsQzULWIwo/Swb5kCZUGZI/AAAAAAAACP8/UEMNYwjmokk/s1600/left.gif) no-repeat top left;
  text-indent: 65px;
color:#6299E4;
  }
  .post blockquote div {
    display: block;
    background: url(https://4.bp.blogspot.com/_7wsQzULWIwo/Swb52LlPk-I/AAAAAAAACRE/_MC7HQLGIng/s1600/right.gif) no-repeat bottom right;
padding-bottom:30px;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}

 

monkeyman2
Код:

.post blockquote{
margin : 0 35px;
padding: 80px 0px 0px 0px;
background : #E6F1FA url(https://1.bp.blogspot.com/_7wsQzULWIwo/Swb5J-uBKiI/AAAAAAAACPs/81Ja4qFVyGc/s1600/head2.gif) no-repeat top;
font: normal 1em "comic sans ms", Helvetica, verdana;
color : #666;
}
.post blockquote div{
background : #E6F1FA url(https://4.bp.blogspot.com/_7wsQzULWIwo/Swb5j3ME4gI/AAAAAAAACP0/1sQjocgjdK0/s1600/head-bottom3.gif) no-repeat bottom;
padding-bottom: 50px;
}
.post blockquote p {
margin: 0;
padding: 20px;
}

Теперь вы знаете, как оформить цитаты в своём блоге Blogger при помощи тега css blockquote.

Коды цитат взяты отсюда

Posted in CSSПомеченные
Опубликовано Иванова Наталья

Добавить комментарий

Ваш адрес email не будет опубликован.