Спойлер для Blogger: 5 вариантов для скрытого содержания

Когда статья длинная, к примеру много кодов или нужно скрыть фотографию как шутку применяют спойлер. Одним словом спойлер - это скрытый контент. Спойлеры в блог на Blogger можно добавлять с помощью JavaScript, библиотеки JQuery (JavaScript и HTML), CSS и HTML.

 

Предлагаю вашему вниманию 5 вариантов спойлера HTML и CSS самой простой установки в виде кнопок.

 

Коды вставляются в тело сообщения. В новом сообщении открываем редактор HTML, вставляем код спойлера который понравился из приведенных вариантов, изменяем текст на свой, нажимаем на вкладку "Создать" и изменяем цвет и шрифт текста.

 

<div> <div> </div><div> <div style="display: none;">Текст внутри спойлера </div></div></div>

Пример:

 

Осенний романс Стихи: Е.Клячкин Отчего в глазах прозрачно-карих золотая грусть не печалься славный мой товарищ больно ну и пусть разве это осень если сброшен первый жёлтый лист если столько ласки сердце носит милая очнись. Припев: Не грусти коль жизнь покажется одинокою это кажется обязательно окажется кто-то нужный на пути и как странно всё изменится неизвестно куда денется что мешало нам надеяться от беды своей уйти. Красною листвой земля согрета гаснущий костёр в лес осенним золотом одетый я войду как вор в синей вышине сомкнулись кроны в жёлтое кольцо посмотри же на свою корону подними лицо. И судьбой не избалована вдруг проснёшься коронованной царство осени бесценное упадёт к твоим ногам и прекрасна словно Золушка ты на месте в этом золоте и сама как драгоценность ты хоть себе не дорога. Вздрагивая ляжет на ладони крохотный листок ты не бойся мы тебя не тронем жёлтый огонёк опускайся где-нибудь в сторонке мы замедлим шаг где твои братишки и сестрёнки меж собой шуршат. В этом шорохе услышится ах как дышится ах как дышится даже падая колышется каждый листик погляди разве можно разувериться если любится и верится если хочется надеяться если столько впереди

Осенний романс Стихи: Е.Клячкин Отчего в глазах прозрачно-карих золотая грусть не печалься славный мой товарищ больно ну и пусть разве это осень если сброшен первый жёлтый лист если столько ласки сердце носит милая очнись. Припев: Не грусти коль жизнь покажется одинокою это кажется обязательно окажется кто-то нужный на пути и как странно всё изменится неизвестно куда денется что мешало нам надеяться от беды своей уйти. Красною листвой земля согрета гаснущий костёр в лес осенним золотом одетый я войду как вор в синей вышине сомкнулись кроны в жёлтое кольцо посмотри же на свою корону подними лицо. И судьбой не избалована вдруг проснёшься коронованной царство осени бесценное упадёт к твоим ногам и прекрасна словно Золушка ты на месте в этом золоте и сама как драгоценность ты хоть себе не дорога. Вздрагивая ляжет на ладони крохотный листок ты не бойся мы тебя не тронем жёлтый огонёк опускайся где-нибудь в сторонке мы замедлим шаг где твои братишки и сестрёнки меж собой шуршат. В этом шорохе услышится ах как дышится ах как дышится даже падая колышется каждый листик погляди разве можно разувериться если любится и верится если хочется надеяться если столько впереди.

 

<div style="margin: 0px 0px 0px 0px;"><div style="margin-bottom: 0px;"> </div><div style="margin: 0px; padding: 0px;"><div style="display: none;"><br /><br />Текст скрыт спойлером</div><br /></div></div></div>

 

 

 

 

 

ПРИМЕР

Ча́йки (лат. Larus) — наиболее многочисленный род птиц семейства чайковых, обитающих как на морских просторах, так и на внутренних водоёмах

 

 

 

 

 

 

 

 

 

 

 

 

ПРИМЕР

Копить деньги — вещь полезная, особенно если это сделали за вас родители. Уинстон Черчилль

 

<details open> <!-- Для того, чтобы элемент был видимым изначально, следует добавить атрибут open --> <summary>Посмотреть код</summary> <pre>исчезающая информация</pre><p>исчезающий текст </details>

 

<label for="raz">Ваш текст о скрытой информации - кликнуть!</label><div><br /><br />исчезающий текст</div>

 

С уважением, Галина Молдованова

 

Будь вместе с Я блоггер

 

Будь в тренде!

Получай материалы прямиком в свою почту

Я даю согласие на сбор и обработку своих персональных и не персональных данных согласно действующей на сайте — политике конфиденциальности.
* Нажимая на кнопку "Отправить", "Подпишись" или "Комментировать" Вы соглашаетесь с пользовательским соглашением.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Яндекс.Метрика