RSS feed for Blogger

Page Navigation Menu Widget for Blogger

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.


- has written 35 posts on Smashing Tips

Bindu loves to write on web design, typography and freebie design inspirations. She has a huge collection of wallpapers, fonts, vectors and PSD of web templates which she likes to share with us in smashingtips.

No comments yet... Be the first to leave a reply!