Как сделать красивый спойлер html
Как сделать красивый спойлер html
При наполнении сайта контентом особую роль отводят его качеству – это и понятно, ведь именно качественные статьи представляют ценность как для посетителей, так и для поисковых систем. Но если уделять внимание только этому, то велика вероятность, что статью никто не оценит! Как такое может быть?
Представьте, что на сайте публикуется очень длинная статья, как их еще любят называть в интернете – портянка. В ней нет ничего кроме текста: ни картинок, ни заголовков, ни выделений и т.д. Даже если это именно то, что Вам нужно, наверняка статья не будет прочитана до конца.
Теперь представьте такую же статью, только с соблюдением должного оформления:
Вопрос скрытия/открытия контента довольно актуальный. Мы уже рассматривали как в одном и том же месте, на том же пространстве страницы сайта, можно вывести куда больше материала, чем это кажется на первый взгляд: статья про табы (своеобразные вкладки для вывода различной информации в одном и том же месте). В этой же статье речь пойдет о спойлерах для сайта wordpress.
Чтобы не вдаваться в определение спойлера сразу приведу пример:
Текст спойлера. Открывается/закрывается при клике.
Данный вид спойлера реализован при помощи плагина для wordpress, который будет рассмотрен ниже. Но прежде чем это сделать хочу показать Вам еще один вид спойлера: его можно наблюдать в нижней части шапки на этом блоге:
Кликните по нему и Вы увидите содержание данного спойлера. Он реализован без плагинов, этот вариант мы так же рассмотрим ниже.
Для чего нужны спойлеры на сайте?
Пара примеров применения спойлеров:
Поисковые системы без проблем индексируют содержание спойлеров, так что за это переживать ни в коем случае не нужно.
Спойлер на WordPress – как сделать с помощью плагина.
Для реализации спойлеров на движке WordPress написан замечательный плагин: Advanced Spoiler – он простой, удобный и красивый. Кроме того можно самому дописать стили для него, поэтому вписавать спойлеры в дизайн статей блога не составит никакого труда.
Выбираем эффект появления и текст при закрытом/открытом спойлере:
На этом вопрос редактирования настроек и применения спойлеров на wordpress при помощи плагина Advanced Spoiler можно закрыть. Но меня немного не удовлетворил результат работы плагина, а именно не совсем непонятно где кончается спойлер и продолжается статья, поэтому я посмотрел какой блок отвечает за стили внутреннего содержания спойлера и дописал их.
Я например для себя написал следующее:
Спойлер для сайта без плагинов.
Конечно владельцам сайтов на движке WordPress можно ограничится и плагином, но мне захотелось создать свой спойлер, с уникальными стилями и выводом. Да и не у всех же сайты на WP, поэтому эта статья должна им помочь в реализации таких вставок.
Что бы добавить спойлер в нужное место скопируйте вот этот код:
Замените два участка этого кода, на то что требуется:
Название спойлера выполнено в виде кнопки ( type=”button” ) с классом: class=”input-button”.
Для чего нужен спойлер HTML?
Знаетете ли вы, что такое спойлер HTML? Создание сайтов пользуется спросом у многих. Некоторые осваивают разработку интернет-ресурсов самостоятельно, берут информацию из самых разных источников. Есть понятия, с которыми им приходится сталкиваться впервые. Что такое спойлер и как его сделать на сайте без чьей-либо помощи? В этой статье вы узнаете об этом.
Рассмотрим спойлер HTML, работающий на любой системе управления сайтом (CMS). Спойлер – это конструкция, содержащая часть контента сайта, которая сначала скрыта для пользователя. Человек кликает на соответствующую ссылку и видит весь контент. С этой целью используется и спойлер HTML. Все еще не можете понять, для чего скрывать какой-то кусочек статьи? Чаще для внешнего украшения ресурса. Кроме того, спойлер HTML делают с некоторой практической целью. Например, создан сайт, дизайн которого не предусматривает расположение большой статьи на главной страничке. И если владелец хочет, чтобы ресурс продвигался поисковыми системами, необходим объемный контент. Вот тогда и выручает спойлер.
Поисковики скрытый текст видят, это не мешает рейтингу ранжирования ресурса. Часто спойлеры применяют, чтобы скрывать вспомогательную информацию, которая не всем интересна. Есть готовые плагины спойлеров, а можно разработать свой код с определенным стилем, соответствующим оформлению конкретного сайта.
Пример спойлера
Давайте разберемся с тем, как сделать HTML-код спойлера. Код, который вы видите ниже, следует разместить между тегами head вашего HTML-файла, если есть желание использовать ваш спойлер на нескольких страничках интернет-ресурса. В том случае, когда надо будет применить его только на одной определенной странице, можете поместить код между тегами body.
Спойлер для Joomla
Чтобы сделать его, например, в Joomla, можно воспользоваться плагином под названием Core Design Spoiler. Не забудьте про Core Design Scriptegrator, подгружающий все необходимые библиотеки. Скачивайте их у разработчиков с официальных сайтов, затем включите все в Менеджере плагинов. Для того чтобы поставить спойлер, скрывающий текст, заключите необходимый фрагмент статьи в тег спойлер ([spoiler]). В настройках можно выбрать его вид. Он может быть кнопкой или простой ссылкой. Еще задаются условия его раскрытия: по клику или в тот момент, когда пользователь будет наводить курсор.
Есть три параметра, доступных в этом теге:
Внутри тега spoiler допускается использование текста с HTML-тегами.
Спойлер – удобное средство, его широко применяют на разных блогах, форумах. Согласитесь, неплохо прятать те части страницы, которые ее перегружают. Улучшайте внешний вид своего сайта, так как это нравится многим пользователям.