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

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

 Но дело в том, что  такие цитаты все равно не очень уж и выделяются.

 Поэтому  предлагаю несколько вариантов оформления цитат для blogspot.

Чтобы получилась вот такая цитата:



Найдите  тег
]]></b:skin>

И чуть выше вставить код
 .post blockquote {
background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1vFWBwVp6RPq7PW3FyEhZ2mQ-l0J4mnW5DV2Pg8d7Ng59b27N8uKkE3tE0N_NQyzjqrAQrIoKut8A33ThyphenhyphenT7roBj9zusICbZjjU-gbKDV_eY6jxBnVXvtTRwmV35BYG8iCAIzipfZ0UM/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;
}
 Для  такого вида цитаты


Вставте этот код 
 .post  blockquote {
background:#484B52 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7q3UT7QOXwHtuWwPvIw5r84LfBghJ6Xmq8kcVjTON78XCS5wrRLrk7xRdU7kr8eS-EpDWbNAhblyXalbZpWEB5hMSRN3zAXWb6sUSF8hKs0hWKtazivAEYtAkE-YdnEmowEaRoVy2DWA/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 80px;
padding: 70px 20px 30px 20px;
background : #E7E5DC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8biD8zuKiVXdp2_32lbyG0RFiuY6g3PWrhPWNX38y6JvVNRhTFdjNQtdigbBQ1CSE_st6zz7RSqN5Il0unYL2LGdHmyq03_tR7JsWRdZ8WGd9eCfaOGUVbFapzOMqWOSXvDsZUaiD6u19/s400/bloc.jpg) 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;
}

 Для голубого фона цитат
Этот код
.post blockquote {  margin : 0 20px;  padding: 10px 20px 25px 20px;  background : #9FCFFF url() 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 { margin : 0 20px;  padding: 60px 30px 40px 20px;  background : #F1F8FE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7Rap1n8-0gOo_l6F-QPE6TcP2aJIHt-IugjoJ-2Cd9h5LNAQC-bhDz155xalm_wTveeZkPIaRR4p9Hxwtqq9JD1gi_m6u2cOZGz9aitF6IGXJECbs2rB3bMdedaxJDyMj7BhQrCUDiow/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;  }
 Надеюсь, статья оказалась для вас полезной. Не бойтесь экспериментировать в шаблоне, благодаря вот таким уникальностям, ваш блог, становиться в разы лучше.
выделяете текст, нажимаете на кавычки.



Система Orphus

Пожалуйста не забывайте нажать

12 коммент.:

  1. Выходные полезно с семьей провести. Весна наконец-то догоняет!
    Аня, а где тег найти?

    ОтветитьУдалить
    Ответы
    1. И не говори. У нас рядом посадка, доча вышла с лесу как чертик))
      Что то я ралабилась... Тег нужно найти в HTML шаблона.
      Сейчас поправлю.

      Удалить
  2. Где-то это я уже встречал :D

    ОтветитьУдалить
    Ответы
    1. Скорей всего на зарубежном блоге, потому что брала я эти скрипты от туда) Если кто из русской блогосферы делился, то явно от туда, или откдуо позаимствовала я спер у наших) http://www.mybloggertricks.com/2009/11/14-amazing-ways-to-customize-blockquote.html

      Удалить
  3. Аня,здравствуйте! Очень интересное сообщение, но мне новичку не понятно.
    Данный вариант можно вставить только через шаблон блога? А как цитирование появится на странице блога? Или оно будет располагаться в боковых гаджетах? И еще я не поняла, что это - Найдите тег
    ]]>. Где это искать?

    ОтветитьУдалить
  4. http://studying-blogin.blogspot.com/search/label/%D0%98%D0%B3%D1%80%D1%8B%20%D1%81%20HTML%20%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD%D0%B0%20%D0%BD%D0%B0%20blogger%20blogspot- поможет разобраться что куда вставлять
    если посмотрите эту картинку http://2.bp.blogspot.com/-_KeVSrMZxEM/UWumVq45ViI/AAAAAAAACMk/SQ011eIT2Yc/s1600/%D0%BA%D0%B0%D0%BA+%D0%BD%D0%B0%D0%B9%D1%82%D0%B8+%D1%86%D0%B8%D1%82%D0%B0%D1%82%D1%83+%D0%BD%D0%B0+%D0%B1%D0%BB%D0%BE%D0%B3%D0%B3%D0%B5%D1%80.png то при нажатии "ковычек" после публикации будет выделенный текст в цитате

    ОтветитьУдалить
  5. Татьяна, да обязательно в шаблоне нужно вставить данный скрипт, и он уже будет там на всегда, пока вы не поменяете сам шаблон. Располагаться будет в шаблоне.

    ОтветитьУдалить
  6. Аня,что не то. Не получается. Несколько раз пробовала, очень внимательно. Я всё находила, всё вставляла, но в блоге ничего не появлялось. Я сомневаюсь, потому что не поняла как слова,что написано внутри цитаты, появятся в блоге. Если только приведенные Вами слова, тогда легче вставить через фото. И еще, может быть не вставляется, потому что нужен определенный шаблон?

    ОтветитьУдалить
  7. Татьяна, пожалуйста дайте адрес блога. Даже в нестандартных шаблонах должно получаться. Вы пишите текст, потом выделяете, нажимаете на кавычки и у вас не получается выделить текст в цитату?

    ОтветитьУдалить
  8. Этот комментарий был удален автором.

    ОтветитьУдалить
  9. Татьяна, а какой код вы берете? Я вот смотрю последний у меня не правильный. Или вы все побывали?

    ОтветитьУдалить
  10. Последний поправила, работает корректно. Шаблон у вас на блоге стандартный. Так что проблем не должно быть.

    ОтветитьУдалить

Есть вопросы? Или просто хочется поговорить? Оставляйте комментарии