Как красиво оформить блок цитаты

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

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

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

01	blockquote.style1 {

02	font: 14px/20px italic Times, serif;

03	padding: 8px;

04	background-color: #faebbc;

05	border-top: 1px solid #e1cc89;

06	border-bottom: 1px solid #e1cc89;

07	margin: 5px;

08	background-image: url(https://lh3.googleusercontent.com/-W_t4kr_cnL8/TryHmrdUhJI/AAAAAAAABs8/wFN5wlQGaQ0/s25/openquote1.gif);

09	background-position: top left;

10	background-repeat: no-repeat;

11	text-indent: 23px;

12

}

13	blockquote.style1 span {

14	display: block;

15	background-image: url(https://lh4.googleusercontent.com/-P6iY1yjxSZo/TryHkst54uI/AAAAAAAABs0/rUsUI0EgBEw/s25/closequote1.gif);

16	background-repeat: no-repeat;

17	background-position: bottom right;

18

}

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

1	blockquote.style2 {

2	font: 14px/22px normal helvetica, sans-serif;

3	margin-top: 10px;

4	margin-bottom: 10px;

5	margin-left: 50px;

6	padding-left: 15px;

7	border-left: 3px solid #ccc;

8

}

Код стиля вставляется после строчки ]]></b:skin> в вашем шаблоне.

Во время написания поста нужный Вам фрагмент текста заключаем в <blockquote class="style1">Ваша цитата или текст</blockquote> Код общий для всех примеров, неободимо только подставить нужное название стиля 1 или 2. Можно оба стиля использовать в шаблоне.

____________________

Также можно установить дополнительный код, который придаст цитатам более презентабельный вид, Устанавливается код очень просто: в Дизайн - Добавить гаджет - HTML/JavaScript, необходимо добавить следующий код:

 <style>.post blockquote
    {
    font-size: 15px;font-family: Verdana;font-weight: normal;font-style:italic;
    background-color: #F2F1F1;
    color: #000;
    margin: 5px 10px;
    padding: 20px 20px 20px 20px;
    border: 2px dotted lightgrey;
    border-radius: 10px;
    box-shadow: -1px -1px 12px 2px gainsboro;
    transition: background-color .777s;
    -webkit-transition: background-color .777s;
    -moz-transition: background-color .777s;
    -o-transition: background-color .777s;
    -ms-transition: background-color .777s;
    }
    .post blockquote:hover
    {
    background-color: CornflowerBlue ;
    color: #fff;
    }
    .post blockquote:active
    {
    background-color: lightblue ; ;
    color: #000;
    }
    </style>


См. также
Прямая ссылка на скачивание файла с Диск Google

________________________________

2 шага для раскрутки сайта

1. Зарегистрируйте свой сайт в каталогах и рейтингах.

* http://www.dmoz.org/ - введите в поисковой строке тему Вашего сайта и добавьтесь в полученный раздел.
* http://webmaster.yandex.ru/catalogue_free.xml
* http://submitter.ru/modules.php?name=Submitter ;— бесплатная полуавтоматическая регистрация в каталогах
* http://freepromote.ru/ -полуавтоматическая регистрация
* http://alfainternet.su ;— тариф Alfa
* http://1ps.ru ;— демо-версия но есть и платная ! 

* .........................................

2. Добавьте свой сайт в закладки

o http://www.newsland.ru/
o http://www.habrahabr.ru/
o http://www.news2.ru/
o http://memori.ru/
o http://www.mister-wong.ru/
o http://bookmark.searchengines.ru/
o http://www.100zakladok.ru/
o http://links.i.ua/
o http://www.vaau.ru/
o http://myscoop.ru/
o http://rumarkz.ru/
o http://linkstore.ru/
o http://smi2.ru/
o http://korica.info/
o http://zanachka.com/
o http://zakladki.yandex.ru/userarea/links/addfromfav.asp
o http://bobrdobr.ru/add.html
o http://mister-wong.ru/index.php?action=addurl
o http://moemesto.ru/post.php
o http://rumarkz.ru/register/
o http://del.icio.us/
o http://furl.net/
o http://linkatopia.com/
o http://reddit.com/
o http://sphinn.com/
o http://tellfriends.com/
o http://blinklist.com/
o http://digg.com/
o http://feedmelinks.com
o http://google.com/bookmarks/