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

Публикация  с навигационни номера
Здравейте, всички! Обещах ви тази публикация и вероятно я очаквате. Ако сте посещавали новинарски блог, кулинарен блог или блог за четене, сте срещнали публикация, разделена на няколко страници. Обикновено в публикацията има бутон 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>



    Резултат

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

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

    BGtop

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