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

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

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

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

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

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

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

    Перед тем, как сделать спойлер в 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» был подготовлен дружной командой проекта Сайтостроение от А до Я.

    О нас seoexpert

    продвижение сайта,seo оптимизация,поисковое продвижение,раскрутка сайтов,поисковая оптимизация,продвижение сайта в гугл,seo раскрутка,продвижение сайтов в яндексе,продвижение сайта в google,продвижение сайтов в топ 10,Оптимизация и продвижение сайтов,услуги продвижения сайта,заказать продвижение,продвижение сайтов в топ,сео раскрутка сайта

    Смотрите также

    Создание цветной рамки вокруг текста с помощью HTML и CSS

    Рамка на HTML-страницах, созданная с помощью border color, помогает привлечь внимание к тексту или выделить ...