Всем доброго времени суток. В одной из своих записей я уже писала статью Как быстро и красиво оформить текст блога. Но часто получается, что текст длинный, или код метровый, и смотрится в сообщении уж очень некрасиво.
Сегодня хочу предложить Вам простой, автоматический способ оформления части текста и картинок на страницах сообщений в прокрутку, используя CSS стили. Для этого нам надо выделить текст или изображения в цитату, и установить код CSS.
CSS можно вставить шаблон изменить шаблон выше строки ]]></b:skin> для всех оформленных цитат, или в редакторе сообщений перейти по вкладке HTML и вставить в конце для одной страницы.
Сегодня хочу предложить Вам простой, автоматический способ оформления части текста и картинок на страницах сообщений в прокрутку, используя 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 для одной страницы;
*// для гаджета или вкладки HTML для одной страницы;
Подберите нужные ширину и высоту прокрутки, вставьте код CSS любым удобным способом. Затем Вам только останется в редакторе сообщений блоггер, в статье выделить текст, и вверху нажмите на значок "цитата".
Как только Ваш текст или код, выделенный в цитату, будет превышать установленные ширину и высоту, автоматически включиться прокрутка. Пример на скриншоте
Разные стили оформления цитат читайте в статье Красивые стили оформления цитат в блоге Blogspot;
Экспериментировать можно сколько угодно, например такой формы для больших кодов
Торгово-строительный банк помещался в большом, красивом здании, внутренняя отделка которого соответствовала его внешнему виду. Оно было выстроено лет сорок назад, когда новые владельцы пришли на смену тем, кто довел банк до краха. И эти новые владельцы решили, что пышность обстановки поможет восстановить доверие клиентуры.
Все будет зависеть от установленных размеров прокрутки. В примере я вставила CSS в конце статьи, только для этой страницы.
А так будут видеть читатели картинки на странице
Для оформления изображений делаем следующее:
1. Загружаем необходимое количество картинок;
2. На странице правой кнопкой мыши нажимаем "выделить все";
3. Нажимаем на значок "цитата";
4. Переходим по вкладке HTML и вставляем код CSS;
5. Устанавливаем нужные размеры прокрутки;
6. Только после этих действий пишем текст;
7. При желании сходите в тестовый блог и посмотрите пример;
Здесь все просто, но если будут вопросы, задавайте в комментариях или воспользуйтесь формой для связи. Всем всего доброго.
Похожие записи в блоге:
Похожие записи в блоге:
Рекомендуемый контент:
