Add Blogger blog page numbering in a correct and effective way

Adding page numbering is a very important addition to Blogger, when the topics of your blog become many and difficult to navigate, so adding numbering to the blogger blog comes to solve this problem because it makes it easier for your blog visitors to browse old topics and stay for a longer period in your blog

Post numbering for Blogger Templates (Page Navigation widget) is an extension used by most bloggers in Blogger instead of "Older posts and newer messages"

It is an add-on that fits all blogger templates and can change the color in addition to easily in addition to it is light and it states the number of pages available, but sometimes it has a problem which is that when reaching a certain number of topics and for example the article is 100 topics, then the addition does not work Well and you repeat topics

But today we will do an explanation of how Blogger pages are numbered in an effective way and without errors, so that we have solved the largest number of problems facing the addition of page numbering

How to add Blogger pagination

First: How to add page numbering

First, go to the layout box from the control panel of your blog, then click on Edit from the blog e-mails box. Then, put a number that suits you in the number of messages box on the home page, but please note that this number will also be used for page numbering.

Second: Log in to edit your blog template from your control panel and then take a backup copy of it to avoid errors

Then add the code at the bottom of the post above

</body>

Code formats

Number 11 is the number of messages on the page. Set it to the same number you chose previously

The number 8 is the number of pages shown in the plugin. You can increase or decrease it depending on the width of your blog area

You can change the previous and next words to suit your blog

The third step :

Search for this tag and after you find it, add the above code that you will find at the bottom of the post

]]> </ b: skin>

Code formats

This code is # 787D7E is the font color code in the plugin, and you will find duplicate codes that you can modify all of them

Regarding this code

background: #DAD8D9;
background: -moz-linear-gradient(top, #F0F0F0 , #DAD8D9 );
background: -webkit-linear-gradient(top, #F0F0F0 ,#DAD8D9 );

The color is the background of the button, and it consists of two colors, the first upper and second lower

For this code, border: 1px solid #BEBEBE; It is the code for the color and size of the frame around the numbers

This code

background: #D1E0E5;
background: -moz-linear-gradient(top,#EEF3F6,#D1E0E5);
background: -webkit-linear-gradient(top,#EEF3F6,#D1E0E5);

It is another gradient code that appears when the mouse hovers over it

Border code: 1px solid #ccc; The color code for the frame when the mouse hovers over it

This color code background: # 4A4A4A; It is the background color of the page on which it is located

This is the code for the font color: color: #FFFFFF;

For the radius: 2px number repeated in almost all codes, if you increase it the button will become more rounded

This is an explanation of the most important codes that you can modify within the code, or you can add the code as it is and that if you cannot change the colors

You can use the color code tool in Blogger to find out the color codes

Solve the problem of numbering and labels

We said at the beginning of this lesson that there is a problem between numbering and nomenclature. When entering one of the sections, the number of topics is contrary to what is specified in the numbering, and in order to get rid of this problem

Find this code inside your blog template

expr:href='data:label.url

After you find it, replace it with the following code