Ну что, многому вы уже научились, но еще даже и половины пути мы с вами не прошли дорогие друзья. В нашей кладовой осталось еще много разных и чудесных трюков по улучшению дизайна и работы шаблона blogger. В последней нашей статье мы разбирали, как разделить текст сообщения на колонки, в сегодняшней статье речь так же пойдет о примочке для контента, но не только для текста, а и для видео, картинок, таблиц и т.д. Часто бывает, что в своем посте нам нужно указать много разных элементов и чтобы все красиво смотрелось некоторые из них было бы неплохо припрятать под спойлер. Именно о том, как добавить на свой сайт стильный спойлер мы и поговорим. Это совсем не сложно и сам процесс добавления очень схож с тем, который был в вышеупомянутой статье о разделении текста на столбцы. Для тех кто хочет увидеть спойлер и пощупать его до установки можете перейти на наш тестовый блог.
Итак для того, чтобы добавить спойлер вам нужно открыть в панели управления раздел Шаблон - Изменить HTML найти код ]]> и перед ним вставить следующий код:
#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;
}Затем сохраняете шаблон и при создании поста для добавления спойлера используем следующий код:
Здесь должен быть ваш контент
Добавили код опубликовали пост и проверяем, что у нас вышло. Теперь для вас не составит труда спрятать ту часть поста, которая не совсем вписывается в его интерьер.
Увы этот спойлер имеет один минус, его нельзя использовать дважды в одном и том же посте из-за того, что его id повторяется и тот спойлер, который был добавлен первым уже не срабатывает. По-этому тем кому нужно использовать спойлер несколько раз в одном посте, я предлагаю использовать другой спойлер, правда он будет не столь красив, как первый.
Итак каждый раз когда нужно скрыть содержимое поста, переходите из вкладки Создать на вкладку HTML и добавляете следующий код:
Вроде бы все.
Коммент.