Pagination is extremely helpful for websites having continues pages like online stores. Though you may have to manually edit each pagination for specific pages, the output is worth the effort. Not only that it gives an easy navigation to your pages but it also guides your visitors as their scan your website's contents.
1. Since this is a pagination, you may have to insert the code in the <head> that affects the whole site. Please read this article first: 3 Ways in Editing Weebly's <head>. Assuming you understood it, paste the following in the <head>:
.pagination {
clear:both;
position:relative;
font-size:17px;
text-align:center;
}
.pagination span, .pagination a {
display:inline-block;
margin: 2px 2px 2px 0;
padding:6px 9px 5px 9px;
text-decoration:none;
color: #72cb47;
background: #222;
}
.pagination .current{
padding:6px 9px 5px 9px;
font-weight: bold;
color: black;
background: #72cb47;
}
clear:both;
position:relative;
font-size:17px;
text-align:center;
}
.pagination span, .pagination a {
display:inline-block;
margin: 2px 2px 2px 0;
padding:6px 9px 5px 9px;
text-decoration:none;
color: #72cb47;
background: #222;
}
.pagination .current{
padding:6px 9px 5px 9px;
font-weight: bold;
color: black;
background: #72cb47;
}
Take note of the following:
-this is your text size.
-the text alignment
-the font color of the inactive pages.
-the box background on the inactive pages
-the font color of the active page
-the box background of the active page
2. Now, take note that each page has different code for its pagination. Go to your first page, drag one embed code and paste the following:
<div class="navigation">
<div class="pagination">
<span>Page 1 of 4</span>
<a href="#">« First </a>
<a href="#">‹ Prev </a>
<span class="current">1</span>
<a href='#' class="inactive">2</a>
<a href='#' class="inactive">3</a>
<a href='#' class="inactive">4</a>
<a href="#">Next ›</a>
<a href='#'>Last »</a>
</div>
</div>
<div class="pagination">
<span>Page 1 of 4</span>
<a href="#">« First </a>
<a href="#">‹ Prev </a>
<span class="current">1</span>
<a href='#' class="inactive">2</a>
<a href='#' class="inactive">3</a>
<a href='#' class="inactive">4</a>
<a href="#">Next ›</a>
<a href='#'>Last »</a>
</div>
</div>
The above code has the following parts:
- all # are links that points to a specific page including those non numerical pagination.
- the current page out of the total pages
- the non numerical pages
- the current page which has no link means unclickable
- the rest are inactive pages
3. Now you go to your second page, and use the following code:
<div class="navigation">
<div class="pagination">
<span>Page 2 of 4</span>
<a href="#">« First </a>
<a href="#">‹ Prev </a>
<a href='#' class="inactive">1</a>
<span class="current">2</span>
<a href='#' class="inactive">3</a>
<a href='#' class="inactive">4</a>
<a href="#">Next ›</a>
<a href='#'>Last »</a>
</div>
</div>
<div class="pagination">
<span>Page 2 of 4</span>
<a href="#">« First </a>
<a href="#">‹ Prev </a>
<a href='#' class="inactive">1</a>
<span class="current">2</span>
<a href='#' class="inactive">3</a>
<a href='#' class="inactive">4</a>
<a href="#">Next ›</a>
<a href='#'>Last »</a>
</div>
</div>
Compare the above code from your first page and note that the active page should correspond to the page you are actually on, repeat this step until your last page.
You may also want to delete some parts of the pagination as seen on the demo page.
0 comments: