Page Navigation Menu Widget for Blogger

0 50

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

Leave a reply

Your email address will not be published. Required fields are marked *


Editor’s Pick

  • 200+ Ultimate Collection of Photoshop Plugins

    Photoshop is a powerful image editing software which is very useful for web designers and photographers to create desired effects in the images. But sometimes it’s difficult to perform certain tasks manually in photoshop. Once there was a belief that only designers who have mastered photoshop can create special effects on photographs or images. But…

  • Notable Tips for shooting Awesome Wildlife photographs

    You can remark it as wild-time game, which surely it is. Wild is the community for animals and not ours so it’s there to decide what they will do and what they want to. You can tell them to make some gesture that well-suit your need, or you can’t ask they to align up in…

  • 45+ Surreal Infrared photography Inspirations and Tips

    In Infrared Photography the image sensor used is highly sensitive to infrared wavelengths of light. We all know that white light is composed of several bands of colours known as spectrum and the wavelengths ranging between 750nm to about 1200 nm, falls on infrared (IR) band. The spectrum used is in this technique is termed…

  • 65+ Stunning Macro Photographs with tutorials

    We are often bothered and eluded by the large things like landscape, river views, lakes etc. but we rarely look to the smallest things in our world. Macro photography is one of those medium which makes you feel that even the smallest things have many parts to play in this globe. Macro photography means that…

  • Tips to shoot excellent Panoramic Photographs

    Recently, making out panoramic photos has become much easier as your software stitches them quite beautifully together. Photoshop is quite skillful and master in doing that; it has got a command called Photo Merge that weaves your photos once you hit it. Now, software is mere medium which we use to ease our post works,…