Автоматическая прокрутка изображений и части текста на CSS для blogger

---

Всем доброго времени суток. В одной из своих записей я уже писала статью Как быстро и красиво оформить текст блога. Но часто получается, что текст длинный, или код метровый, и смотрится в сообщении уж очень некрасиво.

Сегодня хочу предложить Вам простой, автоматический способ оформления части текста и картинок на страницах сообщений в прокрутку, используя CSS стили. Для этого нам надо выделить текст или изображения в цитату, и установить код CSS.

CSS можно вставить шаблон изменить шаблон выше строки ]]></b:skin> для всех оформленных цитат, или в редакторе сообщений перейти по вкладке HTML и вставить в конце для одной страницы.

Кто с шаблоном пока на "Вы", заключите в тэг <style>код CSS</style> и вставьте дизайн добавить гаджет внизу макета блога (также для всех цитат в статьях). Оптимальный вариант для части длинного текста или, как у меня в блоге, кодов.

.post blockquote{width:auto;overflow: auto;max-height: 150px;}  
*// для шаблона;

<style>.post blockquote{width:auto;overflow: auto;max-height: 150px;}</style>
  *// для гаджета или вкладки HTML для одной страницы;

Подберите нужные ширину и высоту прокрутки, вставьте код CSS любым удобным способом. Затем Вам только останется в редакторе сообщений блоггер, в статье выделить текст, и вверху нажмите на значок "цитата".

Как только Ваш текст или код, выделенный в цитату, будет превышать установленные ширину и высоту, автоматически включиться прокрутка. Пример на скриншоте

Разные стили оформления цитат читайте в статье Красивые стили оформления цитат в блоге Blogspot;

Экспериментировать можно сколько угодно, например такой формы для больших кодов

Торгово-строительный банк помещался в большом, красивом здании, внутренняя отделка которого соответствовала его внешнему виду. Оно было выстроено лет сорок назад, когда новые владельцы пришли на смену тем, кто довел банк до краха. И эти новые владельцы решили, что пышность обстановки поможет восстановить доверие клиентуры.

Все будет зависеть от установленных размеров прокрутки. В примере я вставила CSS в конце статьи, только для этой страницы.

А так будут видеть читатели картинки на странице

Для оформления изображений делаем следующее: 

1. Загружаем необходимое количество картинок; 

2. На странице правой кнопкой мыши нажимаем "выделить все"; 

3. Нажимаем на значок "цитата"; 

4. Переходим по вкладке HTML и вставляем код CSS; 

5. Устанавливаем нужные размеры прокрутки; 

6. Только после этих действий пишем текст;

7. При желании сходите в тестовый блог и посмотрите пример;

Здесь все просто, но если будут вопросы, задавайте в комментариях или воспользуйтесь формой для связи. Всем всего доброго.

Похожие записи в блоге:

• Как сделать полосу прокрутки для виджета и боковой панели блога;
• Как выделить цитатой часть текста в блоге blogspot;
• Отключить/разрешить функцию копирования текста на CSS для блоггер;
• Тень текста заголовка ссылок цитат в blogger используя CSS;