Красивые стили оформления цитат в блоге Blogspot



19 стилей CSS для оформления цитат в блоге

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

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

Первое, что надо сделать-это посмотреть в своих шаблонах вот такой код .post blockquote и удалить его из шаблона или вставить в эту строку код CSS цитаты, чтобы стили не конкурировали друг с другом. 

Вы можете найти у себя в шаблоне код такого вида .post-body blockquote { line-height:1.3em; } или .post blockquote{здесь код }. А можете не найти вообще никакого кода ( я у себя в тестовых блогах не нашла), тогда смело можете вставлять выбранный здесь стиль CSS. Смотрите между строками <b:skin>...</b:skin>.

Выбранный CSS стиль вставляете выше строки ]]></b:skin>. Не забывайте делать резервную копию шаблона.  Можно настроить в тестовом блоге, затем вставить в рабочий. Кто не знает, где искать такие строки в шаблоне, почитайте внимательно пост по ссылке выше.

Дальше, когда пишите пост в редакторе сообщений, выделите его левой кнопкой мыши и вверху нажмите на кавычки. 
Посмотрите на скриншоте

Показано как оформить текст цитатой

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

Смотрим, выбираем, копируем, вставляем в шаблон, любуемся красивой цитатой.

Стиль 1
blockquote {
border: dotted #ff9900 1px;
border-left:solid #ff9900 5px;
margin:10px 40px;
padding:15px;
color:#333;
font-style:italic;
font-size:14px;
background:#f8f8f8;
}

Стиль 2
blockquote {
   padding: 18px 10px 18px 70px;
   font: 14px/20px italic Times, serif;
   background: url(http://4.bp.blogspot.com/-46dKh3Wii7o/TmdZi-BHrkI/AAAAAAAACSU/puFYvvosoxU/s400/modelocita2m2.gif) no-repeat scroll 10px 10px rgb(255, 255, 255);
border-left: 7px solid #00b2a1;
border-top: 1px dotted #c0c0c0;
border-right:1px dotted #c0c0c0;
border-bottom: 1px dotted #c0c0c0;
}

Стиль 3



blockquote {
  background: #ffffff;
  border-left: 10px solid #3d290e;
border-right: dotted 1px #cccccc;
border-bottom: dotted 1px #cccccc;
border-top: dotted 1px #cccccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
  color: #f00;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote p {
  display: inline;
}

Стиль 4


.post blockquote { font-size:14px;color:#0e5198; 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 p { margin: 0; padding-top:10px; }

Стиль 5


blockquote { background-position:-10px -7px; border: 1px dashed #FFC600; margin: 20px 10; padding: 0 20px 0 50px; background: url("http://3.bp.blogspot.com/_jM8-wHc3NKY/TR3MwDiXB1I/AAAAAAAAAQo/Fi8TGwkSRNQ/s1600/quote.png") 5% no-repeat #FFF8DD; }

Стиль 6


blockquote {
background:url(http://4.bp.blogspot.com/-7NinCC44B1k/UN-WWw9SOeI/AAAAAAAABQg/rmUdVGmvc5Q/s000/quote.png) no-repeat 5px top;
margin-left:15px;
border-left:4px solid #cccccc;
color:#444444;
font-size:14px;
font-family:Arial, Georgia, sans-serif;
font-weight:400;
font-style:italic;
text-indent:10px;
padding:15px 0 10px 10px;
}

Стиль 7
blockquote {
background-image:url(http://i062.radikal.ru/1404/ab/d3f5483f70c5.jpg);
font-size: 14px;            
color: #00009c;                
border: 2px dotted #26dbfe;
border-radius:40px;
padding: 35px;
margin:1em 20px;
}

Стиль 8
blockquote {
background-image:url(http://i058.radikal.ru/1407/f4/a6fbe0cabe1a.jpg);
font-size: 14px;            
color: #ffffff;                
border: 2px dotted #cc3299;
border-left:7px solid #f00;
border-radius:0px;
padding: 15px;
margin:1em 20px;
}

Стиль 9


.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;
text-align:center; 
color : #000;
border-bottom : 5px solid #4156c5; 
}
.post blockquote p { 
margin: 0; 
padding-top:10px; 
}

Стиль 10


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-size:14px;
color : #444444; 
border-left: 8px dotted #03b4c8;
blockquote p { margin: 0; padding-top:10px;
}

Стиль 11


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-size:14px; } .post blockquote p { margin: 0; padding-top: 10px;}

Стиль 12 (на тетрадных фонах)


blockquote {
margin:1em 20px;
background:#;
background-image:url(http://img-fotki.yandex.ru/get/2710/127370258.ef/0_6c01a_2430cba7_S);
border: 2px dotted #ccc;
border-left:7px solid #00009c;
border-radius:0px;
font-size:14px;
color:#044f4e;
padding: 10px;
}

Стиль 13


blockquote {
margin:1em 20px;
background:#;
background-image:url(http://img-fotki.yandex.ru/get/5501/127370258.ef/0_6c027_178b8426_S);
border: 2px dotted #ccc;
border-left:7px solid #800000;
border-radius:0px;
font-size:14px;
color:#800080;
padding: 10px;
}

Стиль 14


blockquote {
margin:1em 20px;
background:#;
background-image:url(http://img-fotki.yandex.ru/get/6005/127370258.ef/0_6c025_25c0a1a0_S);
border: 2px groove #800000;
border-left:7px solid #800000;
border-radius:0px;
font-size:14px;
color:#800080;
padding: 10px;
}

Стиль 15


blockquote {
margin:1em 20px;
background:#;
background-image:url(http://img-fotki.yandex.ru/get/2712/127370258.ef/0_6c01c_605b0763_S);
border: 7px solid #c0c0c0;
border-left:7px solid #03b4cc;
border-right:7px solid #03b4cc;
border-radius:0px;
font-size:14px;
color:#054f04;
padding: 10px;
}

Стиль 16


blockquote {
margin:1em 20px;
background:#;
background-image:url(http://s43.radikal.ru/i101/1407/66/d73b7941bd33.jpg);
border: 0px solid #;
border-top:7px solid #00b2a1;
border-bottom:7px solid #00b2a1;
border-radius:0px;
font-size:14px;
color:#444444;
padding: 10px;
}

Стиль 17 (используйте код 16)


http://i017.radikal.ru/1407/2e/821c58011887.jpg

Стиль 18 (так же код 16)


http://s019.radikal.ru/i631/1407/c8/0b188f28f740.jpg

Стиль 19 (тень)


blockquote {
background:#f8f8ff;  
border-top: #4156c5 3px solid;
border-bottom: #4156c5 3px solid;
font-size: 14px; 
margin: 10px 40px;  
color: #444444; 
padding: 15px;
 -moz-box-shadow: 0px 5px 10px #ccc;
  -webkit-box-shadow: 0px 5px 10px #ccc;
  box-shadow: 0px 5px 10px #ccc;
-moz-border-radius: 10px;
border-radius: 10px; 
}

С настройками цвета фона, размерами границ я думаю разберетесь, подробно все описано когда прочитаете пост как быстро и красиво оформить текст в блоге. Единственное, выделенное у меня синим в стиле 6, это отступ цитаты от левого края, красным-положение текста в цитате. Если в других кодах этих параметров нет-добавляйте. Шаблоны у всех разные, у меня корректно цитата отображается и без этих параметров. 

Если с элементом blockquote { цитата не будет отображаться, вставьте  .post-body blockquote { и далее CSS цитаты.

Для отдельных стилей воспользовалась информацией в блоге по адресу: http://www.getincss.ru/2008/07/25/sposoby-oformleniya-citat-s-pomoshhyu-css/, (прошу извинить, но с некоторых пор ссылки даю не активные, при проверке блога  было много битых ссылок).


Стиль 6 выдернула из шаблона своего второго блога, url адреса тетрадных фонов и изображений  подставляла в коды.  Так же в некоторых кодах у меня добавлены параметры цвета и размера шрифта. 

Если в коде отсутствуют такие параметры, можете добавить. Шрифт можно настроить и в редакторе сообщений. Когда выделите текст для цитаты, настройте цвет и размер шрифтов (жирный, наклонный при необходимости).

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



Автор статьи ✎ Olga Protasova Выпуск ✹ 7/19/2014 Ярлыки ►


Открыть комментарии →

8 коммент. :

  1. Ольга, здравствуйте! Спасибо за цитаты и отдельное спасибо за подсказку, что не во всех блогах можно найти код .post blockquote .

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

    ОтветитьУдалить
  3. Анонимный14/3/16 02:09

    А у меня в шаблоне такая строчка нашлась blockquote{margin:20px;color:#666;}. Ее стоит удалить?

    ОтветитьУдалить
    Ответы
    1. Здравствуйте. Если нашли эту строку в шаблоне, добавляйте туда код CSS. Не получится настроить, тогда аккуратно удалите и вставьте выше строки ]]>. Делайте резервную копию или настройте в тестовом блоге, затем вставьте код в рабочий блог.

      Удалить
    2. Тестовый блог создайте на таком же шаблоне, что и основной.

      Удалить
    3. Анонимный14/3/16 12:50

      Здравствуйте. Нужно попробовать вместо этой строки blockquote{margin:20px;color:#666;} вставить код CSS, я правильно понимаю?

      Удалить
    4. Да, если сможете удалить, то в это место в шаблоне вставьте стиль CSS цитаты. Или добавьте свой стиль
      blockquote{
      background:#f8f8f8;
      margin:20px;color:#666;}
      Я добавила только фон, можно изображение, границы рамки border, font-size: размер шрифта, color:#000; Будет примерно так:
      blockquote{
      background:#f8f8f8;
      border-left:7px solid #03b4cc;
      font-size: 14px;
      margin:20px;color:#666;}

      Удалить
    5. Анонимный14/3/16 15:08

      Ура! Все получилось! Спасибо большое.

      Удалить


 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *