Как самому делать спойлер Этот Урок Посвящен Тем Кто Заливает Материал
В этом уроке я научу вас делать спойлер своими руками , не буду вас заблуждать в хитрости HTML , а просто обьясню что нужно вам делать.
итак вот вам готовый шаблон HTML спойлера самый новейший и крутой который я раздобыл в поиске) этот спойлер много функциональный он может иметь в себе много мелких малофункциональных спойлеров из за этого я почти всегда применяю его при оформлении материала!
<div
class="spoiler" title="Title (Название)">
Скрытый текст
</div>
<body>
<style
type="text/css">
/* Стили для
спойлера */
.bar {
background:#B2BDCB
url('http://lh5.ggpht.com/_3_wwcvitlLc/SlqyHLMerfI/AAAAAAAABKk/T3rgvkvrTZY/spoiler.png')
no-repeat;
padding-left: 30px;
color: #1A3457;
height:26px;
font-weight:bold;
cursor:pointer;
}
/* Скрытый спойлер */
.spoiler-hidden
.bar {
background-position: 0 0;
}
.spoiler,
.spoiler-hidden .text {
display: none;
}
/* Открытый спойлер */
.spoiler-visible
.bar {
background-position: 0 -26px;
}
.spoiler-visible
.copy {
text-align:right; font-size:0.6em;
}
.spoiler-visible
.text {
display:visible;
padding: 0 1em;
border: 1px dashed #B2BDCB;
border-top-width:0;
}
</style>
</body>
<script
src='http://bloggerhelp.ru/uploads/demo/spoiler/widget_spoiler.js'
type='text/javascript'></script>
<script
type='text/javascript'>
WidgetSpoilerManager.setOption("defaultTitleText",
"Скрытый текст");
WidgetSpoilerManager.init();
</script>
а теперь приступлю с обьяснению
Еще информация про него
1.Этот спойлер самый лучший пока что который мне попался на глаза
2.этот спойлер может в себе содержать маленькие спойлеры
3.но если вы не программист не создавайте два таких спойлера в одном материале ! они не совмещаются
Обсуждайте спойлер и задавайте вопросы тут
Заголовок вкладки
|