Welcome to your Droidnur blog Some time ago I shared a post about "how to divide article content into multiple pages with a slide effect and in this post", Droidnur will share tips on "how to divide pages in posts with navigation numbers".
What is Pagination?
Maybe my best friend has visited a news site or comic reading site where each post content is divided into several pages, generally, in the post,, there is a Next button which when we press the button will lead to the next page. Moreover, with the tips that I will give, the way it works is to divide several paragraphs of the content of the post into several parts according to your wishes.
benefits Pagination by Number?
Some of the benefits that can be gotten if applying these tips include:
- The page will feel neater, suitable for friends who have articles with long content, and save space so that visitors don't get tired of scrolling
- 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 are interested to add this method to their blog, please follow carefully the steps below.
How to add Pagination by Number?
As usual , First go to Blogger page > Then Click Theme menu and click Edit HTML button next to customize> Add this CSS code before</head> tag
<b:if cond='data:view.isSingleItem'>
<style>
/* Sharing Pages in Posts by Droidnur */
.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>After that Add the following code before </body> tag
<b:if cond='data:view.isSingleItem'>
<script>
//<![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>Make sure you need to click the save theme button.
Next for the calling code, please open the post editor and add the following markup on the HTML mode (Not Compose)
<div class="post-content content_1">
ARTICLE CONTENTS HERE
</div>
<div class="post-content content_2">
ARTICLE CONTENTS HERE
</div>
<div class="post-content content_3">
ARTICLE CONTENTS HERE
</div>
<div class="post-content content_4">
ARTICLE CONTENTS HERE
</div>
<div class="post-content content_5">
ARTICLE CONTENTS HERE
</div>For ARTICLE CONTENT HERE, it is replaced with the content of the post and for content_1 to content_5, it indicates the navigation number of the post content that you want to share. To add the page you want to split, simply change the number from content_5 to content_6 and so on.
Examples look like this:
<div class="post-content content_4">
ARTICLE CONTENTS HERE
</div>
<div class="post-content content_5">
ARTICLE CONTENTS HERE
</div>
<div class="post-content content_6">
ARTICLE CONTENTS HERE
</div>
<div class="post-content content_7">
ARTICLE CONTENTS HERE
</div>
<div class="post-content content_8">
ARTICLE CONTENTS HERE
</div>Then add the navigation code below at the end of the post.
<div class="arlinapage">
</div>
<div class="pagearl">
</div>However, if you want to automatically display the navigation code in each and every post, you can add the code above below the code <data:post.body/>(Post body specifically for posting pages). An example of its implementation is like bellow :
<data:post.body/>
<div class='arlinapage'/>
<div class='pagearl'/>Done and You can see the results on your blog.
Demo
Below is just an example of the button only
Demo
Change the CSS code if you want to add it with a minimalist beautiful look
<style type='text/css'>
/* Sharing Pages in Posts by Droidnur */
.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:#e74c3c;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>Demo
Or replace it with this CSS code if you want to add it with a beautiful Gradient animation view
<style>
/* Sharing Pages in Posts by Droidnur */
@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>
Okay, that's all from Droidnur on "how to Divide Pages in Posts by Navigation Number". Hopefully useful for friends and helpful.
Source: https://www.idblanter.com/2017/12/buat-pagination-di-postingan-blog.html