разбить длинный текст на несколько страниц BLOGGER

Всем читателям, доброго времени суток. Если вы пишите очень длинные тексты, разумнее будет разбить таковой на несколько страниц. И выглядит красиво, и не пугает читателя. В своё время я поделилась двумя вариантами как разделить длинное сообщение на отдельные страницы в Блоггере.

Но там предполагалось подключение библиотеки jquery, да и сам процесс установки для начинающих блогеров кажется очень уж тягомутным. Один из читателей так и написал в комментариях - "Скрипт хороший, только на вид страшный гемморой"

Вот сегодня предлагаю намного упрощенный вариант разбивки длинного текста на отдельные страницы. Создаётся он с помощью javascript без подключения всяких библиотек. Да и канители (геммороя меньше).

Рабочий вариант смотрим на тестовом блоге

Демонстрация

Сделаем разбивку на 5 страниц - куда уж больше. Копируите целиком приведённый ниже код и вставляете его на страницу сообщения или статическую, как есть, в редакторе в режиме HTML. Настройки разберём ниже.

<style>
.button-box{margin:30px 0;text-align:center;}
#page1,#page2,#page3,#page4,#page5{display:none}
#page1.current{display:block}
a.button-pager{height:30px;line-height:30px;padding:0 20px; margin:0 5px 0 0;text-align:center;background:#ddd;color:#333;cursor:pointer;display:inline-block;}
a.button-pager.current{background:#333;color:#fff;}
</style>

<div id='topcontent'></div>

<div id="page1" class="current">
Ваш контент для 1 страницы.....
</div>

<div id="page2">
Ваш контент для 2 страницы......
</div>

<div id="page3">
Ваш контент для 3 страницы......
</div>

<div id="page4">
Ваш контент для 4 страницы......
</div>

<div id="page5">
Ваш контент для 5 страницы......
</div>

<div class="button-box">
<a class="button-pager current" id="button1" href="?page1#topcontent">1</a>
<a class="button-pager" id="button2" href="?page2#topcontent">2</a>
<a class="button-pager" id="button3" href="?page3#topcontent">3</a>
<a class="button-pager" id="button4" href="?page4#topcontent">4</a>
<a class="button-pager" id="button5" href="?page5#topcontent">5</a>
</div>

<script>
//<![CDATA[
var p1=document.getElementById("page1"),p2=document.getElementById("page2"),p3=document.getElementById("page3"),p4=document.getElementById("page4"),p5=document.getElementById("page5"),b1=document.getElementById("button1"),b2=document.getElementById("button2"),b3=document.getElementById("button3"),b4=document.getElementById("button4"),b5=document.getElementById("button5");window.location.href.search("page1")>0&&(p1.style.display="block",p1.classList.add("current"),b1.classList.add("current"),p2.style.display="none",p2.classList.remove("current"),b2.classList.remove("current"),p3.style.display="none",p3.classList.remove("current"),b3.classList.remove("current"),p4.style.display="none",p4.classList.remove("current"),b4.classList.remove("current"),p5.style.display="none",p5.classList.remove("current"),b5.classList.remove("current")),window.location.href.search("page2")>0&&(p1.style.display="none",p1.classList.remove("current"),b1.classList.remove("current"),p2.style.display="block",p2.classList.add("current"),b2.classList.add("current"),p3.style.display="none",p3.classList.remove("current"),b3.classList.remove("current"),p4.style.display="none",p4.classList.remove("current"),b4.classList.remove("current"),p5.style.display="none",p5.classList.remove("current"),b5.classList.remove("current")),window.location.href.search("page3")>0&&(p1.style.display="none",p1.classList.remove("current"),b1.classList.remove("current"),p2.style.display="none",p2.classList.remove("current"),b2.classList.remove("current"),p3.style.display="block",p3.classList.add("current"),b3.classList.add("current"),p4.style.display="none",p4.classList.remove("current"),b4.classList.remove("current"),p5.style.display="none",p5.classList.remove("current"),b5.classList.remove("current")),window.location.href.search("page4")>0&&(p1.style.display="none",p1.classList.remove("current"),b1.classList.remove("current"),p2.style.display="none",p2.classList.remove("current"),b2.classList.remove("current"),p3.style.display="none",p3.classList.remove("current"),b3.classList.remove("current"),p4.style.display="block",p4.classList.add("current"),b4.classList.add("current"),p5.style.display="none",p5.classList.remove("current"),b5.classList.remove("current")),window.location.href.search("page5")>0&&(p1.style.display="none",p1.classList.remove("current"),b1.classList.remove("current"),p2.style.display="none",p2.classList.remove("current"),b2.classList.remove("current"),p3.style.display="none",p3.classList.remove("current"),b3.classList.remove("current"),p4.style.display="none",p4.classList.remove("current"),b4.classList.remove("current"),p5.style.display="block",p5.classList.add("current"),b5.classList.add("current"));
//]]>
</script>

В первом коде CSS, при необходимости измените цвет кнопок. Я их отметила.

В участках кода

<div id="page1" class="current">
Ваш контент для 1 страницы.....
</div>

пишите ваш текст.

Вставляйте обычным путём графику, картинки, цитаты или что там ещё нужно для оформления вашего поста.

Если сейчас в редакторе перейти в обычный режим, всё будет выглядеть сплошным текстом с циферками слева. Это нормально. В режиме просмотра результат будет виден.

Собственно и всё. Всем добра и до встречи.

👇

Получайте новые сообщения с блога прямо на почту

Введите Ваш email