Блок спойлера контента для записей в блогах

Сегодня вы узнаете, как реализовать спойлер HTML в блоге. Прежде чем продолжить, убедитесь, что это именно то, что нужно для вашего блога.

Посмотреть демо-версию

Как только вы установите нужный код, все, что нужно будет сделать, это разместить контент, который может содержать потенциальные спойлеры, в строку HTML.

Это небольшое дополнение мы настроили на работу с любыми типами устройств. Поэтому все читатели вашего блога будут получать наилучший опыт взаимодействия, не рискуя прочитать потенциальный спойлер, о котором они знать не хотят. Ниже приведены некоторые особенности реализации:

  1. Вам нужно будет выполнять минимум действий, после установки дополнения блока спойлера;
  2. Решение работает на Blogger, WordPress. Оно реализовано на HTML и CSS, поэтому будет прекрасно работать на любых сайтах;
  3. Ваши читатели используют мобильные устройства? Нет проблем, мы позаботились об этом. Им нужно просто нажать на блок спойлера, чтобы просмотреть скрытый контент;
  4. Вы можете подобрать цвет в соответствии с цветовой схемой вашего блога.

Начнем

Перед тем, как сделать спойлер в HTML, нужно выполнить несколько подготовительных действий:

  • Создайте резервную копию своего шаблона Blogger. В случае если что-нибудь пойдет не так, сможете восстановить его предыдущую версию;
  • Откройте текстовый редактор.

Это руководство разделено на две части: добавление CSS, а затем настройка HTML. По ходу каждой из них мы будем размещать небольшие напоминания, чтобы вы не теряли нить происходящего.

Добавление CSS

Скрытие и отображение контента в спойлере происходит с помощью CSS. Ниже приводится CSS-код, который мы будем использовать. Его объем составляет менее 2 Кб. Это значит, что он не повлияет на производительность вашего блога:

/*************************************
Spoiler Content Box
 # By Deepak Kamat
 # stramaxon.com
 # depy45631@gmail.com
 
Скачайте его для своего блога на:

http://goo.gl/ZiJj3J
*************************************/
.spoiler {
  position: relative;
  border: 2px dotted rgba(0,0,0,0.1);
  padding: 10px;
  background-color: #ffe496;
  margin: 10px 0;
}
 
.spoiler {
  color: #ffe496;
  color: transparent;
  -webkit-transition: 0.4s all ease-in-out;
  -moz-transition: 0.4s all ease-in-out;
  -ms-transition: 0.4s all ease-in-out;
  transition: 0.4s all ease-in-out;
}
 
.spoiler:hover ,
.spoiler:active ,
.spoiler:focus  {
  color: inherit;
}
 
.spoiler::after {
  content: "{Click or hover to see spoiler}";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #ffe496;
  text-align: center;
  font-size: 0.8em;
  padding: 10px;
  color: rgba(0,0,0,0.6);
  font-weight: 600;
  opacity: 1;
  -webkit-transition: 0.4s all ease-in-out;
  -moz-transition: 0.4s all ease-in-out;
  -ms-transition: 0.4s all ease-in-out;
  transition: 0.4s all ease-in-out;
}
 
.spoiler:hover::after,
.spoiler:active::after,
.spoiler:focus::after{
  opacity: 0;
}
 
/* Цвета */
.spoiler.green { background-color: #c8fbb8;}
.spoiler.green::after { background-color: #c8fbb8;}
.spoiler.blue { background-color: #bfe1ff;}
.spoiler.blue::after { background-color: #bfe1ff;}
.spoiler.red { background-color: #ffbfbf;}
.spoiler.red::after { background-color: #ffbfbf;}
.spoiler.purple { background-color: #e4bfff;}
.spoiler.purple::after { background-color: #e4bfff;}
.spoiler.black { background-color: #222; color: #fff;}
.spoiler.black::after { background-color: #222; color: #fff;}
.spoiler.white { background-color: #fff; color: #222; border-color: rgba(0,0,0,0.8); }
.spoiler.white::after { background-color: #fff; color: #222; }

Теперь выполните следующие действия:

  • Скопируйте весь приведенный выше код CSS спойлера для сайта HTML и вставьте его в текстовый редактор.
  • Перейдите в панель инструментов Blogger - Шаблон - Настройка - Дополнительно - Добавить CSS.
  • Вставьте CSS-код в текстовом поле с правой стороны, затем нажмите кнопку "Применить в блоге".

После того, как вы добавили CSS, можно перейти к следующему разделу, в котором вы узнаете, как задействовать код, который мы только что добавили.

HTML

Вот разметка, которая нам нужна. Скопируйте ее код:

<div class="spoiler">

The quick brown fox jumps over the lazy dog.

</div>

Это базовый код, который нам нужен. Конечно, вы захотите заменить "The quick brown fox jumps over the lazy dog". В блок спойлера можно разместить все, что хотите: изображения, текст и даже видео.

Использование HTML

Внимательно выполните следующие действия, чтобы понять, как добавить спойлера HTML код:

  • Откройте запись или проект в панели инструментов Blogger;
  • В верхнем левом углу редактора записей вы увидите две кнопки "Создать | HTML", нажмите на кнопку HTML или пропустите предыдущий шаг, включив функцию "Интерпретировать введенный HTML" в настройках редактора записей. В правой боковой панели в разделе «Настройки записей», нажмите на кнопку «Параметры», а затем выберите пункт «Интерпретировать введенный HTML»;
  • Вставьте HTML в запись. После этого, если вы вставили код в режиме "HTML", переключитесь обратно на "Создать", и вы увидите в редакторе текст без каких-либо стилей. Не беспокойтесь, когда вы загрузите запись в блоге, стили блока спойлера HTML CSS будут применены автоматически.

Применение различных цветов

Можно применить различные цвета блока спойлера. На выбор предлагается 7 цветовых стилей:

желтый (по умолчанию) | зеленый | синий | красный | фиолетовый | черный | белый

Вы можете легко изменить цвет содержимого блока спойлера контента, добавив его название в class="spoiler". Смотрите пример ниже:

Цвет по умолчанию:

<div class="spoiler">
...
</div>

Синий:

<div class="spoiler blue">
...
</div>

Зеленый:

<div class="spoiler green">
...
</div>

Нужно просто добавить название поддерживаемого цвета рядом с ключевым словом spoiler в атрибуте class.

Сгенерировать код блока спойлера

Не хотите писать код каждый раз, когда нужно добавлять блок спойлера HTML? Используйте этот генератор, чтобы ввести контент и сразу получить код, он также работает на смартфонах!

Перевод статьи «Spoiler Content Box for Posts in Blogger Blogs» был подготовлен дружной командой проекта Сайтостроение от А до Я.

06 сентября 2016 в 10:04
Материалы по теме
{"url":"http://www.fastvps.ru/", "src":"/images/advbanners/fastvps.png", "alt":"Хостинг Fastvps.ru. Наш выбор!"}
Заработок