How to Divide Pages in Writing with Navigation Numbers

How to Divide Pages in Writing with Navigation Numbers - Maybe you have visited a news site or comic reading site, which in each post is divided into several pages, usually in the post there is a Next button which when we press the button will lead to the next page. Likewise with the tips that I will give this, the way it works is to divide a number of paragraphs from the contents of the post into sections according to your wishes.

As for some benefits that can be obtained if applying these tips include:

• The page will feel neater suitable for friends who have articles with a long content and save space so that visitors are not tired of scrolling the page.
• Suitable for news sites and comic reading sites.
• Can be used as a marker for visitors on which page will continue reading later.
• Increase the number of Pageviews because there is a page refresh function when pressing the navigation button to the next page.

Well, for those of you who want to add this method on their blog, please follow the steps below.

How to Divide Pages in Writing with Navigation Numbers

As usual, open the Blogger page >> Click the Themes menu and click the Edit HTML button >> Add this CSS code before </head>

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<style type='text/css'>
/* Divide the page in the post */
.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>

Add the following code before </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>

Then click the Save theme button.

Next to the code to call it, please open the post editor and add the following markup on the HTML tab (Not Compose).

<div class="post-content content_1">
CONTENTS THE ARTICLE HERE</div>
<div class="post-content content_2">
CONTENTS THE ARTICLE HERE</div>
<div class="post-content content_3">
CONTENTS THE ARTICLE HERE</div>
<div class="post-content content_4">
CONTENTS THE ARTICLE HERE</div>
<div class="post-content content_5">
CONTENTS THE ARTICLE HERE</div>

For "CONTENTS THE ARTICLE HERE" replaced with the contents of the post content and for content_1 until content_5 indicates the navigation number of the contents of the post you want to share. To add a page that you want to share, just change the number from content_5 to content_6 and so on.

Examples like this :

<div class="post-content content_4">
CONTENTS THE ARTICLE HERE</div>
<div class="post-content content_5">
CONTENTS THE ARTICLE HERE</div>
<div class="post-content content_6">
CONTENTS THE ARTICLE HERE</div>
<div class="post-content content_7">
CONTENTS THE ARTICLE HERE</div>
<div class="post-content content_8">
CONTENTS THE ARTICLE HERE</div>

Then add the navigation code below at the end of the post

<div class="arlinapage">
</div>
<div class="pagearl">
</div>

But if you want to bring up the navigation code in each post automatically, you can add the above code under the code <data:post.body/> (Post body specifically for posting pages). Examples of its application are like this:

<data:post.body/>
<div class='arlinapage'/>
<div class='pagearl'/>

Finish and see the results on your blog.

How, it's not easy !! That's the tips that I share this time about How to Divide Pages in Writing with Navigation Numbers. Hopefully with what I have shared, it can be useful for you. Good luck.

Source: https://www.arlinadzgn.com/2018/12/membagi.halaman.di.postingan.dengan.nomor.navigasi.html

Share :