Публикация на отделни страници с навигационни номера

Здравейте, всички! Обещах ви тази публикация и вероятно я очаквате. Ако сте посещавали новинарски блог, кулинарен блог или блог за четене, сте срещнали публикация, разделена на няколко страници. Обикновено в публикацията има бутон Next и когато го натиснете, ще бъдете отведени до следващата страница. 

В тази моя публикация ще споделя как да разделите на няколко отделни страници с навигационни номера една ваша публикация с дълго съдържание.

Предимства

Някои предимствата на прилагането на тези съвети са:
➤Ще улесни посетителите, няма да се уморяват да превъртат страницата
с дълго съдържание, при което страничната колона се скрива;
➤Подходящи са за сайтове или блогове за новини, кулинарни блогове и изобщо блогове за четене;
➤Може да се използва като маркер за посетителите - от коя страница ще продължат четенето по-късно;
➤Увеличава се броя на преглежданията на страниците, защото има функция за опресняване на страницата при натискане на клавиша за навигация към следващата страница;

Как да го направим?

Е, приятели, който иска да използва този метод в своя блог, моля, следвайте стъпките по-долу.

 
➤Първият съвет, който ще ви дам, е да разделите на няколко абзаца или раздела, съдържанието на публикацията, в която ще приложите този метод. Тези няколко раздела са по ваше желание.
➤Както обикновено, отворете страницата Blogger, щракнете в менюто върху Тема ➔ Редактиране на HTML кода и добавете този CSS код преди  </head>:

<b:if cond='data:blog.pageType != &quot;index&quot;'>

<style type='text/css'>

/* Membagi Halaman di Postingan */

.post-content,.pagearl br{display:none}.arlinapage{text-align:center;margin:30px auto 0 auto;border-top:1px solid rgba(0,0,0,0.1)}.pagearl{margin:30px auto;text-align:center;padding:0;overflow:hidden}.pagearl .buttonar{background:#fff;font-weight:400;display:inline-block;color:#222;text-decoration:none;text-align:center;border:1px solid rgba(0,0,0,0.1);border-right:0;margin:auto;font-size:14px;padding:.4rem .75rem;transition:all .1s}.pagearl .buttonar:last-child{border-right:1px solid rgba(0,0,0,0.1)}.pagearl .buttonar:hover,.pagearl .buttonar:active{background:#fafafa;color:#222}.buttonar.arlinapage{background:#3498DB;border-color:#3498DB;color:#fff;transition:all .1s}.buttonar.arlinapage:hover{background:#2980B9;border-color:#2980B9;color:#fff}

</style>

</b:if>

➤Добавете следния код преди </body>:

<b:if cond='data:blog.pageType != &quot;index&quot;'>

<script type='text/javascript'>

//<![CDATA[

function get_n(halaman){var o,t,e=decodeURIComponent(window.location.search.substring(1)).split("&");for(t=0;t<e.length;t++)if((o=e[t].split("="))[0]===halaman)return void 0===o[1]||o[1]}$(document).ready(function(){var halaman=get_n("halaman");$(".post-content").hide(),void 0===halaman?$(".content_1").show():$(".content_"+halaman).show();var o=$(".post-content").length;if(0!=o)for(i=1;i<=o;i++){var t=window.location.pathname;$(".pagearl").append($('<a href="'+t+"?halaman="+i+'" class="buttonar n'+i+'"> '+i+" </a>"))}else $(".pagearl").hide();void 0==halaman&&$(".buttonar.n1").toggleClass("arlinapage"),halaman==halaman&&$(".buttonar.n"+halaman).toggleClass("arlinapage")});

//]]>

</script>

</b:if>

➤Щракнете върху бутона Запазване на темата.
➤Следващият код добавете в редактора на самата публикация, в нейното начало, но в HTML режим.

<div class="post-content content_1">

СЪДЪРЖАНИЕ НА СТАТИЯТА ТУК

</div>

<div class="post-content content_2">

СЪДЪРЖАНИЕ НА СТАТИЯТА ТУК

</div>

<div class="post-content content_3">

СЪДЪРЖАНИЕ НА СТАТИЯТА ТУК

</div>

<div class="post-content content_4">

СЪДЪРЖАНИЕ НА СТАТИЯТА ТУК

</div>

<div class="post-content content_5">

СЪДЪРЖАНИЕ НА СТАТИЯТА ТУК

</div>

➤След това добавете и навигационния код най-долу, в края на публикацията.

<div class="arlinapage">

</div>

<div class="pagearl">

</div>

➤Ако искате навигацията автоматично да се показва във всяка ваша публикация, може да добавите този код под реда <data: post.body /> :

<div class='arlinapage'/>

<div class='pagearl'/>

➤Завършете, като запаметите промените и вижте резултатите във вашия блог.


Резултат

• Заменете CSS кода с този, ако искате навигацията да бъде с минималистичен вид

<style type='text/css'>

/* Membagi Halaman di Postingan */

.post-content,.pagearl br{display:none}.arlinapage{text-align:center;margin:30px auto 0 auto;border-top:1px solid rgba(0,0,0,0.1)}.pagearl{position:relative;background:#fff;margin:0 auto 20px auto;text-align:center;padding:20px;font-size:14px}.pagearl .buttonar{background:#26C6DA;font-weight:bold;display:inline-block;color:#fff;text-decoration:none;text-align:center;border-right:0;font-size:14px;padding:.4rem .8rem;border:0;margin:0 4px 0 0;border-radius:3px;transition:all .2s}.pagearl .buttonar:hover,.pagearl .buttonar:active{background:#c0392b;color:#fff}.buttonar.arlinapage,.buttonar.arlinapage:hover{background:#333;color:#fff}

</style>

Резултат

• Или го заменете с този CSS код, ако искате да добавите към навигацията анимацията Gradient

<style type='text/css'>

/* Membagi Halaman di Postingan */

@keyframes Gradients{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

.post-content,.pagearl br{display:none}.arlinapage{text-align:center;margin:30px auto 0 auto;border-top:1px solid rgba(0,0,0,0.1)}.pagearl{background:#517aef;background:linear-gradient(-45deg,#EE7752,#E73C7E,#23A6D5,#23D5AB);background-size:400% 400%;margin:30px auto;text-align:center;padding:10px;border-radius:3px;overflow:hidden;box-shadow:0 10px 10px -5px rgba(0,0,0,0.15);animation:Gradients 15s ease infinite}.pagearl .buttonar{background:rgba(255,255,255,.2);font-weight:bold;display:inline-block;color:#fff;text-decoration:none;text-align:center;border-right:0;font-size:14px;padding:.4rem .8rem;border:0;margin:0 5px 0 0;border-radius:3px;box-shadow:0 1px 5px rgba(0,0,0,0.1);transition:all .6s}.pagearl .buttonar:hover,.pagearl .buttonar:active{background:rgba(255,255,255,.45);color:#fff;box-shadow:0 1px 10px rgba(0,0,0,0.1)}.buttonar.arlinapage,.buttonar.arlinapage:hover{background:rgba(255,255,255,.95);color:#0984e3}

</style>

Резултат
Това е. Научихте как да разделите на отделни страници с навигационни номера публикация с дълъг текст.
Дано е полезно за вас и вашите приятели.

За въпроси моля, в коментарите. А може и на тази страница. Ще съм благодарна да оцените моя труд. Моля, гласувайте за блога ми на:


Здраве за всички вас! Не забравяйте да правите добро на други хора!