8/18/2015

Blogger - спойлер для блога.


Ну что, многому вы уже научились, но еще даже и половины пути мы с вами не прошли дорогие друзья. В нашей кладовой осталось еще много разных и чудесных трюков по улучшению дизайна и работы шаблона blogger. В последней нашей статье мы разбирали, как разделить текст сообщения на колонки, в сегодняшней статье речь так же пойдет о примочке для контента, но не только для текста, а и для видео, картинок, таблиц и т.д. Часто бывает, что в своем посте нам нужно указать много разных элементов и чтобы все красиво смотрелось некоторые из них было бы неплохо припрятать под спойлер. Именно о том, как добавить на свой сайт стильный спойлер мы и поговорим. Это совсем не сложно и сам процесс добавления очень схож с тем, который был в вышеупомянутой статье о разделении текста на столбцы. Для тех кто хочет увидеть спойлер и пощупать его до установки можете перейти на наш тестовый блог.

Итак для того, чтобы добавить спойлер вам нужно открыть в панели управления раздел Шаблон - Изменить HTML найти код  ]]></b:skin> и перед ним вставить следующий код:
#flippy {
    text-align: center;
}
#flippy button {
    background: #4DB2EC;
    color: #fff;
    text-align: center;
    margin: 0 auto;
    border: none;
    border-radius: 3px;
    padding: 8px 16px;
    margin: 10px auto;
    font-size: 14px;
    font-weight: bold;
    vertical-align: middle;
    cursor: pointer;
    text-shadow: 0 1px rgba(0, 0, 0, 0.3);
    transition: background 0.1s ease-in-out;
}
#flippy button:hover, #flippy button:focus {
    background: #5A6269;
    outline: none;
}
#flippanel {
    padding: 1px;
    text-align: left;
    background: #;
    border: 0px;
}
#flippanel {
    padding: 24px;
    display: none;
}


Затем сохраняете шаблон и при создании поста для добавления спойлера используем следующий код:
 
<div id="flippy"><button>Спойлер</button></div>
<div id="flippanel">
Здесь должен быть ваш контент
</div>

Добавили код опубликовали пост и проверяем, что у нас вышло. Теперь для вас не составит труда спрятать ту часть поста, которая не совсем вписывается в его интерьер.

Увы этот спойлер имеет один минус, его нельзя использовать дважды в одном и том же посте из-за того, что его id повторяется и тот спойлер, который был добавлен первым уже не срабатывает. По-этому тем кому нужно использовать спойлер несколько раз в одном посте, я предлагаю использовать другой спойлер, правда он будет не столь красив, как первый.

Итак каждый раз когда нужно скрыть содержимое поста, переходите из вкладки Создать на вкладку HTML и добавляете следующий код:

<div><input value="Показать содержимое" onclick="if(this.parentNode.getElementsByTagName('div')[0].style.display != ''){this.parentNode.getElementsByTagName('div')[0].style.display = '';this.value = 'Скрыть содержимое';}else{this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Показать содержимое';}" type="button" /><div style="display: none;">Вставьте сюда контент, который нужно спрятать</div></div>

Вроде бы все.

Поделиться

Facebook TwitterGoogle+ Vkontakte

Рекомендуем

Blogger - спойлер для блога.
4/ 5
Oleh

5 Коммент.

Оставить комментарий
avatar
ШоуRoom Channel
декабря 09, 2015 Этот комментарий был удален автором.
avatar
ШоуRoom Channel
декабря 09, 2015

А как вставить два спойлера в одном тексте??? второй не срабатывает

Ответить
avatar
Шаблоны для Blogger
декабря 09, 2015

К сожалению данный спойлер можно использовать на каждой из страниц сайта всего один раз, из-за того, что его id повторяется. Добавлю сегодня в эту же статью многоразовый, но он простенький.

Ответить
avatar
Шаблоны для Blogger
декабря 09, 2015

Готово, можете тестировать новый спойлер.

Ответить
avatar
ШоуRoom Channel
декабря 09, 2015

спасибо!

Ответить