
Для оформления цитат на блогах используется тег blockquote. В запись вставляют код
<blockquote> Текст цитаты </blockquote>
Цитаты могут содержать неавторский текст, коды, важную информацию и т.п.
Самые простые цитаты имеют вид текста с некоторым отступом от края и выделены вертикальной чертой. Дополнительно может быть выделение текста курсивом, жирным шрифтом или отличаться размером или цветом шрифта от основного текста.
Например, может быть оформлена так
или так
В стандартных шаблонах Blogspot обычно отсутствует (все не проверяла) css код blockquote, поэтому если вы будете использовать коды цитат в записях, то у вас ничего не изменится. Вначале нужно провести работу над шаблоном блога. В нестандартных шаблонах Blogger часто уже прописаны цитаты, но вполне возможно, что вы захотите изменить их стиль. Из этой статьи вы также узнаете, как это можно сделать, а также вы найдете примеры кодов css blockquote.
Примеры Blockquote
- Перейдите в Blogger> Шаблон > Изменить HTML,
- Сделайте резервное копирование шаблона,
- Расширьте шаблон виджета и при помощи клавиши Ctrl + F найдите отрезок кода .post blockquote Чаще всего он выглядит следующим образом:
.post-body blockquote { line-height:1.3em; } OR .post blockquote{ bla bla bla}
Удалите этот код с содержимым {…} и замените на любой код, оформления цитаты, который вам понравится (примеры цитат с кодами будут приведены в этой записи ниже) или вы можете сами создать свой стиль.
- Вы можете не найти код 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 – ширина, стиль и цвет соответственно.
- Все остальные цитаты можно настроить таким же образом.
- Сохраните шаблон. Вставляйте код <blockquote><div> Текст цитаты </div></blockquote> в режиме HTML при использовании цитаты в сообщении.
Примеры цитат blockquote и коды к ним
Код:
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; }
Код:
.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; }
Код:
.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; }
Код:
.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; }
Код:
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; }
Код:
.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; }
Код:
.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; }
Код:
.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; }
Код:
.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; }
Код:
.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.
Коды цитат взяты отсюда