спойлер на чистом CSS для Блоггер

Привет, друзья. Спойлер на страницах сайта, не только элемент оформления страницы, но и вполне нужная вещь, когда публикуется длинный текст или создаётся некая интрига для посетителя. Скажем так - спойлер это часть информации. которая скрыта от посетителя, пока он не нажмёт кнопку или ссылку, чтобы увидеть всё содержимое.

спойлер в блоге
Это просто фото и здесь спойлер не откроется

Применение скрытого текста очень популярно и  ни как не влияет на поисковую оптимизацию. Спрятать можно всё что угодно. Картинки, коды, тексты, счётчики. Применение огромное. Прячьте свои рецептики, секретные формулы, ответы на загадки - всё что душа пожелает.

В статье красивая выпадающая панель я предлагала вариант спойлера, который работает на JavaScript. Сегодня для вас спойлер, где только чистая стилистика CSS3. Посмотрите на тестовом блоге его в работе


<div class="canustrating">
<input class="mesnongengas" id="punch" type="checkbox" />
  <label for="punch">Нажми для показа</label>
  <br />
<div>
<img alt="Ключевое слово" src="адрес картинки" style="height: auto; max-width: 100%;" />
  </div>
</div>
<style>
div.canustrating {
  color: #f7f4f4;
  text-shadow: 0 1px 0 #444040;
  width: 495px;
  padding: 1px;
  border-radius: 3px;
  margin: 1rem;
  text-align: center;
  font-family: Arial Black, sans-serif;
  margin: 0 auto;
}

div.canustrating label {
  display: block;
  background: #373c54;
  font-size: larger;
  border-radius: 5px;
  padding: 15px;
  transition: .4s all linear;
  border: 2px solid #f5f3f3;
  box-shadow: 1px 1px 5px rgba(72, 69, 69, 0.7), 1px 0px 10px 3px rgba(33, 31, 31, 0.44);
}

div.canustrating label:hover {
  cursor: pointer; background: #380f0f;
}
input.mesnongengas ~ div {
  height: 0px; margin: .2rem;
  overflow: hidden;
  transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620)
}
input.mesnongengas:checked ~ div { height: 215px;
}
input.mesnongengas:checked + label { background: #980c0c;
}

input.mesnongengas {
  display: none;
}</style>


В данном примере под вопросом спрятана картинка, в качестве ответа на загадку. В случае с текстом в коде замените адрес картинки на нужную информацию. Как - то так

<div class="canustrating">
<input class="mesnongengas" id="punch" type="checkbox" />
  <label for="punch">Нажми для показа</label>
  <br />
<div>
Тут всё самое интересное, важное, нужное
  </div>
</div>


Для реализации нужно скопировать код, написать ваш текст и установить его целиком прямо в редакторе в режиме HTML в нужном месте.
Со стилями самой кнопки тоже можно поиграться. Хотя бы даже с цветом, меняя свойства background:. Таблица есть здесь.

Начинающим блогерам не всегда бывает понятно сразу, а попробовать хочется. Пишите в комментариях - во всём разберёмся.

Всем спасибо и до встречи. 

Получайте новые сообщения с блога прямо на почту

Введите Ваш email


18 комментариев:

  1. Интересный спойлер! Просто замечательный!

    ОтветитьУдалить
    Ответы
    1. Ирина, что прятать будем. Кстати, по - моему ты однажды каким - то вариантом пользовалась, или я путаю.

      Удалить
  2. Очень интересная фишка. Но читатель сейчас живет на таких скоростях - что будет ли он заморачиваться и нажимать дальше? Но, думаю, такой спойлер очень хорош для текстов в виде списков, таблиц и так далее )))

    ОтветитьУдалить
    Ответы
    1. А вот тут я не согласна. Скорости да, но наоборот большинство скрывают длинные тексты которые бывает нудно читать. Так пробегут глазами и всё. А тем кому интересно и кнопку нажмут. А вот таблицы и списки как элемент дизайна должны быть на виду.

      Удалить
  3. Добрый день, Вика! Надо попробовать такой вариант. Мне спойлер нравится больше, чем кнопка далее... Но они у меня не хотят работать, сбиваются... Только на странице информации стоит. У меня картинки ставятся с компьютера, подойдет ли этот способ?!?

    ОтветитьУдалить
  4. Елена, спойлер и кнопка далее - разные вещи. Вы же не сможете каждый раз в каждом сообщении прятать картинки под спойлер. А разницы нет с компьютера или откуда. а что сбивается -то у Вас. И ссылку бы на блог.

    ОтветитьУдалить
    Ответы
    1. Я знаю, что это разные вещи. У меня в посте бывает 3-4 картинки и я их прячу под кнопкой далее. А хотелось бы под спойлером, что бы не переходить каждый раз на новую страницу... А сбивается что - просто спойлеры перестают работать. Мой блог - https://mirosslava55.blogspot.com/

      Удалить
  5. Здравствуйте, дорогой мой консультант, Виктория! Давно не обращался за помощью, честно говоря, не хотел отнимать у Вас время. Но в последнее время у меня категорически не появляются на странице ни пять, ни три , ни даже два предыдущих поста, хотя я честно пытался вернуть настройки, следуя Ваши инструкциям, как зомби зомбоведу! Прилагаю точную копию Вашего письма на эту тему.

    "Давайте покажу как правильно делать.

    1. Идёте в админпанель блога
    2. Опция НАСТРОЙКИ
    3. СООБЩЕНИЯ КОММЕНТАРИИ И НАСТРОЙКИ ДОСТУПА
    4. В графе Показать не более ? в окошке ставим циферку 5
    5. Сохраняем.

    Снимок прилагаю.

    Далее

    1. Опять админпанель
    2. Раздел ДИЗАЙН
    3. Выбираем гаджет СООБЩЕНИЯ БЛОГА и нажимаем ИЗМЕНИТЬ
    4. В открывшемся окне где написано
    Количество сообщений на главной странице:
    ставим ту же циферку
    5. Сохраняем.

    Теперь при написании нового сообщения, чтобы на главной отображались только анонсы, нужно разбить текст. Для этого в редакторе есть специальная кнопка. Нажав на неё увидите синюю черту, которая разобьёт сообщение. ( снимок прилагаю). В итоге Вы получите в готовом виде. на главной странице анонс и кнопку дальше(или подробнее) при нажатии на которую читатель перейдёт на страницу с полным текстом.

    Пробуйте, понимаю, тяжело сразу всё это переварить но пока хотя бы с заголовками. Без них ни как."

    Не знаю, можете ли Вы войти в мою админпанель, чтобы понять, что я, глупая обезъяна, делаю не так.
    Мой сегодняшний пост включает, по отмеченным в нем причинам, две части последней новеллы сразу. Впрочем, ну, кому я это объясняю! Всегда рад общению, и заранее благодарен за любой ответ.
    Семён.

    ОтветитьУдалить
    Ответы
    1. Семён, я же Вам и про заголовки уже писала. И вижу опять, что не первый раз у Вас опять 2 раза публикуется пост. Ну войду я в вашу админпанель, помогу пост опубликовать правильно, а дальше. Когда я Вам обЪясняла изначально, у Вас всё получалось, сейчас опять не то. Давайте уже так - просто пишите пост, и публикуйте как есть. Что - то не то. Возможно, Вы публикуете, потом возвращаетесь и опять публикуете то же самое. Там же есть режим просмотра. Написали - просмотрели - опубликовали. Всё.

      Удалить
  6. Елена, посмотрела у Вас. Как Вы это применяете. Ну а сбиваются скорее всего те, которые работают с JavaScript. тут хорошего, как говорится, по - немногу.

    ОтветитьУдалить
  7. Пригодится! Оригинальный.

    ОтветитьУдалить
    Ответы
    1. Наталья, оригинальный и без лишних скриптов.

      Удалить
  8. Вика, извините! Я повторял один и тот же пост, поскольку мне не удавалось открыть на одной странице несколько постов. Не буду больше Вас отвлекать от интересных вещей. Продолжу пробы, или же, как Вы справедливо посоветовали, вернусь к исходному: одна страница - один пост. Спасибо за ответ. Буду Вас почитывать из чистого любопытства.
    С наилучшими пожеланиями.
    Семён.

    ОтветитьУдалить
  9. Какая-то чертовщина. Делаю пробный пост с бессмысленным набором букв - всё, как надо! Появляется новый, пробный пост, а ниже на странице сохраняется старый. Загоняю нормальный новый текст - и упс! Потихоньку начинаю сходить с ума!

    ОтветитьУдалить
    Ответы
    1. Семён, не нужно делать ни какой пробный пост, с набором букв. Вот так мы все от вас и получаем в своей ленте Ваши публикации с набором букв. Давайте без всяких пробных. У Вас видимо один пост на главной настроено и поэтому они переходят на страницу предыдущие. Это именно о том что я Вам писала - 4. В графе Показать не более где значок ? в окошке ставим циферку 5.
      Не нужно никаких пробных, а тем более их публиковать. Пишите и публикуйте нормальные посты сразу.

      Удалить
  10. Спасибо, учту. Просто, когда я пробовал экспериментировать с постами, они у меня иногда просто пропадали. Но с этим я, вроде, справился. Буду пробовать осторожнее.

    ОтветитьУдалить
  11. мало применял у себя из рекомендаций, но понимание того, что есть, где все можно посмотреть, в одном месте - это круто

    ОтветитьУдалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML

Пользовательский поиск