Спойлеры в блоге

Сейчас мы добавим возможность создания спойлеров и в наш блог!

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


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

Добавим немного оформления для спойлера, чтобы он красиво выглядел. Для этого встроим необходимый CSS-код в шаблон под строку "/* Accents":


/* Accents
----------------------------------------------- */
.bar {
background: #138FD8 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZa2a2dcHcmRScp6yDkKqrB85JjjkFb4jh_AGsfhi7w8IqBe5fqYMR5CleUPmrri5bEjGdTlCBKQV1ajgzaL7RU3jbmer0YUcEsCh4hxNZhggBUeJPfWAZh4S2uNUyfMI1Du3w7XeCq1I/') 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;
}

С подгонкой цветовой гаммы, формы спойлера и шрифтов под свой блог, думаю, сложностей возникнуть не должно :-)

Теперь о самом главном: как же активировать сие чудо? Используем для этого простую конструкцию: <div class="spoiler" title="заголовок спойлера">спрятанный текст</div>.