February 23, 2014

Weebly Tricks #30 - Simple Site Pagination

Posted by Domingo Tambasacan at 2/23/2014

Site pagination



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;
}

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="#">&laquo First </a>
        <a href="#">&#8249 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 &rsaquo;</a>
        <a href='#'>Last &raquo;</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="#">&laquo First </a>
        <a href="#">&#8249 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 &rsaquo;</a>
        <a href='#'>Last &raquo;</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. 

Get email updates and more access! (Free)
Email *
email marketing by activecampaign

About Author:

Hi I am Domz. I love inserting new widgets and effects on Weebly Template. I like helping people and I like them more being my subscriber. Follow me @ Twitter | Facebook



If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!

...

0 comments:

Have any question? Feel Free To Post Below:

 

© 2014. All Rights Reserved | My Weebly Tricks | Template by Blogger Widgets

Home | | Privacy Policy | Top