Blogger

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.

‘;
}else{
html += ‘1‘;
}
}else{
html += ‘‘+ (p+1) +’ ‘;
}
}

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

if(thisNum>1){
if(!isLablePage){
html = ‘‘+ firstPageWord +’ ‘+upPageHtml+’ ‘+html +’ ‘;
}else{
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;
}

if(pageArea&&pageArea.length>0){
html =”;
}

if(blogPager){
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

Popular

Editor’s Pick

  • Read More hack for Blogger with automatic Thumbnail creator script

    You might have noticed that since few weeks I have been using a strange script which enables us to summarize content and show only the summary with a thumbnail in Home Page , Archives page and Labels page. Since some of my readers requested this hack in gtalk , so I am going to explain…

  • 12 Best Mid Range DSLR cameras

    I am almost got fed-up to hear “What’s the best DSLR”I receive several emails from our readers asking which one they should opt. Now the true fact is, almost all DSLR cameras is good enough to take clean pictures .They all provide you with good specs, sharp images but it’s you who will decide whether…

  • Mastering the Art of Newborn Sleep: Proven Tips for Better Sleep in the First Week

    Congratulations on your new arrival! As a new parent, you’ll quickly realize that one of the biggest challenges of caring for your newborn is ensuring they get enough sleep. In their first week of life, newborns typically sleep for 16-17 hours a day, but it can be difficult to establish a sleep routine that works…

  • GrungeMag Reloaded Blogger Template

    It’s being a longtime since I have released a blogger template. I have got many requests in my last post for converting wordpress themes to blogger templates. So I have decided to release at least two blogger themes per week. As an initiative to this , I am releasing a three column blogger template which…

  • Mastering React Context API in 2023: Best Practices and Examples

    React Context API is a feature in React that provides a way to share data between components without passing the props down manually at every level. It allows you to manage global states in your application and avoid prop drilling. Mastering React Context API in 2023 is essential for building scalable and efficient applications. It…