четверг, 21 января 2016 г.

как спрятать текст или изображения "под кат"

12:01 By No comments


Рубрика "Вопрос недели"

"Как разбить текст на несколько страниц, спрятав длинную статью под ссылкой "Читать дальше"?
Ниже мы подробно рассказали, как скрыть длинный текст "под кат", а также как создать специальную кнопку, которая позволит развернуть длинный текст. 


1. Создайте скрытую страницу с вашей статьей

Первым делом, создайте скрытую страницу в навигационном меню вашего сайта, и поместите на нее желаемый контент, например, статью или галерею изображений. 

Обязательно скройте эту страницу, нажав на иконку "глазика", как показано на картинке. Перечеркнутый глазик означает, что страница скрыта. 


2. Подготовьте страницу с ссылкой

Теперь добавьте еще одну новую страницу, но на этот раз не скрывайте её. Добавьте на нее все необходимые вам модули, например, модуль "Заголовок" для заголовка вашей статьи или модуль"Изображение", если хотите добавить к тексту несколько фотографий или какой-либо другой визуальный материал.

3. Установите ссылку на скрытую страницу

Добавьте новый модуль "Текст", поместив в него, например, только первый абзац своей статьи. Ниже добавьте ещё один текстовый модуль и введите в поле для текста, например, следующее: "Прочесть всю статью целиком". Теперь выделите написанное вами предложение и нажмите на кнопку создания ссылки, как показано на изображении справа.

В разделе внутренняя ссылка установите ссылку на скрытую страницу. Не забудьте нажать на "Сохранить".


4. Готово!

Теперь, когда посетители вашего сайта захотят прочесть всю статью, кликнув по ссылке "Прочесть статью целиком", они попадут на скрытую страничку с полным текстом статьи.

Для удобства ваших посетителей, установите под статьей на скрытой страничке ссылку на главную страницу вашего сайта, например такую "Вернуться на главную". Как создать ссылку на внутреннюю страницу, описано выше.

Для более удобного просмотра вы также можете спрятать длинный текст "под кат", установив кнопку "Развернуть". Узнайте, как это работает, нажав на кнопку ниже:


HTML-код для кнопки

<div class="spoil"><input type="button" value="Развернуть" class="input-button" 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 = 'Свернуть'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Развернуть'; }" /> </div>
<div class="alt2"> <div style="display: none;"> текст внутри спойлера... </div> </div></div>
У вас есть вопросы по Jimdo? В комментариях к записи напишите, о чём вам было бы интересно прочитать в следующий раз!

<script type="text/javascript">// <![CDATA[
function displ(ddd) { if (document.getElementById(ddd).style.display == 'none') {document.getElementById(ddd).style.display = 'block'} else {document.getElementById(ddd).style.display = 'none'} }
// ]]></script>
<p>
<a href="javascript:%20displ('var')">читать далее...</a>
</p>
<div id="var" style="display: none;">
Скрытый текст
</div>

//Примечание: если на одной странице будет две такие ссылки, то в код нужно внести кое-какие изменения.
Прочитала код от vesna-kachev по поводу ссылки "читать далее" и в конце кода идет такая надпись:
//Примечание: если на одной странице будет две такие ссылки, то в код нужно внести кое-какие изменения. Так вот это изменение касается слова "var" в двух местах кода. К следующей ссылке "читать далее" нужно добавить цифру 1 после слов var, в следующей ссылке цифру 2 и т.д.
Что же касается кода с кнопкой, то в таком виде он будет действовать только в первой кнопке. во все последующие кнопки нужно внести изменения в код: в начало кода добавить слово <div>.

0 коммент.:

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