Pagination Plugin - How to Create Custom Styled Page navigation on Blogger

Enhance your Blogger Site Navigation - How to Create Adaptive Page Navigation for Blogger with Custom Styling

In any site, providing an intuitive page navigation system enhances the user experience and facilitates easy access to your content.

This guide will walk you through the process of implementing a customized page navigation system using HTML and JavaScript.

The provided code snippet creates a page navigation bar with a unique design that you can easily integrate into your Blogger template. It is also Adaptive to existing code on templates that uses "Show more" button infinite load.

What is Pagination?

Pagination is a web design technique used to break down a large amount of content into smaller, more manageable sections.

In the context of blogging, pagination is often employed to organize and navigate through multiple pages of blog posts.

Benefits of Pagination:

Improved User Experience:

Pagination makes it easier for readers to navigate through your blog, especially if you have a substantial number of posts. Users can quickly jump to specific pages, enhancing overall usability.

Faster Page Loading:

Loading a limited number of posts per page reduces the initial load time, providing a more responsive and faster experience for your audience.

Enhanced SEO:

Search engines appreciate well-organized content. Paginated content allows search engines to index and rank your pages more effectively, potentially improving your blog's visibility in search results.

How to Implement Pagination in Blogger:

To implement pagination in your Blogger blog, follow these steps:

Copy the CSS Styling:

Replace your existing CSS styling with the provided styles. Adjust the styles as needed to match your blog's design.

<style type="text/css">.showpageArea a{text-decoration:underline}.showpageNum a{text-decoration:none;border:1px solid #7AA1C3;margin:0 3px;padding:3px}.showpageNum a:hover{border:1px solid #7AA1C3;background-color:#F6F6F6}.showpagePoint{color:#333;text-decoration:none;border:1px solid #7AA1C3;background:#F6F6F6;margin:0 3px;padding:3px}.showpageOf{text-decoration:none;padding:3px;margin:0 3px 0 0}.showpage a{text-decoration:none;border:1px solid #7AA1C3;padding:3px}.showpage a:hover{text-decoration:none}.showpageNum a:link,.showpage a:link{text-decoration:none;color:#7AA1C3}</style>

Add JavaScript for Pagination:

Integrate the provided JavaScript code into your Blogger template. Ensure that you replace occurrences of ".space" with your top-level domain (TLD), such as ".com," ".info," ".biz," ".co," etc.

<script type="text/JavaScript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==".space/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

var pageCount = 2;
var displayPageNum = 5;
var upPageWord = 'Previous';
var downPageWord = 'Next';

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;

}

if(postNum==1) postNum++;
html += '</div>';

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

Fetch JSON Data:

Include the script tag that fetches JSON data and invokes the `showpageCount` function. This function generates the pagination based on the provided JSON data.

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ; type="text/javascript"></script>

You Can Simply Add as an HTML/JavaScript Gadget on Blogger Layout.

To add the pagination code as an HTML gadget in Blogger, follow these steps:

Access your Blogger Dashboard:

𖣘 Go to Blogger and log in to your account.

Navigate to Layout:

𖣘 In the Blogger Dashboard, select the blog you want to add pagination to.

𖣘 Go to the "Layout" section.

Add a Gadget:

𖣘 Find the area where you want to place the pagination (e.g., sidebar or footer).

𖣘 Click on the "+ Add a Gadget" link in that area.

Choose HTML/JavaScript Gadget:

𖣘 In the gadget selection window, find and click on "HTML/JavaScript."

Paste the Code:

𖣘 In the content box that appears, paste the entire pagination code into the provided space.

  <style type="text/CSS">

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #7AA1C3;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #7AA1C3;
background-color:#F6F6F6;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #7AA1C3;
background: #F6F6F6;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #7AA1C3;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#7AA1C3;
}
</style>

<script type="text/JavaScript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==".space/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

var pageCount = 2;
var displayPageNum = 5;
var upPageWord = 'Previous';
var downPageWord = 'Next';

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;

}

if(postNum==1) postNum++;
html += '</div>';

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ; type="text/javascript"></script>

Save:

𖣘 Click the "Save" button to save your HTML gadget.

𖣘 Once you've added the gadget, you might need to also save the overall layout changes for your blog.

𖣘 Visit your blog to see the pagination in action.

Remember - Make sure the TLD in URL (.space) is Adjusted::

➪ Replace occurrences of ".space" in URL with your specific top-level domain (TLD).

➪ Replace with your specific TLD used to host your site, whether it's ".com," ".info," ".biz," ".co," or any other.

By adding the code as an HTML gadget, the pagination functionality should integrate seamlessly into your Blogger blog.

If your template already has a "Show More" button, don't worry; the provided pagination will seamlessly replace it. The transition will be smooth, and your readers will still be able to navigate through your content effortlessly.

Implementing pagination in your Blogger blog enhances navigation, offering a more user-friendly experience for your readers. Upgrade your blog's functionality and aesthetics with this simple yet effective pagination solution.

How this Code Works

This code is a combination of CSS and JavaScript that creates a pagination system for a blog. Let's break down the key components:

CSS:

☞︎︎︎ Defines styles for various elements related to pagination, such as underlining links, styling page numbers, hover effects, and more.

☞︎︎︎ Uses classes like `.showpageArea`, `.showpageNum`, `.showpagePoint`, and `.showpage` to style different parts of the pagination.

JavaScript:

☞︎︎︎ The `showpageCount` function is defined and is called when the JSON data (presumably from a blog feed) is loaded.

☞︎︎︎ Determines the current page based on the URL and extracts relevant information.

☞︎︎︎ Iterates through the blog posts and creates an array (`htmlMap`) containing links for each page.

☞︎︎︎ Dynamically generates HTML for pagination based on the current page, total number of posts, and specified page count and display page numbers.

☞︎︎︎ Injects the generated HTML into the document, creating a pagination bar.

Breaking down how the code works step by step:

Just check out the comments above the lines.

CSS Section:

/* Styles for various elements related to pagination */

.showpageArea a {

text-decoration: underline;

}

.showpageNum a {

text-decoration: none;

border: 1px solid #7AA1C3;

margin: 0 3px;

padding: 3px;

}

/* Styles for hover effect on page numbers */

.showpageNum a:hover {

border: 1px solid #7AA1C3;

background-color: #F6F6F6;

}

/* Styles for the current page */

.showpagePoint {

color: #333;

text-decoration: none;

border: 1px solid #7AA1C3;

background: #F6F6F6;

margin: 0 3px;

padding: 3px;

}

/* Styles for "Page" text */

.showpageOf {

text-decoration: none;

padding: 3px;

margin: 0 3px 0 0;

}

/* Styles for general page links */

.showpage a {

text-decoration: none;

border: 1px solid #7AA1C3;

padding: 3px;

}

/* Remove underline on hover for general page links */

.showpage a:hover {

text-decoration: none;

}

/* Styles for link color */

.showpageNum a:link,

.showpage a:link {

text-decoration: none;

color: #7AA1C3;

}

</style>

JavaScript Section:

// Function to handle pagination

function showpageCount(json) {

// Extract current URL and initialize variables

var thisUrl = location.href;

var htmlMap = new Array();

var isFirstPage = thisUrl.substring(thisUrl.length - 5, thisUrl.length) == ".space/";

var isLablePage = thisUrl.indexOf("/search/label/") != -1;

var isPage = thisUrl.indexOf("/search?updated") != -1;

var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/") + 14, thisUrl.length) : "";

thisLable = thisLable.indexOf("?") != -1 ? thisLable.substr(0, thisLable.indexOf("?")) : thisLable;

var thisNum = 1;

var postNum = 1;

var itemCount = 0;

var fFlag = 0;

var eFlag = 0;

var html = '';

var upPageHtml = '';

var downPageHtml = '';

// Pagination settings

var pageCount = 2;

var displayPageNum = 5;

var upPageWord = 'Previous';

var downPageWord = 'Next';

// HTML for label page

var labelHtml = '<a href="/search/label/' + thisLable + '?&max-results=' + pageCount + '">';

// Loop through each blog post in the JSON data

for (var i = 0, post; post = json.feed.entry[i]; i++) {

// Extract timestamp and title

var timestamp = post.published.$t.substr(0, 10);

var title = post.title.$t;

// Check if it's a labeled page

if (isLablePage) {

if (title != '') {

// Check if the post has the specified label

if (post.category) {

for (var c = 0, post_category; post_category = post.category[c]; c++) {

if (encodeURIComponent(post_category.term) == thisLable) {

if (itemCount == 0 || (itemCount % pageCount == (pageCount - 1))) {

// Check if the post is on the current page

if (thisUrl.indexOf(timestamp) != -1) {

thisNum = postNum;

}

postNum++;

// Store link for the page

htmlMap[htmlMap.length] = '/search/label/' + thisLable + '?updated-max=' + timestamp + 'T00%3A00%3A00%2B08%3A00&max-results=' + pageCount;

}

} // end if(post.category){

itemCount++;

}

} else {

if (title != '') {

if (itemCount == 0 || (itemCount % pageCount == (pageCount - 1))) {

if (thisUrl.indexOf(timestamp) != -1) {

thisNum = postNum;

}

if (title != '') postNum++;

// Store link for the page

htmlMap[htmlMap.length] = '/search?updated-max=' + timestamp + 'T00%3A00%3A00%2B08%3A00&max-results=' + pageCount;

}

itemCount++;

}

} // end for loop

// Generate HTML for pagination

for (var p = 0; p < htmlMap.length; p++) {

if (p >= (thisNum - displayPageNum - 1) && p < (thisNum + displayPageNum)) {

if (fFlag == 0 && p == thisNum - 2) {

if (thisNum == 2) {

if (isLablePage) {

upPageHtml = labelHtml + upPageWord + '</a>';

} else {

upPageHtml = '<a href="/">' + upPageWord + '</a>';

}

} else {

upPageHtml = '<a href="' + htmlMap[p] + '">' + upPageWord + '</a>';

}

fFlag++;

}

if (p == (thisNum - 1)) {

html += '' + thisNum + '';

} else {

if (p == 0) {

if (isLablePage) {

html = labelHtml + '1</a>';

} else {

html += '<a href="/">1</a>';

}

} else {

html += '<a href="' + htmlMap[p] + '">' + (p + 1) + '</a>';

}

if (eFlag == 0 && p == thisNum) {

downPageHtml = ' <a href="' + htmlMap[p] + '">' + downPageWord + '</a>';

eFlag++;

}

} // end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){

} // end for loop

// Handle the case when the current page is not the first page

if (thisNum > 1) {

if (!isLablePage

Overall:

⌨︎ This code essentially creates a customized pagination system for a blog, allowing users to navigate through pages of posts.

⌨︎ It dynamically generates links based on the blog's URL structure and the number of posts available.

⌨︎ The pagination includes "Previous" and "Next" links, along with page numbers, and adjusts based on the current page and total number of posts.

Note:
This script relies on the Blogger API to fetch post data in JSON format. Ensure that the API is accessible and returns the expected data for this script to work correctly.

By incorporating this customized page navigation into your Blogger template, you not only improve the user experience but also add a visually appealing element to your blog.

Feel free to tweak the CSS styles to match your blog's design, providing a seamless and engaging navigation experience for your readers.

Update:

I was scrolling around the web today and Stumbled upon some Styles for this script/plugin. Not yet Tested but I checked the class and ID and I'm sure it would work om most blogger blogs. ✅ The styles were sourced from blogger archive

You can add the style code in ]]></b:skin>

✔︎ Just head fo your Blogger blog "Template section"

✔︎ Click on "Edit HTML" press ctrl+f to search for "]]></b:skin>"

✔︎ You can paste Any of these CSS there

Note: Pick Only One. You can as well leave or remove the Css above ☝🏾☝🏾 from your template.

Style 1

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 12px;padding: 5px 12px;margin-right:5px; color: #222; background-color:#eee; border: 1px solid #EEEEEE;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#E5E5E5;text-decoration:none;color: #222;}


#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Style 2

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #AD0B00; background-color:#FAB001;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#DB4920;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Style 3

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #3E5801; background-color:#E0EDC1;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#FEF6DF;text-decoration:none;color: #E16800;}


#blog-pager .pagecurrent{font-weight:bold;color: #D25E71;background:#FFDEDF;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Style 4

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Style 5

#blog-pager{clear:both;margin:30px auto; padding: 7px; text-align:center;font-size: 11px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #292929));background-image: -o-linear-gradient(top, #000000 0%, #292929 100%);background-image: -moz-linear-gradient(top, #000000 0%, #292929 100%);background-image: -webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image: -ms-linear-gradient(top, #000000 0%, #292929 100%);background-image: linear-gradient(to top, #000000 0%, #292929 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 10px;margin-right:5px; color: #fff;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #59A2CF),color-stop(1, #D9EAFF));background-image: -o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration: none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}


.showpageOf{display:none!important}.blog-pager-older-link, .home-link, .blog-pager-newer-link {background: transparent;}
a.blog-pager-older-link, a.home-link, a.blog-pager-newer-link {color: #fff;}
#blog-pager .pages{border:none;background: none;}

Style 6

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#EC8D04;text-decoration:none;color: #fff;}


#blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}

Style 7

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid #E9E9E9;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#CECECE;text-decoration:none;color: #000;}
 .showpageOf{display:none!important}
#blog-pager .showpage, #blog-pager .pagecurrent{font-weight:bold;color: #888;}
 #blog-pager .pages{border:none;}

Pagination Plugin - How to Create Custom Styled Page navigation on Blogger

What is Pagination?

Benefits of Pagination:

Improved User Experience:

Faster Page Loading:

Enhanced SEO:

How to Implement Pagination in Blogger:

Copy the CSS Styling:

Add JavaScript for Pagination:

Fetch JSON Data:

You Can Simply Add as an HTML/JavaScript Gadget on Blogger Layout.

Access your Blogger Dashboard:

Navigate to Layout:

Add a Gadget:

Choose HTML/JavaScript Gadget:

Paste the Code:

Save:

Remember - Make sure the TLD in URL (.space) is Adjusted::

How this Code Works

CSS:

JavaScript:

Breaking down how the code works step by step:

CSS Section:

JavaScript Section:

Overall:

Update:

Style 1

Style 2

Style 3

Style 4

Style 5

Style 6

Style 7

Generate Link

Additional Widgets

Explore: Navigation

Pagination Plugin - How to Create Custom Styled Page navigation on Blogger

What is Pagination?

Benefits of Pagination:

Improved User Experience:

Faster Page Loading:

Enhanced SEO:

How to Implement Pagination in Blogger:

Copy the CSS Styling:

Add JavaScript for Pagination:

Fetch JSON Data:

You Can Simply Add as an HTML/JavaScript Gadget on Blogger Layout.

Access your Blogger Dashboard:

Navigate to Layout:

Add a Gadget:

Choose HTML/JavaScript Gadget:

Paste the Code:

Save:

Remember - Make sure the TLD in URL (.space) is Adjusted::

How this Code Works

CSS:

JavaScript:

Breaking down how the code works step by step:

CSS Section:

JavaScript Section:

Overall:

Update:

Style 1

Style 2

Style 3

Style 4

Style 5

Style 6

Style 7

Generate Link

Additional Widgets

S David Prince

Explore: Navigation