14 удивительных примеров css и html Blockquote стилей для настройки блока цитирования/цитат в Blogger и WordPress

Блок цитирования/цитат или Blockquote – это нужная выдержка в письменном документе, который выделяется от основного текста. Мы все любим цитировать великих авторов, но все мы должны публиковать эти великие слова не просто так в контенте, а с использованием красивых блоков для цитат. На зарубежном блоге MBT я наткнулся приблизительно на 14 простых css и html Blockquote стилей для цитирования, которые выглядят очень красивыми. Эти стили цитат дадут вам представление о том, как можно создать и настроить свой собственный блок цитат для своего блога или сайта.

14 удивительных примеров css и html Blockquote стилей для настройки блока цитат в Blogger и WordPress

Обратите внимание на каждом из них, каждый из них подходит для любого блога, как для Blogger, так и WordPress. Подробная информация о добавлении блок цитат на свой блог/веб-сайт приведены внизу в разделе установка и настройка.

Блок цитирования с необычными границами и с изображением совы

Блок цитирования с необычными границами и с изображением совы

HTML код Blockquote:

blockquote {
margin : 0 20px;
padding: 60px 30px 40px 20px;
background : #F1F8FE url (http://3.bp.blogspot.com/_7wsQzULWIwo/SwhrZYtvrRI/AAAAAAAACRs/Q0k6eaIjnys/s400/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;
}

Блок цитирования с фиолетовой угловой меткой и границей

Блок цитирования с фиолетовой угловой меткой и границей в основе

HTML код Blockquote:

.post blockquote {
margin : 0 20px;
padding: 70px 20px 20px 40px;
background : #E4EAFE url (http://3.bp.blogspot.com/_7wsQzULWIwo/Swb4cWgxCUI/AAAAAAAACN8/k2V4tUcGx14/s400/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;
}

Блок цитирования в стиле мозаики с изображением в правом углу

Блок цитирования в стиле мозаики с изображением в правом углу

HTML код Blockquote:

.post blockquote {
margin : 0 20px;
padding: 10px 20px 25px 20px;
background : #9FCFFF url (http://1.bp.blogspot.com/_7wsQzULWIwo/SwhrYyb3PiI/AAAAAAAACRU/DyY1rOVnl_k/s400/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;
}

Блоки для цитат с классической левой границей

Блок для цитат с классической левой границей 1

HTML код Blockquote:

.post blockquote {
background: #F3F3F1 url (http://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;
}

Блок для цитат с классической левой границей 2

HTML код Blockquote:

blockquote {
background: #484B52 url (http://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;
}

Блок цитирования с красной угловой меткой

Блок цитирования с красной угловой меткой

HTML код Blockquote:

.post blockquote {
margin : 0 20px;
padding: 20px 60px 80px 20px;
background : #FEE4E3 url (http://1.bp.blogspot.com/_7wsQzULWIwo/Swb4ckuuUwI/AAAAAAAACOE/lJfkdjco3aw/s400/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;
}

Блоки для цитат с кавычками

Блок для цитат с кавычками 1

HTML код Blockquote:

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

.post blockquote p {
margin: 0;
padding-top:10px;
}

Блок для цитат с кавычками 2

HTML код Blockquote:

.post blockquote {
font: 18px normal Tahoma, sans-serif;
padding-top: 10px;
margin: 5px;
background: url (http://4.bp.blogspot.com/_7wsQzULWIwo/Swb4uY5amaI/AAAAAAAACOs/wZtmW2g1jC0/s400/comma1-left.gif) no-repeat top left;
text-indent: 65px;
}
.post blockquote div {
display: block;
background: url (http://4.bp.blogspot.com/_7wsQzULWIwo/Swb4ut_xfBI/AAAAAAAACO0/rQVkmrMYnd8/s400/comma1-right.gif) no-repeat bottom right;
padding-bottom:10px;
}

.post blockquote p {
margin: 0;
padding-top:10px;
}

Блок для цитат с кавычками 3

HTML код Blockquote:

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

.post blockquote p {
margin: 0;
padding-top:10px;
}

Блок для цитат с кавычками 4

HTML код Blockquote:

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

.post blockquote p {
margin: 0;
padding-top:10px;
}

Блок цитирования с хорошо выровненным изображением наверху

Блок цитирования с хорошо выровненным изображением наверху

HTML код Blockquote:

.post blockquote {
margin : 0 20px;
padding: 70px 20px 20px 20px;
background : #E7E5DC url (http://2.bp.blogspot.com/_7wsQzULWIwo/SwhrZPcjY4I/AAAAAAAACRk/qOMm-cht3rw/s1600/block333.gif) no-repeat top;
font: normal 1em «comic sans ms»,Helvetica, Courier,"Times New Roman", Times, serif;
color : #000000;
border-bottom : 7px solid #FF0000;
}

.post blockquote p {
margin: 0;
padding-top:10px;
}

Блок цитирования с изображением стиля навеса в верхней и нижней части

Блок цитирования с изображением стиля навеса в верхней и нижней части

HTML код Blockquote:

.post blockquote{
margin : 0 20px;
padding: 50px 30px 50px 30px;
background : #FFF url (http://4.bp.blogspot.com/_7wsQzULWIwo/Swb4c7RglzI/AAAAAAAACOU/bwGBdTO2lq4/s1600/BLOCK1-TOP.gif) no-repeat top;
font: bold italic 1em Helvetica, verdana;
color : #000;
}

.post blockquote div{
background : #FFF url (http://4.bp.blogspot.com/_7wsQzULWIwo/Swb4c0v4knI/AAAAAAAACOM/S-iKAwSXT-I/s1600/BLOCK1-BOTTOM.gif) no-repeat bottom;
padding-bottom: 50px;
}

.post blockquote p {
margin: 0;
padding-top:10px;
}

Блок цитирования с окруженными границами

Блок цитирования с окруженными границами

HTML код Blockquote:

.post blockquote {
margin : 0 20px;
padding: 70px 20px 30px 20px;
background : #E7E5DC url (http://3.bp.blogspot.com/_7wsQzULWIwo/SwhrY8vdJeI/AAAAAAAACRc/8Ed9vrlWWGo/s400/block3331.gif) no-repeat top;
font: bold .9em Helvetica, «comic sans ms»,Courier,"Times New Roman", Times, serif;
color : #343434;
border-left : 7px solid #FF7802;
border-right : 7px solid #FF7802;
border-bottom : 7px solid #FF7802;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}

Блок цитирования человек обезьянка!!!

Как только вы получите представление о том, как использовать эти блоки цитат, то вы сможете сами создать художественные и забавные блоки для цитат, как на этом изображение ниже.

Блок цитирования человек обезьянка!!!

HTML код Blockquote:

.post blockquote{
margin : 0 35px;
padding: 80px 0px 0px 0px;
background : #E6F1FA url (http://1.bp.blogspot.com/_7wsQzULWIwo/Swb5J-uBKiI/AAAAAAAACPs/81Ja4qFVyGc/s400/head2.gif) no-repeat top;
font: normal 1em «comic sans ms», Helvetica, verdana;
color : #666;
}

.post blockquote div{
background : #E6F1FA url (http://4.bp.blogspot.com/_7wsQzULWIwo/Swb5j3ME4gI/AAAAAAAACP0/1sQjocgjdK0/s400/head-bottom3.gif) no-repeat bottom;
padding-bottom: 50px;
}

.post blockquote p {
margin: 0;
padding: 20px;
}

Установка и настройка css Blockquote стилей:

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

  1. Перейдите в панель блога на Blogger или WordPress.
  2. Сделайте резервную копию своего шаблона.
  3. На BlogSpot нужно перейти в шаблон >> Изменить HTML, на WordPress, Внешний вид >> Редактор >> style.css.
  4. Найдите код .post blockquote или blockquote и удалите весь связанный код.  В большинстве шаблонов BlogSpot код похож на это:

.post-body blockquote { line-height:1.3em; }
Или
.post blockquote{ bla bla bla}

На WordPress все немножко по-другому, в файле style.css код может выглядеть так:

blockquote {
— webkit-box-shadow: rgb (221, 221, 221) 4px 4px 4px;

Если вы не смогли найти такой код, то это нормально.

  1. Теперь на Blogger в том же редакторе шаблонов найдите ]]></b:skin> и чуть выше ]]></b:skin> вставьте код одной из понравившихся вам блока цитат. Вот пример кода (только пример!):

.post blockquote {
margin : 0 20px;
padding: 60px 30px 40px 20px;
background : #F1F8FE url (Здесь вставьте ссылку на изображение) no-repeat 350px 5px;
fontnormal .9em «comic sans ms», Courier,"Times New Roman", Times, serif;
color : #000;
border8px dotted #DAB547;

}
.post blockquote p {
margin: 0;
padding-top:10px;
}

Важные области, которые  должны быть настроены, выделены жирным шрифтом.

  • padding: Относится к расстоянию текста от Blockquote границ. Идет он в таком порядке -> Высота Право Низ Лево.
  • background: Включает в себя цвет фона и изображения блока цитат, используемого в нем. Первые шесть цифр с решеткой (#) значение цвет фона, а ссылка для изображения вставляется вместо жирного текста в этом разделе-> url (Здесь вставьте ссылку на изображение)
  • font: Включает в себя шрифт стиля, размера и соответственно типа. Цвета для справки в коде выше.
  • color: Относится к цвету текста. Вы можете использовать другой цвет шрифта с помощью любой диаграммой цветов.
  • border: Относится к границе ширины, стиля и соответственного цвета.
  • Все представленные блоки цитат могут быть настроены аналогично.
  1. После настройки, наконец, сохраните шаблон и посмотрите на интересные изменения.

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

Руководство: Для упомянутых выше блоков цитат вам нужно добавить некоторые дополнительные теги внутри редактора шаблонов блоггер, как описано ниже:

Всякий раз, когда вы что-то будете писать в блоке цитат? внутри создания/написание сообщения в редакторе Blogger просто переключитесь в режим HTML и добавьте два тега, т.е. <div> и </div> между тэгами Blockquote, как показано ниже:

<blockquote><div>Здесь ваш текст цитаты</div></blockquote>

Вот и все! Надеюсь, вам понравилось, убедитесь в том, что вы подписаны на последние CSS и HTML трюки, связанные с Blogger и WordPress блога tidun-soft.ru. Не забудьте рассказать мне, как полезен этот пост был для вас.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>