О том и о сём -про блоги: Спойлеры (скрытие текста) \рабочие\основные. Йёжа Йежов

Это обзорная статья по спойлерам .Материал взят из инета . Ссылки на первоисточники прилагаю .
Что такое спойлеры ? Это скрытие части текста ,которую при необходимости можно развернуть .Спойлер способствует компактности сообщения ,так что вещь в хозяйстве нужная ! Чаще пользуюсь седьмым спойлером ,раньше пользовался больше первым.И первый и седьмой позволяют делать несколько спойлеров на одной странице ,впрочем ,не только они .С помощью 7 спойлера сделано допустим содержание раздела моего блога "О том и о сём " Наше кино , Не наше кино ,а также Содержание статьи о блогах данного раздела про блоги ,единствено ,если захочется к примеру поставить и седьмой и первый спойлеры на одном блоге ,надо будет ковыряться и прописывать разные стили .Я это делать не очень умею ,точнее совсем не умею ,хотя для данной статьи всё-таки получилось совместить Первый спойлер и Седьмой .

Спойлер один .

Делается много спойлеров на одной странице ,без проблем

Взято с блога Наблюдатель за Переходом
Название статьи
Как делать спойлер в блоге

Можно пофантазировать и немного изменить вид .

Код можно здесь взять

http://www.divshare.com/download/19480846-816
Инструкция по установке под спойлером .....

1.В редактировании блога Шаблон - Изменить HTML - поставить галку Расширить шаблоны виджета.
2. Найти </head> (как это сделать описано в статье Найти строчку или код в шаблоне и в сообщении в режиме HTML Йёжа Йежов и вставить перед ним :

3.Найти </body> и вставить перед ним:

4.Нажимаем Сохранить шаблон

5. Для вставки в сообщение в режиме HTML пишем

<div class="spoiler" title="Название спойлера допустим РАЗВЕРНУТЬ ">Ваш скрытый текст ,картинка и тд <br /> </div>

Естественно , название можно написать Ваше

Спойлер два

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

Взято с блога
Школа Blogger(а)
Статья
Стильный спойлер (spoiler) для Blogger

Код можно здесь взять

http://www.divshare.com/download/19480848-7d4

Spoiler:

Вставляем также в сообщение в режиме HTML

Спойлер три

Взято с сайта blogger.com.md/
Название статьи Скрытый текст (спойлер) для вашего блога!

Код можно здесь взять

http://www.divshare.com/download/19480896-0cf

Открыть спойлер

Спойлер четыре

Очень даже стильный спойлер в клеточку

Взято с сайта blogger.com.md/
Название статьи Скрытый текст (спойлер) для вашего блога!

Код можно здесь взять

http://www.divshare.com/download/19480955-6df

Кстати можно вставить несколько спойлеров. и спойлер в спойлер

Title (Название)

1. Зайти в Шаблон ---> Изменить HTML
2. С помощью поиска (Ctrl+F) вам надо будет найти эту строку в вашем шаблоне:
</body>
Перед этой строчкой добавляем

Затем ищем

]]></b:skin>

/* Spoiler ----------------------------------------------- */ .container { width: 99%; display:block; margin: 0 auto; } .box_title { font-size:14px; /* 14px - размер название спойлера */ font-family:candara; } .block_text { font-size:12px; /* 12px - размер текста */ font-family:candara; } /*----------------------------------------------- */

Далее с помощью поиска (Ctrl+F) вам надо будет найти эту строку в вашем шаблоне:
</head>

Также должна быть подключёна библиотека Джейкверри (см

Подключаем библиотеку jQuery (Джейкверри) на блоге blogger(blogspot) .Йёжа Йежов - New !!

)

При добавлении в сообщение вставляем следубщий код в режиме HTML

<div class="container"> <div class="box /*----если хотим , чтобы спойлер при загрузке был закрыт меняем box на box closed ---*/"> <div class="box_title"> Title (Название) </div> <div class="hide"><span class="s">Показать</span><span class="h">Скрыть</span></div> <div class="block"> <div class="block_text">
Ваш текст или картинка
</div> </div> </div></div>

если хотим , чтобы спойлер при загрузке был закрыт меняем box на box closed

Спойлер пять

Под спойлер можно спрятать и таблицы, и изображения, и даже видео.

Спойлер шесть

Взят с блога votrexflame.blogspot.ru
Название статьи Как создать спойлер для скрытия отдельных фрагментов сообщения блога
Не требует ковыряния в шаблоне .Установка прямо в сообщение в режиме HTML.У меня , к сожалению ,работает через раз.Когда устанавливаю ,работает норм .Потом что -то исправляю в тексте и всё ,не хочет . Но может у вас заработает

Показать / Скрыть ▼▲

Спойлер семь

Взято с блога Блогер о Blogger
Название статьи Спойлеры в блоге Это спойлер .которым скрыта данная часть статьи.А также
ПОСМОТРЕТЬ РЕЗУЛЬТАТ МОЖНО ЗДЕСЬ Легко меняется цвет ,делается несколько спойлеров.Инструкция по спойлером ,разверните.
Этот спойлер мне нравится больше всего

Итак, в создании спойлеров нам как всегда помогут javascript и CSS. Сначала интегрируем скрипт. Для этого открываем шаблон на редактирование (Идём в редактирование блога Шаблон->Изменить HTML), находим закрывающий тэг с помощью кнопок Ctrl+F

</body>

и прямо перед ним добавляем следующий код:

<script type='text/javascript'> WidgetSpoilerManager.setOption("defaultTitleText", "Подробнее"); </script> <script src='http://dl.dropbox.com/s/e6skbrad7o1c73m/widget_spoiler.js' type='text/javascript'/>

ознакомиться с содержимым скрипта, лежащего по адресу http://aboutblogger.googlecode.com/files/widget_spoiler.js, к которому выше шло обращение: МОЖНО ЗДЕСЬ ВСтавлять его никуда не надо на него сделана сылка Далее находим с помощью кнопок Ctrl+F

]]></b:skin>

Вставляем перед ним

/* Accents ----------------------------------------------- */ .bar { background: #138FD8 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7NAvVtPG_U3s8Maw-PjLqohbdqFbhLbvtjdADpDP9TgSow7CXFoobgIIUr3zzyIq5P0R72UuJ2WdnP6BzV6Ss9qsmR_wZAKB9iatLjldx-qF33SceRe0wqrUA-nGZgoWfS_X2nYcDPZ0/') no-repeat; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; box-shadow: 1px 1px 1px #bbb; -webkit-box-shadow: 1px 1px 1px #bbb; -moz-box-shadow: 1px 1px 1px #bbb; padding-left: 30px; color: #fff; font-size: 15px; font-family: 'Trebuchet MS', Trebuchet, sans-serif; cursor: pointer; } .spoiler-hidden .bar { background-position: 0 0; } .spoiler, .spoiler-hidden .text { display: none; } .spoiler-visible .bar { background-position: 0 -20px; border-radius: 3px 3px 0 0; -webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; box-shadow: 1px 0 1px #bbb; -webkit-box-shadow: 1px 0 1px #bbb; -moz-box-shadow: 1px 0 1px #bbb; } .spoiler-visible .text { display: visible; padding: 5px 1em 0; border: 1px solid #138FD8; border-top-width: 0; border-radius: 0 0 3px 3px; -webkit-border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px; box-shadow: 1px 1px 1px #bbb; -webkit-box-shadow: 1px 1px 1px #bbb; -moz-box-shadow: 1px 1px 1px #bbb; }

Цвет можно поменять найдя background: #138FD8

Чтобы вставить в сообщение пишем