Mac SEO Blog

EverWeb 3.0 introduced some great new features such as Asset List Organization and a new database backend to the Contact Form Advanced widget so that you can keep your email respondents details all in one place. EverWeb’s blogging feature also gained a couple of new features such as Blog Pagination which we take a deep dive look at in this post…

Blog Index Pagination Options

The new blog pagination feature lets you set how many blog posts per page you want to see on the blog main (or archive) page. Fully customizable buttons will take you to the previous and next page of posts or to the first and last pages in the pagination.

Setting Up The Blog Index Pagination

In the following example, I am going to set up a blog pagination using a blog that contains 35 posts. I am going to set up my pagination on the blog main page as follows:

1. First select the blog main page in the Web Page List of the website project.
2. Click on the blog main widget. This is the list of blog posts that you see displayed in the Editor Window.
3. The Widget Settings tab for the blog main widget will be displayed in the Inspector Window. The first option to look at is the ‘Total Number of Posts’ option. This sets the number of blog posts, out of the total of 35, that I want to see displayed. For example I may only want to display the most recent 25 blog posts only, so I set the value at 25. The Editor Window will update accordingly so only the 25 most recent posts are visible.
4. Next move down to the Pagination Options section and click on the ‘Show Pagination Buttons’ checkbox. The Pagination Options become available.
5. At the bottom of the blog main widget, the pagination buttons display. When the website is published, the following buttons will become available: The ‘<<‘ arrow takes the visitor to the first page in the pagination whilst the ‘>>’ to goes to the last page. The ‘<‘ button goes back one page from the current page with the ‘>’button advances one page forward from the current page. To go to a specific page, the visitor can click on the page number button of their choice.
6. I can now select how many of the posts from the 25 ‘Display Posts’ I have to see at one time. For example I may only want to have 5 posts displayed at a time. Therefore, I set the ‘Posts Per Page’ option to 5.
7. The Editor Window will update so that I now only see 5 posts per page. As I have 25 posts that I want to display, the pagination buttons update to show numbered buttons 1, 2, 3, 4 and 5.

Styling The Blog Pagination Buttons

Now you can style the pagination buttons using the Pagination Options section:

• Background Color: Sets the background color of the buttons that can currently be clicked upon, except for the current page.
• Mouse Over Background: The color used when you mouseover a button.
• Selected Background: This is the color used for the currently selected page.
• Disabled Background: This is the color used for buttons that are cannot be currently selected. For example, if you are currently on page one of the pagination, the previous page and first page pagination buttons will not be available for use.

You can adjust the look of the pagination buttons using the ‘Border Radius’ option. To make the button rectangular set the ‘Border Radius’ to zero. To make the button appear elliptical, set the value to the maximum of 50

To change the font and font size and style of the pagination buttons, double click on the pagination buttons in the Editor Window. The whole row will become highlighted. Next, click on the Fonts button in the Toolbar and change the font and font size as you want using the Fonts Panel options.

Preview your blog and try out the buttons before you publish!

Video Walkthrough

You can also watch our video walkthrough: Blog Pagination in EverWeb.

If you have any questions or comments about this blog, please let us know in the Comments Section. Thanks!

EverWeb on Social Media

You can also find EverWeb on the following social media platforms:

Facebook

Flipboard

YouTube

Twitter

Instagram