Простой и красивый спойлер (jQuery)
Всем привет!
Раньше я Вам показывала, как создать спойлер для блога на Вордпресс при помощи плагина Advanced Spoiler, почитать Вы можете вот в этой статье
Для новичков я хочу пояснить, что такое спойлер на сайте и для чего он нужен. Спойлер представляет собой блок, внутри которого спрятан текст или другое содержание. Спойлер содержит заголовок, кликнув по которому открывается, спрятанное ранее содержание, вот наглядный пример работы спойлера не моем блоге:
Кликните, чтобы увидеть содержание спойлера
Поздравляю! Вы открыли спойлер 🙂
Для более легкого восприятия информации на странице, особенно там, где ее много и должна быть структурирована удобно использовать спойлер.
Поскольку мы будем настраивать вывод спойлера на сайте без плагина, то Вам придется редактировать файлы темы WordPress блога. Сохраните резервную копию файлов перед редактированием.
Последовательно работы:
Вот неплохой сервис подбора цвета - ссылка .
На этом настройка спойлера завершена. Теперь в режиме "Текст" в админке блога, добавляйте вот этот код:
Текст заголовка Текст, скрытый под спойлером
Как Вам такая реализация вывода спойлера на любой странице блога? Сложно? Пишите свои отзывы в комментариях.
Знаетете ли вы, что такое спойлер HTML? Создание сайтов пользуется спросом у многих. Некоторые осваивают разработку интернет-ресурсов самостоятельно, берут информацию из самых разных источников. Есть понятия, с которыми им приходится сталкиваться впервые. Что такое спойлер и как его сделать на сайте без чьей-либо помощи? В этой статье вы узнаете об этом.
Что такое спойлер?
Рассмотрим спойлер HTML, работающий на любой системе управления сайтом (CMS). Спойлер - это конструкция, содержащая часть контента сайта, которая сначала скрыта для пользователя. Человек кликает на соответствующую ссылку и видит весь контент. С этой целью используется и спойлер HTML. Все еще не можете понять, для чего скрывать какой-то кусочек статьи? Чаще для внешнего украшения ресурса. Кроме того, спойлер HTML делают с некоторой практической целью. Например, создан сайт, дизайн которого не предусматривает расположение большой статьи на главной страничке. И если владелец хочет, чтобы ресурс продвигался поисковыми системами, необходим объемный контент. Вот тогда и выручает спойлер.
Поисковики скрытый текст видят, это не мешает рейтингу ранжирования ресурса. Часто спойлеры применяют, чтобы скрывать вспомогательную информацию, которая не всем интересна. Есть готовые плагины спойлеров, а можно разработать свой код с определенным стилем, соответствующим оформлению конкретного сайта.
Давайте разберемся с тем, как сделать HTML-код спойлера. Код, который вы видите ниже, следует разместить между вашего HTML-файла, если есть желание использовать ваш спойлер на нескольких страничках интернет-ресурса. В том случае, когда надо будет применить его только на одной определенной странице, можете поместить код между тегами body.
Заголовок спойлера и его тело выглядит так:
Основное сделано, но пока наш спойлер не будет работать полноценно. Дело в том, что содержимое нашего HTML-спойлера остается всегда открытым. Чтобы это исправить, потребутся CSS. Добавьте:
Если сделаете все, как здесь описано, получите работоспособную конструкцию.
Чтобы сделать его, например, в Joomla, можно воспользоваться плагином под названием Core Design Spoiler. Не забудьте про Core Design Scriptegrator, подгружающий все необходимые библиотеки. Скачивайте их у разработчиков с официальных сайтов, затем включите все в Менеджере плагинов. Для того чтобы поставить спойлер, скрывающий текст, заключите необходимый фрагмент статьи в тег спойлер (). В настройках можно выбрать его вид. Он может быть кнопкой или простой ссылкой. Еще задаются условия его раскрытия: по клику или в тот момент, когда пользователь будет наводить курсор.
Есть три параметра, доступных в этом теге:
- Title дает возможность указать свой заголовок в кавычках.
- Action позволяет выбрать действие, открывающее спойлер.
- Element задает вид спойлера (link - ссылка, а button - кнопка).
Внутри тега spoiler допускается использование текста с HTML-тегами.
Спойлер - удобное средство, его широко применяют на разных блогах, форумах. Согласитесь, неплохо прятать те части страницы, которые ее перегружают. Улучшайте внешний вид своего сайта, так как это нравится многим пользователям.
Вы сможете легко организовать скрытые блоки с содержанием, раскрывающиеся по клику.
Согласитесь, иногда лучше сделать маленький блок скрытого текста с аккуратной кликабельной надписью, скрыть под ней, например: правила комментирования, html-код кнопки или баннера и т.д. Тот, кому это очень нужно — нажмёт на выделенную надпись и всё увидит. Нет необходимости постоянно держать на виду у всех определённые данные.
Наверное самый известный пример использования скрытого текста, это хорошо всем известные «спойлеры» на различных форумах.
Скрытый текст, можно организовать и с помощью jQuery, и на чистом CSS, у каждой техники есть, как преимущества, так и недостатки.
Сегодня же, я хочу продемонстрировать совсем крохотный javascript, с помощью которого, очень просто «спрятать под кат», практически любую информацию у себя на сайте.
И так, у нас есть какой-то текст, нам необходимо выделить либо отдельное слово, термин или целую фразу и сделать их кликабельными. Для этого достаточно «обнести» нужное нам слово(фразу) тегом , как в примере, или же ссылкой, используя тег . Многие чаще используют тег , тут и курсор прописан, и выделение по умолчанию, но я так думаю, зачем нам ссылки, которые никуда не ведут, а «нарисовать» курсор, и выделить любой элемент, легко можно с помощью css. Так что, внутри текста смело пользуем :
| < span class = "tt" onclick= "view("t1"); return false" > текст текст текст |
текст текст текст
Тут всё очень просто, class="tt" используем для оформления фразы(слова) в css, где навешиваем курсор, выделяем, подчеркиваем если нужно и т.д., с помощью onclick="view("t1"); return false" привязываемся через идентификатор t1 к исполняемому js, и к скрытому до поры до времени блоку с содержанием.
В зависимости от того, сколько вы будете использовать скрытых блоков на одной странице, вам необходимо менять порядковый номер id, т.е. t1, t3, t3 и так далее...
Для скрытого текста, можете использовать div-контейнер, или же, как в примере, всё тот же тег , главное связать его классом с css и не забыть правильно указать идентификатор:
Как я упоминал выше, чтобы завести наш «спойлер», открывать и скрывать по клику, понадобится крохотный javascript, размещённый непосредственно в теле страницы, лучше перед тегом :
| < script type= "text/javascript" > function view(n) { style = document. getElementById(n) . style; style. display = (style. display == "block" ) ? "none" : "block" ; } |
function view(n) { style = document.getElementById(n).style; style.display = (style.display == "block") ? "none" : "block"; }
Вот и всё, вам остаётся только определиться, что же такого-этакого скрыть с глаз пользователей. Поковыряться в коде, можете непосредственно в онлайн-редакторе, да в принципе, там и ковырять то нечего))).
Всех с наступающим новым годом! Здоровья, остальное всё добудем сами!
С Уважением, Андрей
Спойлер (от англ. spoiler — «прерыватель потока») — это такая удобная штучка для скрытия больших объёмов текста или другого контента на сайте. Например, на вашем сайте может быть опубликован фильм. Вы можете сделать к нему краткое описание и скриншоты, но не всем будет интересна эта информация — её лучше скрыть в спойлер. Или список песен опубликованного музыкального альбома можно спрятать в спойлер... Ну, вы поняли. В этой статье я приведу кусок кода для реализации спойлера без плагинов на любом движке. А для WP будет дополнительная примочка.
Чтобы ваш объёмный текст или другой материал (давайте, я дальше буду его называть «скрытый контент») уютно поместился в спойлер, его надо будет оформить таким макаром:
Ваша статья.. Это скрытый контент Продолжение вашей статьи.
«Скрытый текст (нажмите, чтобы развернуть)» — это заголовок спойлера, в закрытом состоянии будет виден только он. Конечно, такой HTML каждый раз писать влом. К тому же, это ещё только начало, а не весь код. Подождите немного — будет веселей.
Нам было бы куда удобней пользоваться вот таким кодом:
Это скрытый контент
И это возможно. Если у вас не WordPress, то, надеюсь, вы хорошо знаете свой движок и основы программирования, иначе интеграция моего кода вызовет у вас затруднения.
А счастливые пользователи WP могут смело дописывать в файл темы function.php следующий код (надеюсь, вы учтёте по редактированию файлов WP):
Function сайт_spoiler ($atts, $content) { if (!isset($atts["title"])) $sp_title = "Скрытый текст (нажмите, чтобы развернуть)"; else $sp_title = $atts["title"]; return " ".$sp_title." ".$content." "; } add_shortcode("spoiler", "сайт_spoiler");
Вот теперь в ваших постах можно использовать шоткод . Если у вас не WP , но вы хотите использовать шоткод, вам поможет вот этот PHP-код:
$content = str_replace ("", " Скрытый текст (нажмите, чтобы развернуть) ", $content); $content = str_replace ("", "", $content);
Но, догадывайтесь сами, что такое $content и куда это вставлять, ведь я не знаю, что у вас за движок.
И это ещё не всё. В шаблон отображения страниц вашего сайта (для WP подойдёт, например, header.php ) необходимо вставить этот JS код:
(function($){ var SBobj = ""; $(".spoiler-body").hide(); $(".spoiler-head").click(function(){ $(this).toggleClass("unfolded"); SBobj = $(this).next(); if ($(SBobj).css("display") == "none") $(SBobj).show(300); else $(SBobj).hide(300); }) })(jQuery);
Это движитель нашего спойлера. Как видите, он для работы требует JS-фреймворк jQuery (в WP он подключается автоматически). Тем не менее, если вы видите сразу скрытый контент, а при клике на заголовок спойлера ничего не происходит, значит, возможно, у вас jQuery не подключена. Тогда спросите у поисковой системы «как подключить jquery» или добавьте перед описанным выше кодом ещё и этот код:
И заключительный штрих — прописываем стили спойлера. Пользователи WP редактируют файл темы style.css , дописывая в него следующие строки:
Spoiler-wrap { background: #eee; border: 1px solid #aaa; border-radius: 5px; margin: 12px 6px; } .spoiler-head { padding: 2px 18px; cursor: pointer; background: url("images/spoiler-icon1.png") no-repeat 3px 9px } .unfolded { background: url("images/spoiler-icon2.png") no-repeat 3px 9px } .spoiler-body { margin: 5px; display: none; }
Вы конечно же видели на некоторых сайтах запрет на использование правой кнопки мыши. Эта функция прежде всего борется с теми, кто хочет украсть ваш контент. Полностью от воровства вас не защитит эта мера, но от ручного копирования вполне. Другие варианты .
Не рекомендую отключать правую кнопку мыши, если вы выкладываете в своем блоге материалы, предназначенные для копирования. Это могут быть коды, скрипты, кулинарные рецепты, справочные материалы и другое. Запрет на копирование в данном случае отвернет от вас посетителей, и ваш блог станет менее полезным для посетителей. Если вам важна защита от плагиата, то тогда лучше используйте добавление вашего url в конце копии. Тогда вы будете уверены, что если кто-то захочет опубликовать в другом месте в интернете, скопированное у вас, то копипастер с большей вероятностью поделится ссылкой на ваш блог.
Этот рецепт подходит для любого веб-сайта. Вам нужно лишь вставить код на все страницы вашего блога:
В Blogger добавьте код в гаджет HTML/Javascript во вкладке “Дизайн”. Если вы используете одну из последних тем на вашем блоге (Emporio, Contempo, Soho, Notable), то не забудьте активировать видимость виджета (галочка напротив “Виден всем”, “Показать виджет " HTML/JavaScript "”).
На Wordpress добавьте код в виджет “Текст”.
Приближается праздник - Международный женский день. Подготовимся заранее к нему. Вы можете оригинально поздравить девушек и женщин, воспользовавшись сервисами открыток, о которых пойдет речь ниже.
Создать открытку 8 марта онлайн
Воспользуйтесь следующими сервисами, чтобы создать открытку практически с нуля.
Я надеюсь, что воспользовавшись одним из этих генераторов, вы сможете достойно поздравить своих дам с 8 марта!
Содержание статьи:
Google Plus закрывается Платформа Google Plus не оправдала надежд разработчиков и будет удалена полностью уже 2 апреля 2019 года. Вместе с ней исчезнут связанные с ней альбомы в Google Фото, станут недоступными авторизации на сайтах с аккаунтом Google Plus. Уже с 4 февраля стала недоступной функция создания профилей Google Plus, каналов и страниц. Если на вашем аккаунте хранился ценный контент, то вы можете скачать резервную копию .Больше всех изменения коснутся блогеров, ведущих свои блога на Blogspot. Станут недоступны некоторые виджеты G+, комментарии G+, а также профиль Google +. Об этом сказано в уведомлении в админке Blogger:
После объявления о прекращении работы API Google+, которое запланировано на март 2019 года, 4 февраля будет внесен ряд изменений в интеграцию Blogger с Google+.
Виджеты Google+. В дизайне блогов больше не будут поддерживаться виджеты "Кнопка +1", "Подписчики Google+" и "Значок Google+". Из вашего блога будут удалены все экземпляры этих виджетов.
Кнопки +1. Будут удалены кнопки +1 и G+, а также ссылки "Опубликовать в Google+" под записями в блоге и на панели навигации.
Обратите внимание, что, если вы используете пользовательский шаблон, в котором есть функции Google+, его может быть необходимо изменить. Обратитесь за рекомендациями к тому, кто предоставил вам этот шаблон.
Google+ Комментарии. Будет прекращена поддержка комментариев с использованием Google+, а для всех блогов, которые используют эту функцию, будут восстановлены стандартные комментарии Blogger. К сожалению, комментарии, размещенные через Google+, невозможно перенести в Blogger, поэтому они больше не будут отображаться в вашем блоге. Удаление комментариев Google Plus К сожалению, комментарии, которые были опубликованы в системе будут удалены безвозвратно. Вы лишь можете воспользоваться тем же инструментом https://takeout.google.com , чтобы сказать резервную копию комментариев от Google + на свой компьютер. Только загрузчика для него не предусмотрено и восстанавливать комментарии вам можно только вручную достаточно кривым способом. Хорошо, что я в свое время вовремя .Как заменить профиль гугл плюс профилем Блоггер Если вы ведете блог на Blogspot, то целесообразно сейчас вернуться с профиля Гугл Плюс на профиль Blogger (для тех, кто переключился на гугл плюс в своё время). Рекомендую сделать это прямо сейчас во избежании непредвиденных ситуаций, которые могут происходить при удалении аккаунтов Google Plus. Как вернуть профиль Blogger Сделать это просто в настройках админки Blogger:
Настройки –> Пользовательские настройки –> Профиль пользователя – здесь выберите Blogger
Сохраните изменения.
Подтвердите переход на и задайте свое имя или никнейм.
Не забудьте загрузить аватар в вашем профиле Blogger.
Как удалить профиль гугл плюс Если вы решили раз и навсегда избавиться от профиля Г+, то перейдите на свою страницу гугл плюс –> Настройки –> прокрутите страницу до конца вниз –> удалить аккаунт гугл плюс:
Сегодня расскажу что такоеCSS3, с чем его едят, где его искать, как правильно его прописывать. Предупреждаю, буду рассказывать от себя, упрощенно для широкой публики, как я это вижу + примеры. Итак, начнем издалека.
CSS – это стили, в которых прописываются свойства объекта. Значит, они есть во всех существующих движках, если вы их не можете найти, значит либо не там смотрите, либо их действительно нет (кривой сайт
). Где же они обычно найти? Обычно это корень сайта, название файла style.css, хотя, в принципе, название не так важно, как расширение.css, если файл с таким расширением – это файл стилей.
Смотрите также на моём блоге.
