Сегодня 5 декабря, четверг ГлавнаяНовостиО проектеЛичный кабинетПомощьКонтакты Сделать стартовойКарта сайтаНаписать администрации
Поиск по сайту
 
Ваше мнение
Какой рейтинг вас больше интересует?
 
 
 
 
 
Проголосовало: 7276
Кнопка
BlogRider.ru - Каталог блогов Рунета
получить код
Блог для блогов - создание блога на blogspot
Блог для блогов - создание блога на blogspot
Голосов: 1
Адрес блога: http://bdblogov.blogspot.com/
Добавлен: 2013-06-02 03:52:18 блограйдером Olga28
 

Спрятать длинный текст спойлером

2013-09-24 12:55:00 (читать в оригинале)

Мы научились делать вертикальную и горизонтальную прокрутку текста, заголовков сообщений, прокрутку всего содержания блога. Сегодня научимся, как скрыть длинный текст спойлером, или как ещё говорят: скрыть под кат. Согласитесь, не совсем красиво смотрится, когда сообщение растягивается длинной простыней. Правда, разработчики Google предоставили нам возможность воспользоваться ссылкой <дальше> в редакторе сообщений, но не все шаблоны её поддерживают. У меня в этом блоге ссылка <дальше> не работает. Вносила изменения в шаблон, но все безрезультатно. Поэтому, у кого такая же ситуация, копируем код ниже и прячем текст под кат с помощью этого кода. Тем более, что сделать это совсем не сложно. Пишите в редакторе сообщение, получается слишком длинное. Скопированный ниже код вставляете, нажав HTML, затем-создать. У вас появится спойлер. Дальше копируем ту часть текста, которую хотим скрыть, нажимаем опять HTML и вставляем текст в код, где написано <текст скрыт спойлером>.


<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>

Получаем вот такой результат.
Нажмите и читайте весь текст.



Нажмите <посмотреть текст>. увидите как текст раскрывается, при повторном нажатии текст спрячется. Можно спрятать любой текст, решать Вам. Вы можете внести изменения: изменить ширину спойлера width 205 px, цвет текста и фон кнопки .На сегодня все. Надеюсь информация была полезной. До свидания.

Как выделить текст цитатой
Как узнать URL адрес ссылки на картинку



Текст скрыт спойлером

Тэги: длинный, спойлером, спрятать, текст

 


Самый-самый блог
Блогер Рыбалка
Рыбалка
по среднему баллу (5.00) в категории «Спорт»
Изменения рейтинга
Категория «Предметы»
Взлеты Топ 5
Падения Топ 5


Загрузка...Загрузка...
BlogRider.ru не имеет отношения к публикуемым в записях блогов материалам. Все записи
взяты из открытых общедоступных источников и являются собственностью их авторов.