Новое в блоге
Loading...
11 нояб. 2011 г.

Как оформить блочную цитату в blogger

Привет мои дорогие читатели! Настало время позаботиться об красивом оформлении цитат. Кто-то уделяет внимание оформлению блочной цитаты, кто-то нет. А почему? Это ведь так просто… В этом посте мне хотелось бы поделиться с Вами несколькими стилями оформления блочных цитат. Хотя они довольно старенькие, но среди них есть очень эффектные примеры. Думаю Вы  останетесь довольными. Можете посмотреть и выбрать себе из предложенных вариантов.           Демо.
Если Вы сделали свой выбор, то вот  стили CSS.

            Cоздаем эффектно оформленную блочную цитату


Вариант первый:

blockquote.style1 {
font: 14px/20px italic Times, serif;
padding: 8px;
background-color: #faebbc;
border-top: 1px solid #e1cc89;
border-bottom: 1px solid #e1cc89;
margin: 5px;
background-image: url(https://lh3.googleusercontent.com/-W_t4kr_cnL8/TryHmrdUhJI/AAAAAAAABs8/wFN5wlQGaQ0/s25/openquote1.gif);
background-position: top left;
background-repeat: no-repeat;
text-indent: 23px;
}
blockquote.style1 span {
display: block;
background-image: url(https://lh4.googleusercontent.com/-P6iY1yjxSZo/TryHkst54uI/AAAAAAAABs0/rUsUI0EgBEw/s25/closequote1.gif);
background-repeat: no-repeat;
background-position: bottom right;
}




Вариант второй:


blockquote.style2 {
font: 14px/22px normal helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid #ccc;
}



Вариант третий:



blockquote.style3 {
font: 18px/30px normal Tahoma, sans-serif;
padding-top: 22px;
margin: 5px;
background-image: url(https://lh3.googleusercontent.com/-rpej94PjpCQ/TryOIy2XNRI/AAAAAAAABt4/7UzggrE0a1I/s65/openquote3.gif);
background-position: top left;
background-repeat: no-repeat;
text-indent: 65px;
}
blockquote.style3 span {
display: block;
background-image: url(https://lh4.googleusercontent.com/-cf5lYCVjw1U/TryOHB0bR4I/AAAAAAAABtw/JSBQhLoekxY/s65/closequote3.gif);
background-repeat: no-repeat;
background-position: bottom right;
}
Вариант четвёртый:


blockquote.style4 {
font: 14px/20px italic Times, serif;
padding-left: 70px;
padding-top: 18px;
padding-bottom: 18px;
padding-right: 10px;
background-color: #dadada;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin: 5px;
background-image: url(https://lh3.googleusercontent.com/-Ug9Gb1WVyso/TryHgrZkqcI/AAAAAAAABss/ejUw-in9dKU/s96/openquote4.gif);
background-position: middle left;
background-repeat: no-repeat;
text-indent: 23px;
}
Вариант пятый:

blockquote.style5 {
font: 12px/18px normal "Courier New", sans-serif;
padding-left: 70px;
padding-top: 2px;
padding-bottom: 2px;
background-color: #000;
color: white;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin: 5px;
background-image: url(https://lh5.googleusercontent.com/-FE9KBDRGPXU/TryOMrkGGMI/AAAAAAAABuI/JnOFc9fOP3w/s96/openquote5.gif);
background-position: middle left;
background-repeat: no-repeat;
text-indent: 23px;
}
blockquote.style5 div {
padding-right: 50px;
display: block;
background-image: url(https://lh5.googleusercontent.com/-IJBaN0C6Ut0/TryOLMDUG1I/AAAAAAAABuA/le8LXAuQzMw/s96/closequote5.gif);
background-repeat: no-repeat;
background-position: bottom right;
}

Фрагмент HTML - кода (код общий для всех примеров, неободимо только подставить нужное название стиля)1,2,3 или 4,5. Можно все стили использовать в шаблоне.
<blockquote class="style1">Ваша цитата или текст</blockquote>
Копировать коды внимательно, они с прокруткой.

Примечание: коды стилей вставляются перед строчкой ]]></b:skin>

Вот и всё. Желаю удачи и отличных цитат. 

Ух ты кнопочки! Понравилась статья? Поделитесь с друзьями:

8 коммент. :

  1. Если делать так, как тут описано, то над панелью навигации появляются те самые надписи, скажем для СТИЛЯ1, кавычки не вставляются, форматирование происходит, но фонового рисунка под текстом, как это приведено для стиля1 - тоже не получается...

    ОтветитьУдалить
  2. А причём здесь панель навигации?Извините я Вас не понял.

    ОтветитьУдалить
  3. Спасибо, очень пригодилось :). Раньше оформляла цитаты просто выделением. А теперь очень красиво

    ОтветитьУдалить
  4. Пожалуйста!Действительно красиво.

    ОтветитьУдалить
  5. А я понимаю о чем идет речь. У меня во втором блоге такая же ерунда. Расстроилась. Может можно что-то сделать?

    ОтветитьУдалить
  6. Вот интересная статья как оформить цитаты в CSS - http://lecaw.ru/index.php/css/item/257-sovremenniy-stil-citat

    ОтветитьУдалить
  7. По ссылке демо ругаеться аваст, так я и не смог его посмотреть :o

    ОтветитьУдалить
    Ответы
    1. Отключи его,там ничего страшного и опасного нету. Демо блог - уже два года люди смотрят.

      Удалить

 
Footer