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.
Access your Blogger Dashboard:
Navigate to Layout:
Add a Gadget:
Choose HTML/JavaScript Gadget:
Paste the Code:
<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:
Remember - Make sure the TLD in URL (.space) is Adjusted::
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:
CSS Section:
<style type="text/CSS">
/* 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:
<script type="text/JavaScript">
// 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 = '<span class="showpageNum"><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></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 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.{alertSuccess}
.png)
Posts
0 Comments