After many failed attempts, I was almost ready to admit defeat with this function until I discovered this excellent script by Mohamed of Blogger Accessories. This script replaces the default blog pager (links to newer, older and home pages) with numbered page navigation. Furthermore, it offers the ability to customize the number of page links and the number of posts displayed on each page.
Mohamed's Blogger pagination script may be installed using two different methods:
- Customizing the template code
- Adding as an HTML/JavaScript widget (gadget) below the main posts section
Here is how the finished installation will appear in your blog:
Once installed, these "page numbers" will appear on your home, archive and labels pages, allowing your readers to easily access pages in your archives. However, the page numbers will not appear on individual post pages. I've noticed many blogs which use pagination like this, and among them none displayed these page links beneath individual posts.
To learn more about using the numbered pagination script for Blogger, pop over to Blogger Accessories to read the useful tutorials Mohamed has posted.
My Slightly Modified Version
As you may have noticed, I'm using a slightly modified version of this script here on Blogger Buster. When customizing the style of Mohamed's original version, I noticed a few elements which I preferred to change for my own preferences, and also modified the CSS for how the numbered links are displayed.If you would prefer to use this slightly different version instead, here is what you should do.
Add the CSS code to your style section
Firstly, copy all of the code below and paste this just before the closing</b:skin>
tag in your template:This should change the colors of text and links in the pagination to match the styles already present in your blog template. So if your default text is white against a dark background, the "Pages (#)" section of the script should appear the same way. The color for the background and hover effects of the numbers can be altered according to your preferences by editing the hex values to match the style of your own template..showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#ccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #ccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}
Add the JavaScript code beneath your posts
The second part of the installation is to add the JavaScript code beneath your posts which will locate and replace the existing "Newer/Older Posts" link. To add this script, go to Layout>Edit HTML in your Blogger dashboard, and do not tick the "expand widget templates" box (it's much easier to add the code while the widgets are contracted). Then find this section of code (or similar) in your template:<b:section class='main' id='main' showaddelement='yes'> <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/> </b:section>
Immediately after the closing </b:section>
tag, add the following section of code:<script type="text/javascript">
function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==".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 = 5;
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">'+thisNum+'</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 = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}
html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
}
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>
Once you have added this code, attempt to preview your template to ensure there are no code errors. You will not be able to see the script in action on the preview, but this step ensures no adverse effects to your layout.
In the code above, you will notice that I have highlighted three sections of code in bold red. You may need to customize these sections to better suit your preferences:
On line 5, you may need to change the ".com" to reflect your domain extention if you use a custom domain.
var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==".com/";
This default installation should work fine for anyone hosted on Blog*Spot or a dot.com domain, but you will need to alter this section if your custom domain ends in .co.uk or .info for example.
In lines 19 and 20, you can change these values to alter how many posts are displayed on each page, and how many links will be visible at the same time.
The
var pageCount = 5;
section defiines the number of posts displayed on each page, while var displayPageNum = 5;
defines the number of links which are displayed (eg: 1 - 2 - 3 - 4 - 5) beneath the posts section.Once you have added this JavaScript code and made any changes nescessary for your needs, save your template and open up your blog in your browser. Now you should see the pagination links appear beneath your main posts section, and also on Labels and Archive pages.
Your thoughts?
I hope this post has helped you learn about how numbered page navigation can be achieved in Blogger powered blogs using Mohamed's original methods or my slightly modified script.Please let me know what you think of these methods, or if you experience any problems, by leaving your comments below.
81 comments:
wow, very good, I tried Blogger Accessories's version, but it didn't work too well for some reason, I decided to give it another try and I found your site....I've installed it at moviesgateway.com, it looked great thanks!!!
Thanx amanda,
This one worked. Before trying your version i have tried the original hack (both types)but they didn't worked and then i tried yours.It worked..... Thanx..
good blog but i have a problem i am having domain .co.cc as yojhakas.co.cc it shows page number but do not restrict posts in any label
Looks nice, but doesn't work. It was skipping posts, and it wasn't working on the labels page.
It has a problem when click " jump page"
for example , i click 4 it will jump to 7.
And 1st load my blog , it did not appear the page bar at last, when I click "Older Post" , the page bar appear.
So much faults , please fix it, my blog is: http://www.zenware.blogspot.com
got the same problem whit missing posts in page2, page elements/post is 5 just as var count, hope the scrpt can be fixed, becouse i realy like it, thanks anyway
Awesome. Works great on www.GoodCarBadCar.net - a lifesaver that should help with pages/visit.
çok güzel ellerine sağlık buster:) thank you.
I think the problem with missing posts, is because it is skipping Even Numbered Pages.
When I click page 2, it goes to page 3. When I click page 4, it goes to page 5..etc.
Has anyone found a fix to the page navigation..
Also, mine looks a bit funny on Internet Explorer. v7
Take a look. www.moviewatcherz.com
Thanks
works like a charm.. thanks again Amanda...
I had done this long back.. but forgot to put in the Hi.. THANKSSSS
works like a charm.. thanks again Amanda...
I had done this long back.. but forgot to put in the thanks.. THANKSSSS
Thank you Amanda, I love you.
Hi Amanda!
It didn't work for me.
Could you help me, please?
It's installed in http://hotfromthewok.blogspot.com
Thanks!
Hey Amanda...any idea why it doesn't show up on my front page? Looks wonderful on all other pages, but doesn't show on the front...Thoughts?
www.napwarden.com
thanx Bro. its working fine
thanx a lot
keep it up
bro, what you said about this,..
i'm really don't understand how to make it easily,..
Does not seem to work on the minima template
hey Amanda ! its not working for me too :(
Hi Amanda
How are you?
I install the "Continue here" on my blog, its great and unbelievable for me to put it, but you make it and its great working. If you want to see it. www.articles-homebiz.blogspot.com.
Thats too nice of you.
I have some problem my another thing
I install the Numbering but they are making problems. When I press page no 2 button it goes to 4 or 5, but bringing the contents are of page 2. Only numbers are missing going forward. Please check it and suggest me what to do.
I also want to align all my post to page center. My template was 2 columns right and left and I want my post to center to make my both columns a little visible, because the right column is hide due to posts left alignment.
In last I want to change my blog header picture and header writing "Entertainment for you", so please suggest me an amaizing style according to my blog style (you will know a me from your blog, so suggest me according to that) and The footer has a blue line and has no space, I want to add disclaimer to my blog and the statcounter in the last, but when I add them, they come in front on the ad.
Amanda Its so nice of you guiding and making good thing. Please help me.
www.movieslinks4you.blogspot.com
Take care
Thanks
Hi Amanda Plz help I have tried a lot but its hust not working for my blog....
http://www.mypikc.blogspot.com
Amanda,
Lots of good stuff here but this pagination CSS has some serious bugs. On my site Robot Nine, like many others when you click on page two the displayed pages is number 3 and shows posts several postings further down the line, eg. In other words, I have 2 posts on homepage, 2 on each page. Click opage two and you see posts number 8 and 9 rather than 3 and 4. I suspect it it the var timestamp = post.published.$t.substr(0,10); line and have tried various adjustments without success. Changing the variable from 10 makes every page display the home page. It is unfortunate that Mohamed and yourself seem to have stopped answering posts about this code. I will leave it on for a short while maybe, but readers e-mail complaining. Any ideas or suggestions.
Alan
RobotNine(@)GMail.com
not working
amanda i think you should fix some bugs in this code including missing posts and jumping posts
i think posts with no dates don't appear
please fix it for us we need this hack so much.
thx alot
I'm getting the following error error:
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The reference to entity "max-results" must end with the ';' delimiter.
Thanks a lot Amanda and Mohamed. I combined both of your tricks and it's working really well. For those of you who are having problems with missing posts, you should make sure "var pageCount = " is same as the value you set in the dashboard settings.
Thank you very much Amanda... your post is very help me... And it's very nice to know your blog :)
I agree that this code is not working. I used it too. Please post a new code.
This is great!!! Thank you so much for this trick!
Hey,
Thank you, It works great.
Only thing is it does come up on the first page, it still has the "older posts" link. This is only on the first page. Is this by design or did i stuff it up. I am just wondering.
Again thanks.
It rocks! You rock!
Chris
DelayClimax.info
Is it possible to get the page navigation hack with the same image showing on the top. I want to implement that on my blog
http://tamilposters.blogspot.com
I figured out that the problems with missing posts or repeated posts have to do with posting multiple posts per day.
The code appears to rely on post timestamps, and if you post two posts on one day, it doesn't recognize this fact. So if the two posts on one day end up spanning two pagination pages, then it repeats the posts and leaves out one other post.
Unfortunately, I think that this is a problem that can't be fixed, but I may look into it. There has got to be a better way to select the posts other than by date.
Nathan - Inkweaver Review
Amanda, I found the bugs in the code and fixed them.
The first bug had to do with the way timestamps were handled. Mohamed chopped off the hour and minute part of the timestamp. As a result the pagination feature worked for users who only post once a day, but if they posted more than once a day it made the timestamp selection inaccurate.
The second bug had to do with viewing by labels. The increment for the item counter was inside the wrong if structure and so the timestamp selected for the pagination link was highly inaccurate.
I fixed both these issues on my blog:
Inkweaver ReviewIf you want I can give you a new, bug-free copy (please use my contact form), or you can just grab the code off my blog. Just view the HTML. You'll have to remove a few extra statements that I added at the start of the function.
At any rate, please let your readers know about this fix.
hey u share nice trick
hello there very usufl post i tried it to my new blog but nothing happens do you have time to check my page source and see why?
thanks in advance!!
www.gamesms.us
Hi...Thanks for sharing but it didn't work on my blog.What is the problem?
Appreciated your reply.
thanks for sharing
HI AMANDA, U IS VERY BEALTIFULLLL RSRS..
muchas gracias thank you, i love :D
it works good but the problem is when i use those paging navigation it navigates very badly sowing only some posts means it automatically jumps it's own irrespective of chosen navigation .......
then i remove the widget ......
http://funevil.blogspot.com/
that's great eventhought with a fews bugs
wow!!! this has got to be the best feature.... I've been looking for this for a long time. thx. a million.!!!!!
Thank you from Thailand, Amanda. Your method is the best!
that not working i click 2 page its go 3 are 5
Great....
Thanks so much I have added it to my blog. If anybody wants to see how it looks like
http://tumuylol.blogspot.com/
It really great for my blog as I post many entries a day, so navigation was a problem before.
Now its brilliant. Thanks again
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/
Works great. Thanks!
doesn't work, hide some posts and repeat others
REALLY COOL!! THANK YOU!!!!!!
thanks.. ( teşekkürler )
Well, when I choose a label with 35 posts, why are there only 20 posts showing?
What did I do wrong? Please help.
It works for http://hightechy.blogspot.com
Thanks alot mate...
FaHaD @ http://hightechy.blogspot.com
How do i deal with duplicates on mine: www.SensoryEscapeImages.Blogspot.com
Thank you
hey amanda,hw r u?
this hack is not working 4 me..
http://desiscrapa.blogspot.com/
cn u help me out?
plzzz...
Finally It worked!
Although Original Method is on Mohammad Rias's, but that didn't work for me.
Your customized version did ! :)
Thanks
Thank you so much. Works great :)
Just one question. How do I change the text color of the page numbers in parethesis , like
"Pages ( 75) "
On my site its black text on black background so its not visible. Already tried to change the colour to something else, but it didnt work.
( www.animationandmore.com ) Thank you
its not work
tdak bisa bos
gak iso
Bende Sayfa Numaralandırma'yı kendimce farklı bir biçimde anlattım.İsteyen buradanda bakabilir.Sayfa Numaralandırma
Thanks for the hack.
It work for me here
This hack is not working and I accept with what NathanKP said. I am working on this Page Navigation Hack too. My blog has got some of the best widgets.
Everything About Blogging
Fantasmicc!!!!
not working ;-(
Please help me
http://bhagya-just4u.blogspot.com
Thank you,
But not working for me :-(
Please check
http://bhagya-just4u.blogspot.com
thx for the code, but how to fix to get the page navigation below more from the post "body" section???
see my blog
http://dzul89.blogspot.com
hi! i tried your script version of the hack. it doesn't work. i am using the red-light theme (e column). i can make the canges in the template, but the "older posts/newer posts" still appear. i have http://linkulzilei.blogspot.com can you help me? reply here or via mail: blinkylicious@yahoo.com
Hi
Thanks for the post and You can see this implemented in my astronomy blog too..
hi. will the code works when you are using a custom template? i cant use the code to its optimal setting.
I have a problem, at my blog http://www.lumea-florilor.ro/ the numbered pages appear only if i click older page..in my homepage it not appear..why? Help me please!
Simple and efficient,Thanks
www.//onlinetamilbeats.blogspot.com
Thanks ... its helpful...:)
http://www.lubuan.blogspot.com/
Dear Amanda
You are great, really.
This you wrote on August 2009
Quote:
For those of you who may reed on occasion, who have bookmarked Blogg Buster for future reference or have simply stumpled upon this post, why not join the other 10,000 subscribers and also receive regular updates on the latest Blogger tipps, tricks and news.
You posted this tipp for Numbered Page Navigation on August 12, 2008
And you stopped answering on August 14, 2008 only two days later.
Is this your idea of regular updates on tipps and tricks?
So, stopp begging for new subscribers if you don't have the time to answer questions from your readers.
Sincerly yours, a disappointed reader who stumpled upon your Blogg
dont work for me, whats happining?….. when i clik page 2 go to page 5!!! oO… thats my template .. http://www.best2know.info/2009/07/bizfresh-blogger-template-free-blogger.html … please…help me bro!
This was super helpful and worked perfectly,
THANK YOU
keep up the great work
Hi, Amanda. Could you take a look at my blog, because it doesnt work by me. I would be very greatful if you will help me. http://psychika.net
What should I do ?
Thanks Amanda, the codes you modified worked for me. This is my blog,
http://techiemaxcorner.blogspot.com
It is about technology trivia plus some tips and tricks to maximize your gadgets. Only thing is that the page numbers didn't showed up in my homepage coz the "Older Posts" is still there. But, when you click on particular posts, the pages already shows up. I also have another blog, http://dreamchaserhaven.blogspot.com which is about inspiring people, but i haven't applied it there yet.. =)
mmm not work with my blog....
please help me
http://johnytim.blogspot.com/
This hack has won a Brazilian version on my blog ... it always citing the source right avoiding plagiarism
just noticed mine not working correctly with multiple posts per day. I did a special post theme last week and was posting 3 or more a day, and no some are stuck in the "hole" and you can't see them. I am removing the code and going back to the old way unless this can be fixed. I can't have missing posts...
Hi Amanda,
I tried to use this hack but it doesn't show all pages on my site. It only show 26 pages of my site but there are many more page on my site. What is the problem about that.
Many Thanks,
Yalçın
Nice Tip
http://sizzledsoft.blogspot.com
I made modification from that script And I hope can solve All Problem visit Page Navigation for Blogger (Problems Solved)
Post a Comment