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
-
November 22, 2010 85+ BreathTaking Tilt-Shift Photography and Resources
Tilt-Shift photography is the technique of using selective focus. This is used to reduce the magnitude of large size photos to make it into miniature models. One moves the lens adjacent to the plane of the image in the shift phase while moving the lens through an angle to that of the image plane is…
-
December 25, 2009 Page Navigation Hack for Blogger
Most said page navigation menu in the bottom of the page can appear only in WordPress blogs. But Now here is a blogger hack which will help you to show Page Navigation Menu in bottom of the page ( see screenshot ) . you can Add this Page Navigation hack to your blogger template either…
-
June 7, 2012 Designing Blogger Template : SEO Optimized Title Tag
I have seen so many bloggers have been asking me for tutorials to design Blogger template. As you all know after i gave Techieblogger.com to my another friend, I have created this new blog for providing blogger and web design tips. I have decided to post the whole process required for designing a seo optimized…
-
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…
-
April 24, 2023 Why Zero Runtime CSS-in-JS is the Future of Web Development
A Zero runtime CSS-in-JS is a technique of writing CSS styles in JavaScript that does not require any additional runtime or library to function. This means that the styles generated by your code are immediately available and do not need to be parsed by a separate library at runtime. The topic of zero runtime CSS-in-JS…
