Архив рубрики: spoiler

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://lh5.googleusercontent.com/-SWOQVNt9y0M/TlT5KzL9cWI/AAAAAAAAAJw/TOt-RHHd4rg/spoiler-back.gif') 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>