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

Вчера я опубликовала статью об оформлении цитат в блоге при помощи тега 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(https://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(https://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;
}

Вы можете изменить внешний вид цитаты, изменив лишь ссылку на изображение в предыдущем коде цитаты.
Вот примеры тетрадных листов, ссылки на изображение можете скопировать под ними:

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

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

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

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

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

https://img-fotki.yandex.ru/get/6208/40839264.2/0_7aca2_9e86c090_orig

Еще один вариант цитаты тетрадного листа, как у меня в блоге. Ее код:

blockquote {
background: #fff url(https://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.