Как спрятать текст под спойлер
Иногда нужно спрятать часть текста под спойлер. Данная функция необходима для того, чтобы на странице не виден был сразу весь текст, а его мог открыть пользователь при желании. Спойлер экономит место на странице и время вашего читателя. В этой статье вы узнаете о то, как делать спойлер на разных площадках.
Спойлер на форуме
Общий вид кода на форуме, поддерживающем BBcode, выглядит так:
Чтобы задать описание, по которому будет открываться показ скрытого текста, добавьте его после знака =. Пример: [spoiler=Открыть спойлер] Скрытая часть от посторонних глаз [/spoiler]
Для быстрой вставки спойлеров на некоторых форумах предусмотрены специальные кнопки в редакторах сообщений. Пример:
HTML-код спойлера на сайт
Спойлеры для сайта можно делать различными способами. Универсальный html-код спойлера, который можно добавить прямо в редактор сообщения сайта:
Вставлять код можно на любую html-страницу, в блог, на страницу сообщения wordpress, blogger и другие площадки. Посмотреть, в действии код можно здесь:
Здесь скрытое изображение
Второй вариант спойлера для блога
Подойдет для любого типа блога, где можно редактировать код шаблона. Это может быть площадка blogger, так и wordpress или joomla и другие.
-
в шаблоне блога (для Blogger.com — это раздел «Тема», для WordPress можно вставить код в спойлера в виджет) находим тег </body> и добавляем перед ним код:
Скрытый текст посредством HTML5
В HTML5 существуют специальные теги, с помощью которых можно создавать спойлеры, не прибегая к javasript. Чтобы скрыть текст, код или изображения на сайте необходимо вставить код в нужное место:
Посмотрите как работает этот код:
Спойлер для ЖЖ
В живом журнале поддерживается такие коды для спойлера:
Для группы VK
Для того, чтобы скрыть часть текста на странице группы вконтакте, понадобится следующий код:
как сделать «скрытый текст» (спойлер)
Гость
- Сообщение 1
как сделать «скрытый текст» (спойлер)
автор Admin Пт 22 Май 2009, 17:36
Работа такая
- Сообщение 2
Re: как сделать «скрытый текст» (спойлер)
автор Runa Вс 04 Июл 2010, 11:06
На форуме появилась новая возможность для функции "Спойлер" — новый расширенный код "Спойлер".
Обычный спойлер работает так:
Код: [spoiler]Текст, который необходимо скрыть[/spoiler] Выглядит так:
Спойлер:
Кто сейчас на форуме
Сейчас посетителей на форуме: 3, из них зарегистрированных: 0, скрытых: 0 и гостей: 3
Больше всего посетителей (117) здесь было Вт 06 Ноя 2012, 22:49
Последние темы
- Создать форум | Invision | Бесплатный форум поддержки | Сообщить о нарушении | Последние обсуждения
Copyright © «ZnaemTolk» 2009 — 2017. При использовании материалов и переводов с нашего форума — ссылка обязательна! Дизайн и его отдельные элементы принадлежит команде ZnaemTolk, любое частичное копирование запрещено.
Как скрыть текст на форуме
Оформление сообщений на форуме
Важное замечание для новичков!
Не торопитесь опубликовать сообщение, сделайте предварительный просмотр, чтобы убедиться, что все выглядит так, как Вы хотели.
Для этого необходимо нажать кнопку «Предварительный просмотр», находящуюся внизу окна редактирования сообщения.
Если все получилось, можно нажать кнопку «Отправить».
Сообщение отредактировал CyberBob — 14.05.14, 09:23
Что такое спойлер и как правильно использовать его в сообщениях?
Часто на форуме для уменьшения объёма сообщения применяют инструмент для сворачивания текста — спойлер. Он позволяет скрыть объёмные изображения и длинные тексты, при этом желающий ознакомиться с представленным материалом поближе может развернуть спойлер нажатием левой кнопки мыши по нему, при этом отображается всё содержимое спойлера. Далее подробно рассмотрены 2 типа спойлеров, использующихся на форуме. Вы можете использовать любой, в зависимости от ситуации.
ˇ Простой спойлер
Визуально спойлер представляет собой элемент разметки html-страницы, позволяющий свернуть текст и (или) изображение.
Кликнув на этот элемент, можно посмотреть его содержимое.
Например:
Чтобы спрятать под спойлер текст, делаем следующее.
После написания (или в процессе написания) сообщения, выделяем ту его часть,
которую хотим спрятать под спойлер, и нажимаем кнопку «Сделать текст сворачиваемым»:
то есть выделенный Вами текст обрамляется с обоих сторон тегами, обозначающими то, что после опубликования сообщения в интернет обозревателе будет отображаться как спойлер:
Спойлер с названием
Визуально этот элемент выглядит так:
Для заголовка спойлера применимы все функции форматирования текста, такие как:
– толщина шрифта (жирный шрифт)
– наклонный шрифт
– подчеркнутый шрифт
– перечеркнутый шрифт
– размер шрифта
– цвет шрифта.
Например:
Приведенный пример служит исключительно для демонстрации возможностей оформления спойлера и не должен использоваться как предмет подражания.
Как написать невидимый текст
Желание скрыть часть контента может возникать по разным причинам. Выяснять, для чего скрывают текст, картинки и другие элементы страницы, не станем, лучше узнаем, как написать невидимый текст, спрятать фотографию, баннер, ссылку различными способами. Для реализации большинства методов потребуются минимальные знания в области программирования и HTML-разметки.
Как скрыть текст на сайте
Используем HTML-код
Чтобы при помощи HTML создать скрытый текст, нужно открыть исходный код страницы, найти скрываемое слово или предложение и установить цвет шрифта таким же, как цвет фона страницы. После загрузки страницы в браузере текст сольется с фоном и станет невидимым. Также предложения можно сделать практически невидимыми путем изменения размера шрифта до очень маленького. Еще один вариант: скрыть текст под изображением, которое дополнительно может сливаться с фоном и быть из-за этого невидимым.
Используем DHTML
Динамический HTML-код состоит из обычного HTML, каскадных таблиц стилей и элементов языка сценариев. Он позволяет вносить изменения в содержимое страниц без их перезагрузки. Для реализации задуманного пользователю потребуется создать небольшой код CSS и установить его в теле страницы между тегами body. Каскадные таблицы стилей дают практически безграничные возможности в плане изменения внешнего вида контента. В примере текст скрыт, но при нажатии на кнопку он появляется. Если пользователю требуется только скрыть контент, то часть кода можно удалить.
Как скрыть текст на странице в DHTML
При помощи стилей можно прятать ссылки, предложения, текстовые блоки, таблицы, изображения, используя свойства скрываемого объекта. Например, свойства opacity, visibility, display, position, clip-path позволяют скрывать объекты разными способами.
Способы скрытия объектов
Способы скрытия объектов
Используем JavaScript
Код скрипта можно вписывать как в заголовок, так и в тело страницы между тегами head или body соответственно. Главное, не забыть обозначить начало и конец кода. Для этого пользуются тегами script.
Сначала надо написать функцию, которая будет скрывать контент.
Функция для скрытия контента в JavaScript
Далее в нужном месте кода страницы следует запросить вывод результата работы скрипта.
Вывод результата работы скрипта
При помощи данного скрипта была скрыта большая часть статьи. Ссылка «Подробнее» необходима для отображения спрятанного контента и одновременного скрытия самой ссылки после появления текста, так как в ней отпала необходимость.
Ссылка ‘Подробнее’ в JavaScript
Еще один пример. Этот скрипт нужно вставить в тело страницы в нужном месте. После загрузки страницы в браузере пользователь увидит две кнопки: «Скрыть» и «Показать». Нажав на соответствующую, он увидит или скроет alalala. Если вас заинтересовал вопрос, как сделать тег невидимым, то вам следует внимательнее относиться к написанию кода. Правильно написанные и использованные теги не отображаются браузерами, поэтому скрывать их нет необходимости.