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 :
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
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
Popular
Editor’s Pick
-
April 28, 2023 React Lazy Loading and Suspense: Boost Performance & UX
Learn how to improve your React app’s performance and user experience by implementing lazy loading and suspense. Discover the benefits and best practices of using these features for faster page load times and smoother user interactions.
-
July 8, 2009 Blogger Search Form box code
Recently I explained How to add Blogger search box code to your Blogger template. Now In this post I will explain How to customize the search box code to suit your Blogger template. In order to make it easier for you , I am going to explain this with two blogger search form example codes….
-
January 9, 2010 How to add multiple Authors in Blogger
The technique of having Multiple authors to manage a Blog is getting popular these days. Though this feature was already available in wordpress , recently Blogger too has enabled this feature. So now Blogger Users can have upto 100 multiple Authors or co-Authors for their blogs. So this new Team Blogging feature has enabled multiple…
-
January 11, 2010 How to Remove Author Name From Blogger Posts
If you are running multiple blogs and for some reason you don’t want to show your name in author field, Then this Blogger hack is for you. Though the topic looks very simple , but most don’t know how do this. So in this tutorial , I will explain how to remove the author name…
-
June 27, 2008 Related Posts widget hack for Blogger users
Many of my readers are asking help to add Related Posts Widget . I was confused because i have added all the code correctly then why my friends are not getting this hack working. So i looked the templates of all those who sent me error message . All their templates are of same structure…
