Еще одно простое решение для скрытого текста - спойлера для блога на Blogger, Блогспот


Пост (в основном) для пользователей:
Blogger, Блоггер (Blogspot, Блогспот)

Что такое спойлер? Расскажу для непосвященных. Спойлер — такая конструкция, которая хранит в себе контент сайта, первоначально скрытый для пользователя. При клике по ссылке раскрывается весь текст. Кстати, я уже публиковал здесь один вариант спойлера.

Для чего это делается? Вообще для красоты… Например, дизайн сайта не предполагает размещение большого текста на главной странице сайта.
Но как говорится, лучше один раз увидеть, чем сто раз услышать. Посмотрите ниже пример спойлера, который просто вставляется в редактор ваших сообщений и одновременно сможете увидеть код: 



<div style="margin: 0px 0px 0px 0px;">
<div class="smallfont" style="margin-bottom: 0px;">
<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="background-color: #cfe2f3; border-color: #3d85c6; border-radius: 5px; border: solid 1px; color: #0b5394; cursor: pointer; font-size: 15px; font: bold 16px Georgia; margin: 0px; padding: 10px; width: 205px;" value="Посмотреть весь текст:" /> </div>
<div class="alt2" style="margin: 0px; padding: 0px;">
<div style="display: none;">
<br />
<br />ТЕКСТ КОТОРЫЙ СКРЫТ СПОЙЛЕРОМ</div>




Вариант с изменением цвета при наведении курсора и заднего фона срытого текста (по заявкам читателей):



ТЕКСТ КОТОРЫЙ СКРЫТ СПОЙЛЕРОМ


<div style="margin: 0px 0px 0px 0px;">
<div class="smallfont" style="margin-bottom: 0px;">
<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="background-color: #cfe2f3; border-color: #3d85c6; border-radius: 5px; border: solid 1px; color: #0b5394; cursor: pointer; font-size: 15px; font: bold 16px Georgia; margin: 0px; padding: 10px; width: 205px;class="qqq" onmouseover="this.style.background='green';" onmouseout="this.style.background='white';" value="Посмотреть весь текст:" /> </div>
<div class="alt2" style="margin: 0px; padding: 0px;">
<div style="display: none;background-color: #cfe2f3;">
<br />
<br />ТЕКСТ КОТОРЫЙ СКРЫТ СПОЙЛЕРОМ</div>


Красный цвет, это меняющиеся задние фоны кнопки и скрытого текста.
Настраивать цвета лучше в этом редакторе:
http://www.timsfreestuff.com/HTMLEditor/

26 коммент.:

Павел
Justus
KrediT
Justus
KrediT
Justus
Анна Шефер
KrediT
Ольга Ватутина
Justus
Ольга Ватутина
Justus
Ольга Ватутина
Владимир Стариков
Justus
Artem Buharev
Artem Buharev
Justus
Artem Buharev
Санубар Мамедова
Моментальный
Div Magicman
Mini Magnat
Maximilian Edelman
Великий Царь
Argihor

Отправить комментарий

Можно применять теги: <b></b><i></i><br />
<br />


Доска почета

Плюсани блог!