воскресенье, 9 ноября 2008 г.

Цитаты в Blogger с помощью CSS


Красиво оформить цитаты в блоггере можно при помощи небольших манипуляций с CSS. Этот пример для псевдокласса :first-letter. Вот что должно получиться:
Улучшить водку можно единственным способом -- увеличением объёма бутылки. Все остальные выкрутасы -- опять же замануха для лохов, умеющих читать.
А. Кочергин

Для выделения цитат Blogger использует тег blockquote. Вот его мы немножко и приукрасим с помощью CSS.

Откройте редактор шаблонов: Настроить - Макет - Изменить HTML и найдите в нём CSS-правило .post blockquote и подкорректируйте его примерно так:
.post blockquote {
display:block; width:400px; line-height:normal; letter-spacing:1px;
font-family: times new roman, serif; font-size:16px;
color:#000; border:1px solid #D3D3CF;
padding:5px; margin:2em auto;
}

.post blockquote:first-letter {
font-size:50px; color:#E3635C; font-weight:bold;
float:left; height:34px; line-height:34px;
margin-top:2px; margin-right:1px;
}

* html .post blockquote:first-letter {
margin-right:-2px; margin-top:3px;
}

Сохраните шаблон.

Теперь создайте новый пост, и напишите в нём цитату. Да хоть вот эту:
<blockquote>Улучшить водку можно единственным способом --
увеличением объёма бутылки. Все остальные выкрутасы -- опять же замануха для лохов, умеющих читать.<br />
А. Кочергин</blockquote>

Опубликуйте сообщение.

Способ подмотрен на CSSplay

2 Комментариев :

Всимэналь комментирует...

^Настроить - Макет - Изменить HTML^ а эт хде? т-т
У меян в макете во вкладке "Дизайн" - "Изменить HTML" нету строки ".post blockquote"
Что делать? оО

Даниил Гиль комментирует...

Вставить его туда =)

Отправить комментарий

Жги!