Page Navigation Menu Widget for Blogger

Off 76

Yesterday I wrote How to add Page Navigation Menu hack by editing your blogger template. Now today I would like to use a different method to add this Page Navigation Menu to our Blogger Blog. Most Bloggers will prefer this method to add Page navigation Menu , because this method is very easy than editing Blogger Template.

Let us see how to add this Page Navigation Menu Widget :

Page Navigation Menu Widget


step 1 : Login to your Blogger account and Navigate to Layout Section . Now click Add Page Element link there.

Step 2 : In that Page Element window , choose HTML / JAVASCRIPT .

Step 3 : Now add this Javascript in that window.

html += ‘1‘;
html += ‘‘+ (p+1) +’ ‘;

if(eFlag ==0 && p == thisNum){
downPageHtml = ‘ ‘+ downPageWord +’‘;
}//end if(p>=(thisNum-displayPageNum-1) && p< (thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

html = ‘‘+ firstPageWord +’ ‘+upPageHtml+’ ‘+html +’ ‘;
html = ”+labelHtml + firstPageWord +’ ‘+upPageHtml+’ ‘+html +’ ‘;

html = ‘

Page ‘+thisNum+’ of ‘+(postNum-1)+’: ‘+html;

if(thisNum< (postNum-1)){
html += downPageHtml;
html += ‘ ‘+endPageWord+’‘;

if(postNum==1) postNum++;
html += ‘


if(isPage isFirstPage isLablePage){
var pageArea = document.getElementsByName(“pageArea”);
var blogPager = document.getElementById(“blog-pager”);

if(postNum < = 2){
html =”;

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;

html =”;

blogPager.innerHTML = html;


After Adding this Javascript you need to drag and drop the widget below the Blog Posts main widget. See this screen shot

Page Navigation Menu Widget

In the code above you can edit the lines in red to your wish .

1 : var pageCount = 5;

The digit in red represents number of posts to be shown in single page. Change the digit to show as many pages you want.

for example :

In my blog I have put that value as 2 . In each page you can see only 2 posts .

2 : var displayPageNum = 3;

here the digit in red represents number of pages to be listed.

For example :

In my blog I have chosen 3 , then 3 pages will be shown.

Now save your template .
That’s it now we have added Page Navigation menu widget to our blog successfully .

I hope you guys will feel this method is easier than the last one.

About the author / 

Mohamed Rias

I'm a programmer, photographer, and proud parent. With a passion for coding and a love of capturing life's moments through my camera lens, I'm always on the lookout for new challenges and opportunities to grow. As a dedicated parent, I understand the importance of balancing work and family, and I strive to be the best version of myself in all aspects of my life.

Related Posts


Editor’s Pick

  • add paypal donation button script to blogger and wordpress blogs

    Rather than advertising revenue some websites depend on donations from users to run their sites. Although there are few online paypal button code generator websites available, I would like to explain how to generate paypal donation button script manually using your own paypal account. In order to create a donation button in paypal you need…

  • How to set up navigation menus

    Navigation is certainly a very important part in web design, especially if we keep in mind that the navigation of a page is there to orient and guide the user. Navigation is a key element of any website. With the help of navigation menu, the user gets from section to section, and to different contents….

  • Javascript Classes: The Definitive Guide for 2023

    Explore ‘JavaScript Classes: The Definitive Guide for 2023’ to master the ins and outs of JavaScript Classes. From basics to advanced concepts, this guide empowers developers to write cleaner, more efficient code. Perfect for beginners and seasoned pros looking to level up their JavaScript game.

  • Ultimate Twitter Tools and resources

    Twitter, the micro-blogging platform that has taken the Internet by storm, has so much to offer the online entrepreneur or personal user, yet is misunderstood by many people. Twitter not only allows you to tell the world “what I am doing right now” via its web interface, but can also be integrated and enhanced by…

  • 16 useful Mac cheat Sheets

    Cheat sheet is a concise set of notes used for quick reference. Cheat sheets will contain most of the shortcuts needed to program faster. And it is meant for newbie users who can’t remember the shortcuts or commands. In this article , I have collected some of the useful cheat sheets available for Mac OS….