Split page in post With Navigation Number in blogger.
How to add Split Pages in Posts by Navigation Number with Gradient Colour(New Version)
Some time ago I shared a post about How to Add Checkmark in Blogger post Title? and in this post, BPF will share tips on how to Split Pages in Posts with Navigation Numbers.
#Whar is Split Page in Post with Navigation Number?
Maybe you have visited a news site or comic reading site where the contents of each post are divided into several pages, usually, in these posts, there is a Next button which when we press the button will lead to the next page. Likewise, with the tips that I will provide, the way it works is to divide a few paragraphs from the post content into sections according to your friend's wishes.
#Advantage of the Split page in the post by Navigation Number
Some of the benefits that you can get if you apply these tips include:
- The page will feel tidier, suitable for friends who have articles with 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 to 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 to their blog, please follow the steps below.
Split Pages in Posts by Navigation Number
As usual, open the Blogger page》 Click the Themes and Backup》than click the Edit HTML button > Add below CSS code before</head>
<b:if cond='data:view.isSingleItem'>
<style>
/* 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>
<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>
Then click the Save theme button .
Then for the caller code, please open the post editor and add the following markup on the HTML tab (Not Compose)
<div class="post-content content_1">
ISI ARTIKEL DI SINI
</div>
<div class="post-content content_2">
ISI ARTIKEL DI SINI
</div>
<div class="post-content content_3">
ISI ARTIKEL DI SINI
</div>
<div class="post-content content_4">
ISI ARTIKEL DI SINI
</div>
<div class="post-content content_5">
ISI ARTIKEL DI SINI
</div>
To CONTENTS ARTICLES HERE replaced with the content of posts and to content_1 until content_5 signifies the number of navigation from posting content that you want to share. To add the pages you want to split, simply change the numbers from content_5 to content_6 and so on.
Examples like this:
<div class="post-content content_4">
ISI ARTIKEL DI SINI
</div>
<div class="post-content content_5">
ISI ARTIKEL DI SINI
</div>
<div class="post-content content_6">
ISI ARTIKEL DI SINI
</div>
<div class="post-content content_7">
ISI ARTIKEL DI SINI
</div>
<div class="post-content content_8">
ISI ARTIKEL DI SINI
</div>
Then add the navigation code below at the end of the post.
<div class="arlinapage">
</div>
<div class="pagearl">
</div>
But if my friend wants to bring up the navigation code in each post automatically, try adding the code above below the code <data:post.body/>(Post body specifically for posting pages).
<data:post.body/>
<div class='arlinapage'/>
<div class='pagearl'/>
Finish and see the results on your blog.
Replace the CSS code if you want to add it with a minimalist look
# Minimalist Look
<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:#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>
Then save it and see Result.
Or replace it with this CSS code if you want to add it with a Gradient animation display
#Gradient Animation
<style>
/* 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>
Save it and see Result.
Related Posts
》Recommended Slide Box Widget on Blogger.
》Gradient Newsletter Widget on Blogger in 2020.
》How to install Go up and Down botton in Blogger?
》How to Add Sitemap page on Blogger.
Okay, that's all from Blog Plugin free on how to add Split Pages in Posts with Navigation Numbers . Hopefully this is useful for my friend. If any problem with this code please contact us or comment
Thanks.
