Svoboda | Graniru | BBC Russia | Golosameriki | Facebook
Записи Друзья Комментарии
Шадрина Галина
Аватар Шадрина_Галина

 -Рубрики

 -Приложения

  • Перейти к приложению Всегда под рукой Всегда под рукойаналогов нет ^_^ Позволяет вставить в профиль панель с произвольным Html-кодом. Можно разместить там банеры, счетчики и прочее
  • Перейти к приложению Открытки ОткрыткиПерерожденный каталог открыток на все случаи жизни
  • Перейти к приложению Кнопки рейтинга «Яндекс.блоги» Кнопки рейтинга «Яндекс.блоги»Добавляет кнопки рейтинга яндекса в профиль. Плюс еще скоро появятся графики изменения рейтинга за месяц
  • Перейти к приложению Я - фотограф Я - фотографПлагин для публикации фотографий в дневнике пользователя. Минимальные системные требования: Internet Explorer 6, Fire Fox 1.5, Opera 9.5, Safari 3.1.1 со включенным JavaScript. Возможно это будет рабо

 -Всегда под рукой

 -Поиск по дневнику

Поиск сообщений в Шадрина_Галина

 -Подписка по e-mail

 

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 22.09.2013
Записей: 1430
Комментариев: 53055
Написано: 55127


Сделать текст с окошечком прокрутки (флеймом)

Среда, 30 Июля 2014 г. 02:02 + в цитатник

Сделать текст с прокруткой во флейме.
Флейм - это очень нужное окошечко, куда можно спрятать длинный текст и читать его, прокручивая вниз. Наверняка уже встречали подобное. Например я вставляю в пост разделители ( можно длинный текст, или картинки), и для экономии места, делаю это вот в таком окошечке, который и называется флейм.






















Сделать такое окошечко очень просто. Сначала пишете нужный Вам текст, затем в самое начало (перед Вашим текстом) вставляете вот этот код:



Рассмотрим эту формулу на картинке



Значения указанные цифрами:

1 - это ширина текста по отношению к странице, сейчас стоит 100% (это по ширине страницы, то есть поста) - если хотите чтоб было окошечко было меньше (как у меня вверху, где написана формула)меньше просто поменяйте цифру. Да и если Вам по какой-то причине не нравиться делать в процентах, то вы всегда можете изменить % на px.
2 - это высота видимого текста, стоит 300, можете по необходимости менять в большую или меньшую сторону.( У меня поменяно на 150)
3 - это отступ сверху от начала сообщения, сейчас стоит 0, если хотите, то можете поменять и флейм с текстом опустится вниз, на нужное вам значение.
4 - это отступ с левой стороны страницы, стоит 0, так же можете поменять на нужное вам значение. Это нужно, если вы например перед окошечком хотите вставить картинку.

Выглядеть это будет вот так.
Арбузики
Первое, что Вам нужно поменять, так это отступ с левой стороны, потом ширину и высоту прокрутки, для этого нужно знать размер картинки. Размеры моей картинки 250х260, значит 4 ПУНКТ (отступ слева) мы меняем на 260, а 2 пункт (высота прокрутки ) мы меняем, на 250. Ширину прокрутки (пункт 1) с 100% я поменяла на 360px (под ширину своего экрана) - Вы можете поменять на нужное Вам значение


Если вы хотите сделать несколько таких окошечек в посте, или продолжить текст далее без окошечка (сделать просто окно- вставку), то, что б закрыть окно, сделайте закрывающий тег - /div

Весь код (с закрывающим окошечко тегом /div, будет выглядеть вот так.

<div style="width: 100%; height: 300px; margin-top: 0px; margin-left: 0px; text-align: center; font-size: 14px; overflow: auto">ТЕКСТ ИЛИ КАРТИНКА В ПРОКРУТКЕ</div>

Успехов в вашем творчестве.
Рубрики:  Уроки для блогов
Метки:  

Процитировано 307 раз
Понравилось: 180 пользователям
Нравится

Комментировать — К дневнику — Страницы: [1] 2 3 [Новые]
Даша_Лебидева   обратиться по имени Среда, 30 Июля 2014 г. 02:30 (ссылка)
Ответить С цитатой В цитатник
NIKALATA   обратиться по имени Среда, 30 Июля 2014 г. 02:35 (ссылка)
Великолепно - спасибо большое.
Ответить С цитатой В цитатник
yuriy_iWowWe   обратиться по имени Среда, 30 Июля 2014 г. 03:10 (ссылка)
БОЛЬШОЕ ВАМ СПАСИБО! ЗА УДИВИТЕЛЬНО-ПРЕКРАСНЫЙ ПОСТ!
Тебе от меня~Открытки для Тебя
Ответить С цитатой В цитатник
Надежда_Гостевская   обратиться по имени Среда, 30 Июля 2014 г. 03:15 (ссылка)
спасибо большое !!!
Ответить С цитатой В цитатник
gudosh   обратиться по имени Среда, 30 Июля 2014 г. 06:14 (ссылка)
Спасибо вам за науку!
Ответить С цитатой В цитатник
Mila-milay   обратиться по имени Среда, 30 Июля 2014 г. 06:57 (ссылка)
Шадрина_Галина, благодарю Вас!
Ответить С цитатой В цитатник
Нина36   обратиться по имени Среда, 30 Июля 2014 г. 08:09 (ссылка)
Галочка,большое спасибо тебе!!!
Ответить С цитатой В цитатник
руки_без_скуки   обратиться по имени Среда, 30 Июля 2014 г. 08:17 (ссылка)
Ответить С цитатой В цитатник
Злато_власка   обратиться по имени Среда, 30 Июля 2014 г. 08:22 (ссылка)
Спасибо большое!!!
Ответить С цитатой В цитатник
Галина_Осколкова   обратиться по имени Среда, 30 Июля 2014 г. 08:22 (ссылка)
Спасибо,Галина!!!
Ответить С цитатой В цитатник
Anushka_M   обратиться по имени Среда, 30 Июля 2014 г. 08:33 (ссылка)
Cпасибо большое Галочка!!!
Ответить С цитатой В цитатник
Марина_55   обратиться по имени Среда, 30 Июля 2014 г. 08:42 (ссылка)
Спасибо, Галочка!
Ответить С цитатой В цитатник
я_просто_Рита   обратиться по имени Среда, 30 Июля 2014 г. 09:34 (ссылка)
Спасибо,Галочка!Надо попробовать!!!Тогда можно и под КАТ не убирать???
Ответить С цитатой В цитатник
Перейти к дневнику

Воскресенье, 10 Августа 2014 г. 21:42ссылка
Шадрина_Галина
Да, такие окошечки и делаются вместо ката.
ОтветитьС цитатойВ цитатникОбратиться по имени
Перейти к дневнику

Понедельник, 22 Сентября 2014 г. 23:15ссылка
я_просто_Рита
Сделала.получилось,пользуюсь.Спасибо!Галя, ты не знаешь,как сделать рамку для фото(окантовку) для поста на лиру.Ну никак у меня не получается!Может еще кому то надо???Ну т.е.просто обвести картинку рамочкой,в моем случае красным цветом примерно 2px.Ну и чтоб потом просто менять код другой картинки.Не понятно поди написала?
ОтветитьС цитатойВ цитатникОбратиться по имени
BAGIRA-2012   обратиться по имени Среда, 30 Июля 2014 г. 10:20 (ссылка)
Ответить С цитатой В цитатник
TIGRITZA   обратиться по имени Среда, 30 Июля 2014 г. 10:51 (ссылка)
СПАСИБО !
Ответить С цитатой В цитатник
мадам-_тата   обратиться по имени Среда, 30 Июля 2014 г. 10:56 (ссылка)
Спасибо тебе Галочка! Давно хотела научиться этому. Спасибо!
Ответить С цитатой В цитатник
irma_bauer   обратиться по имени Среда, 30 Июля 2014 г. 11:13 (ссылка)
Просто прелесть материал .нужный.
Ответить С цитатой В цитатник
ЭМИЛЛИ   обратиться по имени Среда, 30 Июля 2014 г. 11:34 (ссылка)
Спасибо,Галиночка!Пригодится!!!
Ответить С цитатой В цитатник
Алло_чка44   обратиться по имени Среда, 30 Июля 2014 г. 12:50 (ссылка)
Спасибо тебе, Галочка! Давно хотела научиться этому. Очень нужный урок! Цитирую с удовольствием!
Ответить С цитатой В цитатник
Моисеева_Надежда   обратиться по имени Среда, 30 Июля 2014 г. 14:07 (ссылка)
Галочка, спасибо за урок!
Ответить С цитатой В цитатник
Biryusinka   обратиться по имени Среда, 30 Июля 2014 г. 14:50 (ссылка)
Превосходно!
Благодарю, Галина.
Ответить С цитатой В цитатник
Нинуля_Смолина   обратиться по имени Среда, 30 Июля 2014 г. 15:52 (ссылка)
Спасибо,Галочка за урок !!!!
Ответить С цитатой В цитатник
lola-malvina   обратиться по имени Среда, 30 Июля 2014 г. 16:13 (ссылка)
Спасибо,Галочка,за очередной урок!
Ответить С цитатой В цитатник
Олюнь   обратиться по имени Среда, 30 Июля 2014 г. 18:05 (ссылка)
Спасибо огромное!!!

(Добавил ссылку к себе в дневник)

Ответить С цитатой В цитатник
bolgarozka   обратиться по имени Среда, 30 Июля 2014 г. 19:34 (ссылка)
Галочка,спасибо за урок!!!
Ответить С цитатой В цитатник
Natalie_Riwe   обратиться по имени Среда, 30 Июля 2014 г. 21:33 (ссылка)
Спасибо,Галина!
Ответить С цитатой В цитатник
VeraVik   обратиться по имени Четверг, 31 Июля 2014 г. 00:08 (ссылка)
Ответить С цитатой В цитатник
lora-46   обратиться по имени Четверг, 31 Июля 2014 г. 10:46 (ссылка)
Спасибо, Галина.
115215222_getImage__3_ (492x471, 77Kb)
Ответить С цитатой В цитатник
vdomarvik   обратиться по имени Четверг, 31 Июля 2014 г. 23:44 (ссылка)
Спасибо большое!!!
Ответить С цитатой В цитатник
RozArija   обратиться по имени Пятница, 01 Августа 2014 г. 16:41 (ссылка)
спасибо
Ответить С цитатой В цитатник
Комментировать — К дневнику — Страницы: [1] 2 3 [Новые]
 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку


О проекте