Page Navigation Menu Widget for Blogger
31. Jul, 2008 
235 Comments
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.
.showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px;
}
.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;
}
.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;}
.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
</style>
<script type=”text/javascript”>
function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==”.blogspot.com/”;
var isLablePage = thisUrl.indexOf(“/search/label/”)!=-1;
var isPage = thisUrl.indexOf(“/search?updated”)!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(“/search/label/”)+14,thisUrl.length) : “”;
thisLable = thisLable.indexOf(“?”)!=-1 ? thisLable.substr(0,thisLable.indexOf(“?”)) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= ”;
var upPageHtml =”;
var downPageHtml =”;
var pageCount=5;
var displayPageNum=3;
var firstPageWord = ‘First’;
var endPageWord = ‘Last’;
var upPageWord =’Previous’;
var downPageWord =’Next’;
var labelHtml = ‘<span class=”showpageNum”><a href=”/search/label/’+thisLable+’?&max-results=’+pageCount+’”>’;
for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=”){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
postNum++;
htmlMap[htmlMap.length] = ‘/search/label/’+thisLable+’?updated-max=’+timestamp+’T00%3A00%3A00%2B08%3A00&max-results=’+pageCount;
}
}
}
}//end if(post.category){
itemCount++;
}
}else{
if(title!=”){
if(itemCount==0 (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
if(title!=”) postNum++;
htmlMap[htmlMap.length] = ‘/search?updated-max=’+timestamp+’T00%3A00%3A00%2B08%3A00&max-results=’+pageCount;
}
}
itemCount++;
}
}
for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +’</a></span>’;
}else{
upPageHtml = ‘<span class=”showpage”><a href=”/”>’+ upPageWord +’</a></span>’;
}
}else{
upPageHtml = ‘<span class=”showpage”><a href=”‘+htmlMap[p]+’”>’+ upPageWord +’</a></span>’;
}
fFlag++;
}
if(p==(thisNum-1)){
html += ‘ <span class=”showpagePoint”><u>’+thisNum+’</u></span>’;
}else{
if(p==0){
if(isLablePage){
html = labelHtml+’1</a></span>’;
}else{
html += ‘<span class=”showpageNum”><a href=”/”>1</a></span>’;
}
}else{
html += ‘<span class=”showpageNum”><a href=”‘+htmlMap[p]+’”>’+ (p+1) +’ </a></span>’;
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = ‘<span class=”showpage”> <a href=”‘+htmlMap[p]+’”>’+ downPageWord +’</a></span>’;
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 = ‘<span class=”showpage”><a href=”/”>’+ firstPageWord +’ </a></span>’+upPageHtml+’ ‘+html +’ ‘;
}else{
html = ”+labelHtml + firstPageWord +’ </a></span>’+upPageHtml+’ ‘+html +’ ‘;
}
}
html = ‘<div class=”showpageArea”><span style=”padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;border: 1px solid #333; background-” class=”showpage”>Page ‘+thisNum+’ of ‘+(postNum-1)+’: </span>’+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
html += ‘<span class=”showpage”><a href=”‘+htmlMap[htmlMap.length-1]+’”> ‘+endPageWord+’</a></span>’;
}
if(postNum==1) postNum++;
html += ‘</div>’;
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;
}
}
}
</script>
<script src=”/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999″ type=”text/javascript”></script>
<div style=”text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;”> <a href=”http://www.techieblogger.com/2008/07/page-navigation-hack-for-blogger.html”>Grab this Widget ~ Blogger Accessories</a></div>
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.
ok, bos…. it;s work thank
http://www.belajarblog80.blogspot.com
ok bos….thanks it really work.
http://tipsandcara-ngeblog.blogspot.com
ok bos….thanks it really work.
http://tipsandcara-ngeblog.blogspot.com
Thx mhohamed. But how can I modified the page navigator look more pretty? because this one look too simple. Can you teach me how to make look like the page navigator from this blog? Thx
hello Mohamed. Can you teach me how to make comment box look like your, each comment have box around it. Please teach me. thx
huhuhuhuhu. its not working! but i love to have like this. please help me!
This page navigator have bug. Every time i press next page or page 2, it will skipped 1 post. Pls fix it pls.
Great Post.
Thanks Buddy
It’s not working. I changed the theme on my blog, could this be a reason why it doesn’t show anything ? With the current theme i changed it shows “older posts” and “new posts” and that’s it. Does this “trick” that you showed us only work on default blogspot themes ?
Already try both method. But it seems doesn’t work for my template. Btw thanks a lot for the tutorial
it will never work. it’s garbage. don’t use it. page 2 or ‘next’ will skip and on a 6 post label with 5 var count you won’t see anything on the second page. from mohamed to amanda to every blogger ‘helper’ it;s the same crap being tossed around. don’t waste your time.
slm!
sorry but it doesnt work!could you put the same hack that you use on your blog?
Sorry not working for me either
howdy! i have installed your page navigation widget at my site, but the widget does not appear..
A fool in love that makes no sense to me but you are a fool if you don’t love mohamed’s post. so, I love you mohamed
hi!I have a problem.
I have use this method,but I find a bug.
I don’t know how to solve it.
if I have 7 pages,and I make “var displayPageNum = 3″when I am at my homepage,I want go to page 2,but it doesn’t work.It goes to page 4.
My question is how to slove it.
Could you give me the tip?
its impossible to shown in my blog
i tried so many times please i need solution!!
http://gamesms.us
plz mohamad reply
why it doesn’t appear in my blog..
great widget ……….
but it couldn’t working fine….
i installed this widget i think u r the real hacker of the code i found it on some other blogs those just modified css of this…
i like the above navigation style that’s why i use it….
” the problem is when i navigate to next or 2 page it navigates some far and it displays only some posts only “
just check the below blog and use navigation to understand …..
http://funevil.blogspot.com/search/label/Animal%20Pics?max-results=5
Thanks in ADV
From http://funevil.blogspot.com/
itz grt widget…but its not working well in my blog…….
the page 2, 3, 4 and next is not working well ….it does nt show all the post…..
when i klik page 2…..it shos 3 or page 4 element …..plz help me to sort out the problem…
my blog address….http://www.heart-of-angels.blogspot.com
I tried to install the code as a widget but is not appearing on the page. Look at the page footer there: http://minimalsource.blogspot.com/
Could you please help me please?
Hi, great post. But i’m also having the same problem like the others. I’ve tried adding it but it’s not appearing.
http://debicody.blogspot.com
please, please, help me. thanks!
hi mohamed
i saw that the code was working in some blogs but it doesnot work in mine. Can u please advice on how i can fix it. Anyways, i love this website and the many hacks you have. You are awesome.
http://footynation.blogspot.com
Not working for me
is does n’t work on me pls help
i did that but it skipped 2 pages, when i click next. Please let me know what is wrong!
Its not working help me out
assalamo 3alaikom mohamed
i saw that the code was working in some blogs but it doesnot work in mine. Can u please advice on how i can fix it. Anyways, i love this website and the many hacks you have. You are awesome.
http://mosalsalat-arb.blogspot.com
It can't work for me… Need Help
http://laikepo.blogspot.com/
Hi could you please tell how to get the navigation orange menu seen in your blog .Please tell me.
in my template it's not working
http://onlineicon.blogspot.com
it doesn’t work for me
take alook it remains blank ??
Doesn’t work for me either.
I use the script without the widget but by add your Page Navigation Menu hack by editing my blogger template and it work very well. Thank you very much
it’s not working for me. It shows there is a widget at the bottom of the page but nothing shows there at all
thanks really good tut…:P
I’m sorry ! But it didn’t work ! why ?
it didn`t work for me
not working for me mohamed i tried all the methods u mentioned
i hope u give me some help here
thanks
thank you very much
Looks like the widget is compatible in some templates only. It’s not working in mine.
If someone was able to make the widget appear, please share how can it be done.
thank you
I tried it so many times and different ways. I cant get it to work…I need your help
Great posts for blogger for page navigation. I would say this is really good post and if i published in my blog, then i give full credit to you….
many years to come…your best friend…ramesh
assalammualaikum… i want to ask why the navigation menu not appear at my blog ?? can u explain to me ?? i do like what u write above
not working in my blog nothing happen so sad
Hi, so far I placed it under my blog edit but it won’t come out.
Please share your idea.
I use the script without the widget but by add your Page Navigation Menu hack by editing my blogger template and it work very well. Thank you very much
dont work for me.
thank for sharing.
[...] You can also add this Page navigation hack in the another method : Widget style. [...]
thanks alot..:)