Одним из полезных инструментов при работе с большими объемами текста является spoiler (спойлер). Он скрывает на странице текст и располагает его в кнопку. При нажатии на которую, текст будет отображаться полностью. Один из способов экономии пространства на странице, а так же для удобства и читабельности.
Для того, чтобы установить spoiler в blogger, нам потребуется
изменить html шаблона. Заходим и ищем закрывающий тег </body>, перед ним добавьте следующий код:
<script type='text/javascript'>
WidgetSpoilerManager.setOption("defaultTitleText", "Открыть спойдер");
</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>