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

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

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

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg090mdZYMIeuysvwAh_moRuDOn5j_1cpBDRt1DMgXx-HPlxt-LfyEd9oXwUsFAnIa7tSSCg8nksEjAx1Qb4w5p7Kf2hpmbEcjGjhbn3JdsVw5dn2lKG7KvwAIL-dcyUw-5yebtBUrrN7Mh/s25/openquote1.gif);
 background-position: top left;
 background-repeat: no-repeat;
 text-indent: 23px;
 }
 blockquote.style1 span {
 display: block;
 background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj69kvgtMi8bEfsCZ0PsWx48nA3z2USXVuc30mK5YBCuFe7wJEjJltZuHdH9SFtQSO8wehlFgiSIk1I_58yFW2HF5FrQXoRXQWVVJFDhwEE2rmBV4Qc3oDZlz7xv6728jELiIuDiKI9k8vU/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk2yLU91zDec6d0wJ1zfGmY6Vw-0lNEPSR6p7HDqWomuTxBrMNs6CLKdnyO3Ll8nbFBzAVtav9oFURC7oFf5HgIk_PcIG11muZvY515oDcSnK3g3AbUyQwqO7MI_y8PBykmCGbcqzBkOpq/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga5FD97lagKJeRM0O96sURTjBfVQgV1xjjw-EnesHXkmjKifJGc2v9ZvOtVvpkxUHFwC3ocSMpPYMeZuS5IMc_7frEJCPrNpM0IEQ0E4X39CTkI2PfACV1ivRCLD3P6WkTy1P5SWSSGAIa/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;
 }