Автоматическая прокрутка изображений и части текста на 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. При желании сходите в тестовый блог и посмотрите пример;

TEXT.RU - 100.00%


Автор статьи ✎ Olga Protasova Выпуск ✹ 3/02/2016 Ярлыки ►


Открыть комментарии →

0 коммент. :

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


 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *