Спойлер для Blogger (Blogspot)

 

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

 

Как спрятать текст, картинку, код под спойлер в Blogger (Blogspot)

 

Вариант который я вам предлагаю не требует вмешательства в html код шаблона.

 

Как спрятать текст, картинку, код под спойлер в Blogger (Blogspot)

 

В редакторе сообщений открываем вкладку HTML и вставляем код. Изменяем то что выделено красным на свои варианты. Добавляем текст, код, картинку или ссылку на изображение и публикуем сообщение.

 

Спойлер немножко капризный. Что бы он корректно работал, вначале нужно написать статью, отредактировать код в блокноте или в редакторе html, затем зайти в сообщение на  вкладку html и найти слово после которого нужно вставить спойлер, и только тогда вставляем код. Все редактирования сообщения делаем до вставки кода.

 

<div style="margin: 0px 0px 0px;"><b>Посмотреть скрытое содержание</b>: <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Закрыть'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Открыть'; }" style="font-size: 10px; margin: 0px; padding: 10px; width: 100px;" type="button" value="ОткрытьЗакрыть" /> </div><div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;"><div style="display: none;">Здесь Ваш текст, код или изображение</div></div>
</div>

 

 

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

 

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

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

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

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

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

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