2012-05-07

Цитата HTML в виде тетрадного листа

Вчера я опубликовала статью об оформлении цитат в блоге при помощи тега Blockquote. Сегодня вы узнаете как оформить цитату в виде тетрадного листа. Такие цитаты пригодятся для блогов, публикующих коды HTML, а также для блогов учителей, может пригодятся и вам Подмигивающая рожица.
Теперь перейдем к добавлению цитат тетрадного листа в ваш блог. ..
  1. Административная панель Blogger –> Шаблон –> Изменить HTML,
  2. Не забудьте сделать резервную копию шаблона блога,
  3. Поиск в шаблоне отрезка кода
    .post-body blockquote { line-height:1.3em; } 
    или
    .post blockquote{ bla bla bla}
  4. Измените найденный код на предложенный ниже код цитаты, если вы не нашли такого кода в своем шаблоне, то новый код цитаты добавьте перед кодом
    ]]></b:skin>
  5. Код цитаты в стиле тетрадного листа:
    blockquote {
    background: #fff url(http://img-fotki.yandex.ru/get/6300/40839264.1/0_7ac92_bdd83d34_orig) repeat-y;
    margin: 0 20px;
    padding: 0px 20px 5px 55px;
    color:#7a7a7a;
    font: normal 0.9em Arial, "Comic Sans MS", verdana;
    line-height: 153%;
    }
    blockquote p {
    margin: 0;
    }
Цитата в стиле ненумерованного тетрадного листа выглядит так:
ненумерованный_тетрадный_лист
Скопируйте код такой цитаты:
.post-body blockquote {
background: #fff url(http://img-fotki.yandex.ru/get/6108/40839264.1/0_7ac9a_5a6de89b_orig) repeat-y;
margin: 0 20px;
padding: 0px 20px 5px 55px;
color:#7a7a7a;
font: italic 1.1em  Arial, "Comic Sans MS", verdana;
line-height: 153%;
}
blockquote p {
margin: 0;
}
Вы можете изменить внешний вид цитаты, изменив лишь ссылку на изображение в предыдущем коде цитаты.
Вот примеры тетрадных листов, ссылки на изображение можете скопировать под ними:

http://img-fotki.yandex.ru/get/6208/40839264.1/0_7ac9d_96b9e003_orig

http://img-fotki.yandex.ru/get/6109/40839264.1/0_7ac9e_d22cd570_orig

http://img-fotki.yandex.ru/get/6303/40839264.1/0_7ac9f_edf23da8_orig

http://img-fotki.yandex.ru/get/6109/40839264.1/0_7aca0_9d4957ba_orig

http://img-fotki.yandex.ru/get/6109/40839264.2/0_7aca1_c0ace770_orig

http://img-fotki.yandex.ru/get/6208/40839264.2/0_7aca2_9e86c090_orig
Еще один вариант цитаты тетрадного листа, как у меня в блоге. Ее код:
blockquote {
background: #fff url(http://img-fotki.yandex.ru/get/6415/40839264.6/0_8c474_e595db89_orig) repeat-y;
margin: 0 20px;
padding: 0px 20px 5px 55px;
color:#7a7a7a;
font: italic 1.0em Arial, "Comic Sans MS", verdana;
line-height: 153%;
}
blockquote p {
margin: 0;
}
Подпишитесь на рассылку и вы узнаете еще о нескольких способах оформления цитат html.

2 комментария :

Людмила Рытикова комментирует...

Не забудьте сделать резервную копию шаблона блога.Вот бы еще научиться это делать...

Mycrib комментирует...

Шаблон -> Резервное копирование и восстановление -> Загрузить шаблон полностью. Уже неоднократно об этом писала.

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

Комментарии, содержащие ненормативную лексику, спам, оскорбления, публиковаться не будут. Ели вы хотите опубликовать код в комментарии, то воспользуйтесь encoder HTML