How to ADD Numbered PAGE NAVIGATION Widget in All Pages, Homepages and Label Pages, in Blogger Site?



You can add a Responsive NUMBERED Page Navigation Widget in your Blogger site; it will appear on All Pages like Homepage and Label Pages. It will make it visitors easy to access various posts on your blogger site.


The Sample of NUMBERED Page Navigation Widget is shown below:




You can ADD this Numbered Page Navigation Widget to your Blogger site with our Ready-made code in a few minutes!


Now Let’s Learn to NUMBERED Page Navigation Widget Appearing in Both Homepage and Label Pages in Blogger Site Step by Step:-

#1. First of all, Download the Code Notepad File to Add NUMBERED Page Navigation Widget in Blogger Site, the Link to Download is available below.

Code Notepad File to Add NUMBERED PAGE Navigation Widget in Blogger Site All Pages: Click Here to DOWNLOAD


#2. There are 3 Parts of Code in the Downloaded Notepad File.
1st and 2nd Parts of Code are compulsory to be added in Blogger HTML for the Widget to appear on your Site.
3rd Part of the Code is NOT compulsory; it’s optional. First of All, Add 1st and 2nd Parts of Code in your Blogger HTML and then Check your Site. If the Widget is already seen on your site, then no need to add the 3rd part of the Code. If the Widget is not seen after adding the 1st and 2nd part of Code, you should add the 3rd part.

It won’t affect your site if you add the 3rd part of the code even though the widget appears on your site after adding the 1st and 2nd part of CODE. We just mean it's optional if the widget is seen by the 1st and 2nd part CODE, and it's compulsory if the widget is not seen only by the 1st and 2nd part Code.





#3. Now OPEN the Downloaded CODE Notepad File for CUSTOMIZING for your Site.

In 1st part of CODE, you can CUSTOMIZE the Background Color, Font Color, Font Size, and Family.

In the 2nd part of CODE, you can CUSTOMIZE: How many posts to be shown per page and How many numbers to be shown in Numbered Page Navigation Widget.



#4. For PASTING 1st and 2nd Part of the Code in Blogger HTML View:-

The 1st and 2nd parts of the Code should be added in Blogger HTML, BOTH TOGETHER. Their Position doesn't matter; any of them can be above or below of one another.

Open the Blogger, go to THEME and then go to the EDIT HTML option.

Now SEARCH for </body> in Blogger HTML and PASTE BOTH 1st and 2nd Part of the Code JUST BEFORE or ABOVE </body>.

You can paste any of part 1 and part 2 code above or below of one another. Just Put them together Just Above or BEFORE </body>; their position can be any. 
Any of them can be above or below of another in BLOGGER HTML.






#5. Now for the 3rd Part of CODE, SEARCH these 2 Lines in Blogger HTML. These lines are together in Blogger HTML.

<!-- navigation -->
<b:include name='nextprev'/>

Now REPLACE these above 2 lines with our 3rd Part of the Code. Remove these 2 lines from Blogger HTML and PASTE; our 3rd Part of the Code is in the same place as these 2 Lines.

3rd Part of the Code is not compulsory; it’s optional. First of All, add 1st and 2nd Parts of Code in your Blogger HTML and then Check your Site. If the Widget is already seen on your site, then no need to add the 3rd part of the Code. However, if the Widget is not seen after adding the 1st and 2nd part of Code, you must add the 3rd part.

It won’t affect your site if you add the 3rd part of the code even though the widget appears on your site after adding the 1st and 2nd part of CODE. We just mean it's optional if the widget is seen by 1st and 2nd part CODE, and it's compulsory if the widget is not seen only by 1st and 2nd part Code.





Now SAVE the Blogger Theme, and you are all done to Add NUMBERED PAGE Navigation Widget in your Blogger All Pages, Homepage, and Label Pages!


You have successfully added the Numbered PAGE NAVIGATION Widget in All Pages, Homepages, and Label Pages, in your Blogger Site. Now, Let’s check it out.



Also, Watch our Video for Step by Step Guide to Add NUMBERED Page Navigation Widget in Blogger Site All Pages, Homepage, and Label Pages:-





Previous Post Next Post