Spoiler для blogger.

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

Для того, чтобы установить spoiler в blogger, нам потребуется
изменить html шаблона. Заходим и ищем закрывающий тег </body>, перед ним добавьте следующий код:

<script type='text/javascript'>

  WidgetSpoilerManager.setOption(&quot;defaultTitleText&quot;, &quot;Открыть спойдер&quot;);

</script>

<script src='https://dl.dropboxusercontent.com/u/72419062/JS/spoiler/widget_spoiler.js' type='text/javascript'/>

Под словами "открыть спойлер" имеется ввиду заголовк по умолчанию для спойлера, если мы не зафиксируем заголовок самостоятельно.

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

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




Теперь, для того, чтобы использовать spoiler в своих постах, в коде html Вашего сообщения используйте следующую конструкцию:

 <div class="spoiler" title="заголовок спойлера">спрятанный текст</div>