Tutorial Stats
How to Create Blog Pagination for Your Weebly Blog Pages
Tutorial Description
Blog pagination is a numbered navigation that appears at the bottom of a blog page.
The purpose of blog pagination is to allow more efficient navigation between blog pages. Instead of only being able to move from page 1 to page 2 in a single click, you can instead move from page 1 to page 3, or even the last page, in a single click.
Weebly's currently pagination setup on their blog pages is stale, to say the last. It consists of a simple "<<Forward" and "Previous>>" pagination, which don't even appear on the correct side of the blog.
An example for how the blog pagination in this tutorial works: if you're on page 3 of your blog, at the bottom of this page, your blog pagination will consist of, from left to right, "First Previous 1 2 3 4 5 Next Last".
At the moment, the blog pagination in this tutorial will not work for "category" or "archive" blog pages, but will instead simply show "Previous" and "Next".
The blog pagination in this tutorial will not show within the Weebly editor. Once this blog pagination is installed, in the Weebly editor, the blog pagination will simply show as "Previous" and "Next".
Blog pagination is typically a website function reserved for back-end script codes, such as PHP. Since Weebly does not currently allow its users access to the back-end of the website, the blog pagination in this tutorial uses a front-end script code known as jQuery.
Since the blog pagination in this tutorial is using jQuery, every time your page is loaded, the jQuery will scan your entire blog to determine how many pages it has. This means that if you have a lot of blog pages, there could be a bit of a delay (i.e., less than a second -- barely noticeable) before the "Last" component of the pagination is operable since the jQuery is scanning all of the pages.
The blog pagination will automatically detect if a blog page is being viewed, and if so, it'll grab the URL of the page, scan the total blog pages, and then display itself. This means the blog pagination will work on all of your Weebly blog pages automatically. The codes below only need to be added to a site once.
Enjoy!
The purpose of blog pagination is to allow more efficient navigation between blog pages. Instead of only being able to move from page 1 to page 2 in a single click, you can instead move from page 1 to page 3, or even the last page, in a single click.
Weebly's currently pagination setup on their blog pages is stale, to say the last. It consists of a simple "<<Forward" and "Previous>>" pagination, which don't even appear on the correct side of the blog.
An example for how the blog pagination in this tutorial works: if you're on page 3 of your blog, at the bottom of this page, your blog pagination will consist of, from left to right, "First Previous 1 2 3 4 5 Next Last".
At the moment, the blog pagination in this tutorial will not work for "category" or "archive" blog pages, but will instead simply show "Previous" and "Next".
The blog pagination in this tutorial will not show within the Weebly editor. Once this blog pagination is installed, in the Weebly editor, the blog pagination will simply show as "Previous" and "Next".
Blog pagination is typically a website function reserved for back-end script codes, such as PHP. Since Weebly does not currently allow its users access to the back-end of the website, the blog pagination in this tutorial uses a front-end script code known as jQuery.
Since the blog pagination in this tutorial is using jQuery, every time your page is loaded, the jQuery will scan your entire blog to determine how many pages it has. This means that if you have a lot of blog pages, there could be a bit of a delay (i.e., less than a second -- barely noticeable) before the "Last" component of the pagination is operable since the jQuery is scanning all of the pages.
The blog pagination will automatically detect if a blog page is being viewed, and if so, it'll grab the URL of the page, scan the total blog pages, and then display itself. This means the blog pagination will work on all of your Weebly blog pages automatically. The codes below only need to be added to a site once.
Enjoy!
SHOW MORE
Tutorial
Step 1. Open Weebly's HTML/CSS Editor
At the top, click on 'Theme', and on the bottom-left, click on 'Edit HTML/CSS'.
Step 2. Replace HTML Code
On the left under "Partials", click on "blog>pagination.tpl". On the right, delete all of the codes within this file.
Copy the HTML codes below and paste them into the "pagination.tpl" file:
{{!
In the blog post list, the area with "previous" and "next" links that enable
the user to navigate to forward/backward in the list.
}}
<div class="pagination">
<a class="page firstPage">First</a>
{{#next_url}}
<div class="blog-page-nav-next">
<a href="{{next_url}}" class="blog-link">Previous</a>
</div>
{{/next_url}}
<a class="page previousPagePlus"></a>
<a class="page previousPage"></a>
<a class="page currentPage"></a>
<a class="page nextPage"></a>
<a class="page nextPagePlus"></a>
{{#previous_url}}
<div class="blog-page-nav-previous">
<a href="{{previous_url}}" class="blog-link">Next</a>
</div>
{{/previous_url}}
<a class="page lastPage">Last</a>
</div>
Copy the HTML codes below and paste them into the "pagination.tpl" file:
{{!
In the blog post list, the area with "previous" and "next" links that enable
the user to navigate to forward/backward in the list.
}}
<div class="pagination">
<a class="page firstPage">First</a>
{{#next_url}}
<div class="blog-page-nav-next">
<a href="{{next_url}}" class="blog-link">Previous</a>
</div>
{{/next_url}}
<a class="page previousPagePlus"></a>
<a class="page previousPage"></a>
<a class="page currentPage"></a>
<a class="page nextPage"></a>
<a class="page nextPagePlus"></a>
{{#previous_url}}
<div class="blog-page-nav-previous">
<a href="{{previous_url}}" class="blog-link">Next</a>
</div>
{{/previous_url}}
<a class="page lastPage">Last</a>
</div>
Step 3. Add CSS codes
On the left under "STYLES", click on "main.less". On the right, scroll down and locate your blog's CSS codes. Copy the CSS codes below and add them directly beneath your blog's CSS codes in the "main.less" file:
/* Blog Pagination */
.pagination {
justify-content:center;
display:flex;
flex-wrap:wrap;
width: 100%;
}
.pagination a {
display: none;
color: #00aeff;
padding: 5px 10px;
box-sizing: border-box;
margin-bottom: 5px;
margin: 0 5px;
border-radius: 3px;
}
.pagination a.currentPage,
.pagination a:hover {
background: #00aeff;
color: #ffffff;
}
.wsite-blog-post .pagination,
#icontent .page {
display:none;
}
#icontent .blog-page-nav-next a,
#icontent .blog-page-nav-previous a,
.blog-page-nav-next a.show,
.blog-page-nav-previous a.show {
display: block;
}
/* Blog Pagination */
.pagination {
justify-content:center;
display:flex;
flex-wrap:wrap;
width: 100%;
}
.pagination a {
display: none;
color: #00aeff;
padding: 5px 10px;
box-sizing: border-box;
margin-bottom: 5px;
margin: 0 5px;
border-radius: 3px;
}
.pagination a.currentPage,
.pagination a:hover {
background: #00aeff;
color: #ffffff;
}
.wsite-blog-post .pagination,
#icontent .page {
display:none;
}
#icontent .blog-page-nav-next a,
#icontent .blog-page-nav-previous a,
.blog-page-nav-next a.show,
.blog-page-nav-previous a.show {
display: block;
}
Step 4. Add jQuery Codes
On the left under "ASSETS", click on the "custom.js" file. On the right, add the below jQuery code directly beneath "jQuery(function($) {":
// Blog Pagination
var url = window.location.href;
var urlSplit = url.split('/').slice(0,4).join('/');
var indexCheck = $(".wsite-blog-index").length;
if (indexCheck == 1) {
if (url.indexOf("category") < 0 && url.indexOf("archives") < 0) {
$(".pagination a").css("display", "flex");
// "First" page
$(".firstPage").attr("href", urlSplit);
// Current Page
$(".currentPage").attr("href", url);
if (url.indexOf("previous") < 0) {
$(".currentPage").text("1");
$(".previousPage, .previousPagePlus, .firstPage").hide();
} else {
var currentPageNumber = (url.split("/")[5]);
$(".currentPage").text(currentPageNumber);
}
// Next Page
var nextPageCheck = $(".blog-page-nav-previous a").length;
if (nextPageCheck == 1) {
var nextPage = $(".blog-page-nav-previous a").attr('href');
$(".nextPage").attr("href", nextPage);
var nextPageNumber = (nextPage.split("/")[3]);
$(".nextPage").text(nextPageNumber);
} else {
$(".nextPage, .lastPage").hide();
}
// Next Page Plus
$.get(nextPage, function(data){
var nextPagePlusCheck = $(data).find(".blog-page-nav-previous a").length;
if (nextPagePlusCheck == 1) {
var nextPagePlus = $(data).find(".blog-page-nav-previous a").attr('href');
$(".nextPagePlus").attr("href", nextPagePlus);
var nextPagePlusNumber = (nextPagePlus.split("/")[3]);
$(".nextPagePlus").text(nextPagePlusNumber);
} else {
$(".nextPagePlus").hide();
}
});
// Previous Page
var previousPageCheck = $(".blog-page-nav-next a").length;
if (previousPageCheck == 1) {
var previousPage = $(".blog-page-nav-next a").attr('href');
$(".previousPage").attr("href", previousPage);
var previousPageNumber = (previousPage.split("/")[3]);
$(".previousPage").text(previousPageNumber);
if (previousPage.indexOf("previous") < 0) {
$(".previousPage").text("1");
$(".previousPagePlus").hide();
}
}
// Previous Page Plus
$.get(previousPage, function(data){
var previousPagePlusCheck = $(data).find(".blog-page-nav-next a").length;
if (previousPagePlusCheck == 1) {
var previousPagePlus = $(data).find(".blog-page-nav-next a").attr('href');
$(".previousPagePlus").attr("href", previousPagePlus);
var previousPagePlusNumber = (previousPagePlus.split("/")[3]);
$(".previousPagePlus").text(previousPagePlusNumber);
if (previousPagePlus.indexOf("previous") < 0) {
$(".previousPagePlus").text("1");
}
}
});
}
else {
$(".blog-page-nav-next a, .blog-page-nav-previous a").addClass("show");
}
}
// Total Blog Page Counter
$.get(urlSplit, function(data) {
var a = $(data).find(".blog-page-nav-previous").length;
var b = $(data).find(".blog-page-nav-previous a").attr("href");
function getMore() {
if (a == 1) {
$.get(b, function(data) {
var c = $(data).find(".blog-page-nav-previous a").length;
var d = $(data).find(".blog-page-nav-previous a").attr("href");
if (a == c) {
b = d;
getMore();
}
else {
var e = b.split("/")[3];
$(".totalPages").append(e);
// Last Page pagination
var indexCheck = $(".wsite-page-index.wsite-blog-index").length;
if (indexCheck == 1) {
var nextPageCheck = $(".blog-page-nav-previous a").length;
if (nextPageCheck == 1) {
var urlSplitMore = url.split('/').slice(0,3).join('/');
var nextPage = $(".blog-page-nav-previous a").attr("href");
var nextPageStrip = nextPage.split('/').slice(0,2).join('/');
var lastPage = urlSplitMore + nextPageStrip + "/previous/" + e;
$(".lastPage").attr("href", lastPage);
}
}
else {
var lastPage = urlSplit + "/previous/" + e;
$(".lastPage").attr("href", lastPage);
}
}
});
}
else if (a != 1) {
$(".totalPages").append(1);
}
}
getMore();
});
Click "SAVE".
// Blog Pagination
var url = window.location.href;
var urlSplit = url.split('/').slice(0,4).join('/');
var indexCheck = $(".wsite-blog-index").length;
if (indexCheck == 1) {
if (url.indexOf("category") < 0 && url.indexOf("archives") < 0) {
$(".pagination a").css("display", "flex");
// "First" page
$(".firstPage").attr("href", urlSplit);
// Current Page
$(".currentPage").attr("href", url);
if (url.indexOf("previous") < 0) {
$(".currentPage").text("1");
$(".previousPage, .previousPagePlus, .firstPage").hide();
} else {
var currentPageNumber = (url.split("/")[5]);
$(".currentPage").text(currentPageNumber);
}
// Next Page
var nextPageCheck = $(".blog-page-nav-previous a").length;
if (nextPageCheck == 1) {
var nextPage = $(".blog-page-nav-previous a").attr('href');
$(".nextPage").attr("href", nextPage);
var nextPageNumber = (nextPage.split("/")[3]);
$(".nextPage").text(nextPageNumber);
} else {
$(".nextPage, .lastPage").hide();
}
// Next Page Plus
$.get(nextPage, function(data){
var nextPagePlusCheck = $(data).find(".blog-page-nav-previous a").length;
if (nextPagePlusCheck == 1) {
var nextPagePlus = $(data).find(".blog-page-nav-previous a").attr('href');
$(".nextPagePlus").attr("href", nextPagePlus);
var nextPagePlusNumber = (nextPagePlus.split("/")[3]);
$(".nextPagePlus").text(nextPagePlusNumber);
} else {
$(".nextPagePlus").hide();
}
});
// Previous Page
var previousPageCheck = $(".blog-page-nav-next a").length;
if (previousPageCheck == 1) {
var previousPage = $(".blog-page-nav-next a").attr('href');
$(".previousPage").attr("href", previousPage);
var previousPageNumber = (previousPage.split("/")[3]);
$(".previousPage").text(previousPageNumber);
if (previousPage.indexOf("previous") < 0) {
$(".previousPage").text("1");
$(".previousPagePlus").hide();
}
}
// Previous Page Plus
$.get(previousPage, function(data){
var previousPagePlusCheck = $(data).find(".blog-page-nav-next a").length;
if (previousPagePlusCheck == 1) {
var previousPagePlus = $(data).find(".blog-page-nav-next a").attr('href');
$(".previousPagePlus").attr("href", previousPagePlus);
var previousPagePlusNumber = (previousPagePlus.split("/")[3]);
$(".previousPagePlus").text(previousPagePlusNumber);
if (previousPagePlus.indexOf("previous") < 0) {
$(".previousPagePlus").text("1");
}
}
});
}
else {
$(".blog-page-nav-next a, .blog-page-nav-previous a").addClass("show");
}
}
// Total Blog Page Counter
$.get(urlSplit, function(data) {
var a = $(data).find(".blog-page-nav-previous").length;
var b = $(data).find(".blog-page-nav-previous a").attr("href");
function getMore() {
if (a == 1) {
$.get(b, function(data) {
var c = $(data).find(".blog-page-nav-previous a").length;
var d = $(data).find(".blog-page-nav-previous a").attr("href");
if (a == c) {
b = d;
getMore();
}
else {
var e = b.split("/")[3];
$(".totalPages").append(e);
// Last Page pagination
var indexCheck = $(".wsite-page-index.wsite-blog-index").length;
if (indexCheck == 1) {
var nextPageCheck = $(".blog-page-nav-previous a").length;
if (nextPageCheck == 1) {
var urlSplitMore = url.split('/').slice(0,3).join('/');
var nextPage = $(".blog-page-nav-previous a").attr("href");
var nextPageStrip = nextPage.split('/').slice(0,2).join('/');
var lastPage = urlSplitMore + nextPageStrip + "/previous/" + e;
$(".lastPage").attr("href", lastPage);
}
}
else {
var lastPage = urlSplit + "/previous/" + e;
$(".lastPage").attr("href", lastPage);
}
}
});
}
else if (a != 1) {
$(".totalPages").append(1);
}
}
getMore();
});
Click "SAVE".
You're done! Publish your site to see your blog's new numbered pagination!
Tips & Additional Information
If the blog pagination doesn't work after installing the codes from this tutorial and publishing your site, simply clear your browser's cache and it should then work.
Need Help Installing This Tutorial?
Editor Tricks Web Design Services
Open
· Closes 5 PM
Closed
· Opens 7 AM
Recent Tutorial Comments
