Еще одно простое решение для скрытого текста - спойлера для блога на 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
Unknown
KrediT
Ольга
Justus
Ольга
Justus
Ольга
Unknown
Justus
Unknown
Unknown
Justus
Unknown
Unknown
Моментальный
Анонимный
Mini Magnat
Максимилиан Эдельман
Unknown
Argihor

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

Дорогие Друзья! К сожалению, по причине здоровья, моя активность по этому блогу будет осуществляться по мере ВОЗМОЖНОСТИ!

Доска почета

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