Posted By Max On Monday, September 21st, 2009 In Blogger Tricks and Hacks
|
|
| Share |
hi all, today we are going to learn how to add page navigation bar with numbers for blogspot blogs,
i’m sure that most of you have a lot of posts and the default blogger way to navigate between new post and old post is boring. what if your visitors wants to read for your oldest posts?
should he keep clicking on “older posts”, No.
You should apply this hack for your template, it’s one of the most useful blogger tricks ever.
so lets see how to do it.
Caution : Please backup your template (Download Full Template) Before making any changes.
Step 1: Adding The CSS Code.
Log into your blogger account and go to,
Dashboard >> Layout >> Edit html.
And find the following code.
]]></b:skin>
And just before it Add the next code
.showpageArea {padding: 0 2px;margin-bottom:10px;margin-top: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;
}
Step 2: Adding The Java Code.
Find the next code Or some similar code
<b:section class=’main’ id=’main’ showaddelement=’yes’> <b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’/> </b:section>
And After the </b:section> Tag add the next code.
<script type='text/javascript'>
var home_page_url = location.href;
var pageCount=10;
var displayPageNum=6;
var upPageWord ='Previous';
var downPageWord ='Next';
function showpageCount(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);
var title = post.title.$t;
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+'&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){
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){
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++;
}
}
}
if(thisNum>1){
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>';
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;
}
}
function showpageCount2(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var isLablePage = thisUrl.indexOf("/search/label/")!=-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 labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
var thisUrl = home_page_url;
for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);
var title = post.title.$t;
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&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){
upPageHtml = labelHtml + 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){
html = labelHtml+'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++;
}
}
}
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>';
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 type='text/javascript'>
var thisUrl = home_page_url;
if (thisUrl.indexOf("/search/label/")!=-1){
if (thisUrl.indexOf("?updated-max")!=-1){
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"));
}else{
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"));
}
}
var home_page = "/";
if (thisUrl.indexOf("?q=")==-1 && thisUrl.indexOf(".html")==-1){
if (thisUrl.indexOf("/search/label/")==-1){
document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')
}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')
}
}
</script>
And Click “save template”
In the above code you may only edit four lines to customize your navigation bar.
var pageCount=10;
In this code Number 10 control the number for posts per page, you can change it to choose how many posts per page you want to display.
Note : This Number value should be the same With in your blogger account settings
The settings can be found by going to Dashboard >> Setting >> Formatting >> Show >> 10 posts
var displayPageNum=6;
Number 6 here control the number of pages that will be shown in the navigation bar.
var upPageWord ='Previous'; var downPageWord ='Next';
if you want to change the language or just change it to any thing, please change Previous for example to Older
Final Step
This blogger trick my cause some problems if you use labels in your posts and to solve this problems you have to apply the next step for your template.
1. Add Label Gadget To Your Template by going to Layout >> page elements >> Add Gadget >> Select Labels and add it to your template.
2. go to, Dashboard >> Layout >> Edit html.
And find the following code.
<a expr:dir=’data:blog.languageDirection’ expr:href=’data:label.url’><data:label.name/></a>
And replace it with the following code.
<script type='text/javascript'> var lblname = "<data:label.name/>"; lblname2 = encodeURIComponent(lblname); var feedlink = '/search/label/' + lblname2+'?&max-results=10'; document.write('<a href="' + feedlink + '">'+lblname+'</a>'); </script>
And Click “save template”
We are done.
Demo.
To see how it looks see this demo blog
Big thanks for Abu Farhan & Mohamed Rias
No related posts found
Views : 12,351 views 
Rating : 
Loading ...
Installation Error : Copy url &
Click here
Broken Link : Copy url & Click
here
- Hosted Exchange
- 1AutomationWiz Shopping Cart Software
- www.mastersitemanager.com
- LG Rumor Touch Accessories
- online booklet printing
- Download printer repair manual easily
- Need cash? Payday Loans Cash Tomorrow!
- AdvanceLoan
- wordpress themes by wpnow
- German Golf Shop worldwide shipment
- ecommerce solutions
- Chicago Yellow Pages
- Houston Yellow Pages
На этой теме не работает. ;-(
http://jazz-portal.blogspot.com/
This theme does not work. ;-(
http://jazz-portal.blogspot.com/
not worked in my blog
i was used
This trick works in my blog.But I did not use ‘final step’ because I could not find the code. I haven’t seen any problem so far. I hope I don’t
hi all, this trick definitely working perfectly, you can see the demo, or read electrinick comment, make sure that you do it in the right way.
I just check this post, I’ll try to answer any problem in this hack
@Eduard I did’t see script in you blog
@vineeth yor page navigation can’t show in your first page but in your Label view you can see page navi. problem maybe in your template not show navi in first view
@electrinick Where’s you url
@vineeth just check again your blog, problem because #blog-pager{text-align:center; width:640px; overflow: hidden; margin:5px 5px 5px 5px; padding:5px 0px;}
Overflow hidden
hi Abu Farhan, i’m really happy to see you here, and i appreciate your comments and efforts.
you are surly always welcome here,
@Max, ok I’ll try to answer if some problem about this hack. The problem usually because no blog-pager id.
i can’t find this code
i can’t find this code
http://i080.radikal.ru/0909/16/3c324c7bf381.jpg
Good job….thank you
hi boholik, i think you can’t find it because you didn’t added the labels gadget to your template, please provide me with your blog link so i can help you.
thanks.
@ Vacanze in Albania, not at all friend.
good joob
thanks miko.
hey i am having problem with add these widjet please help me …………
hi ajinkyakambe, please give me some details about your problem.
oh dear,
thanks for your tutorial. i have been aplicate to blog. see my blog.
This is great, but Not work all template.
@ dbhmusic , oh yes, this can’t go perfectly on all templates, specially the customized templates, tell me whats wrong with you??
Hi,
Could someone please help me with my blog template. I’ve searched all over the web on how to add missing ‘newer/older posts’ navigation on my template. But I couldn’t find it. Here is my blog http://gunnersbrunei.blogspot.com/
Check it Baby http://www.kingzahm.tk
@ Baloch, thanks , all visitors now can see this trick added and working perfectly to alot of blogs.
Final step doesnt work even after I adding label ithin the widget
@ capunk, the final step isn’t very necessary one. if the widget works with your blog with out it.
not im my html code
it doesn’t wrk..
thanks nice post
ok, not in all custom template, but try to find a similar code.
Unexpected surprise, turned out to BOS Abu Farhan visit to here, too. A deficiency of this hack, unfortunately not in the add image in CSS it (unfortunately ih) (English version translate google..LoL)
I finally got it had to try it three times
Thanks for the info. It worked great!
@ vamp6×6x6x, i’m glad for you, and i wish all to make all visitors see your comment that confirm that this hack working perfectly, it just needs you concentration while doing it.
Thanks for the useful post….
i added it in my page
http://freeindiansms.blogspot.com its looking cool….
the thing is i would like to add images in page number button is it possible?? pls help…
Hurray.. !! I’ve Done..
Nice hack..
@ IsHu, yes you can but you have to have some knowledge about css and html.
Hi.This hack worked in my blog but now I find a little problem with total page count.My blog display 5 post per page.and now i am having 574 post.but total page count is still 100 or 101.I didn’t use final step because i find two same codes within it.So help me to solve it.
hi Abu Farhan, I tried this code to add the pagebar in my blog. But I have problem in adding the final step code and I am using so many labels in my blog, so it is necessary to me to add the final step code. Sir, Plz tell me what should I do to resolve this problem?
hi there,
is still,does not working..
please help me..
i’ve already,try to follow the instructions..
@ TheShadow, the final step have nothing to do with your problem, this hack still don’t work perfectly, me and another coders trying to find the best version of this hack.
@ pradeep kumar, you have to add the labels widget first before trying to find the code in last step.
Hi King, alot of people already applied this trick successfully, it might be a template problem, Coz every coder has it’s way to code the templates.
Thanks for that
I can’t find
code
my template is FreshCircus
hi madiha, the code isn’t appear here, please contact me.
thanks or your comment http://www.googletips-seo.blogspot.com
may be the problem is here:
I was fail to follow the final step either, but i follow abu rahman suggestion to replace Overflow hidden into overflow show….
an then i looking for the source of problem…
check this code:
#blog-pager-newer-link {
float: left;
display:no;
}
#blog-pager-older-link {
float: right;
display:no;
}
#blog-pager {
text-align: center;
display:no;
and i replace all the display: no; into display: yes:
and the walllaa..i am succeed….without doing the final step!
check my blog http://lumbungdownload.blogspot.com
hehehehe just sharing comment from a newbie…..
hi max..i hv try yet nothing come out on d page so i did try the last step(finel) yet its stated there as wrong xml ..or sumting like dat which i cant save it after the ammend
@ natasha : same problem here..Where is max plz help mee…..
HELP!!!!HELP!!!! MAx where arr u honey??? i need u e help:d……
@Maan… may be coz we r using tamplet…max is it bcoz of dat????
dear lumbung_download…. Yezzzzz…i hv try dis tried this trick..ITS WORKKKKKKKKKKKKKK FINALY….
so friend u may try this
#blog-pager-newer-link {
float: left;
display:no;
}
#blog-pager-older-link {
float: right;
display:no;
}
#blog-pager {
text-align: center;
display:no;
If incase u couldn’t find the words ” display.no; ” u may just type them ure self….
Gud luck…
thks lumbung..muahhhhhh love yeah
Numbered Page Navigation Bar works fine.
How do I number the label?
I find this code: . how do I do?
lumbung_download, thanks for your comment, i’m sure it’ll help alot of people.
@ natasha, sorry for being late, i was too busy the last few days,
@ Maan, please try to follow natasha steps.
i’m still here for any help.
Max, Plz help me out here, I have try ur trick & it’s come in good display thanks for the trick, but the problem is it’s displaying the pages till 1 to 51 pages, and the pages are more than 200….. help me here bro…..
Hello Max, I replaced this code (to say the date expr expr blog languageDirection href url label given date: label.name), but when I go to save the model gives me error.
how do I do?
i have problem with final step
plz do something!
it work for me haha thank you very much its very useful for my page;)*
hi,
i have done its working but i cant make Final Step .. I find the code and Replace it with your given once . but got error . http://karshot.blogspot.com/ kindly help.
thanks
sorry for comments again and again . but i m only facing the problem in Final step . that is most important to control Labels . in final step i find 2 codes with yours given one when i try to replace i got error . please help me i will wait for your kind Comments . thanks http://karshot.blogspot.com/
Hi All I updated Page Navigation for blogger in here http://www.abu-farhan.com/tag/page-navi/
it didnt work for me…i have a template from some other site and applied wat u told me and it didnt work can u please leave me ur email so i can give u my site code so u can possibly fix it for me
i succed place this hack in my blog
http://www.takeaworld.com
now i have 537 posts, but why in the post page only diplay 100 posts?
Anyone can solve may problem?
This page feature is awesome, but unfortunately I can`t find the code of the final step and maybe it`s because I`m using the latest cloud tags (labels) released. Any hints for me please?
Thanks!
Thanx for this, But it didn’t work on my blog whatever, allblogtools is best for me & who uses the blogger!!
sorry for my bad English
the page numbers appear but without page numbers border, why it is happened?
plz help me, thank u!
Hi guys, I found the error on your trick.
The last javascript, its bad writted, that javascript must says “” and not “”
Sorry, javascript must says “data:label.name/” without spaces. Bye
The last step code fixed now, please try to add it now. thanks for Shinox,
And please Don’t add more comments for this tutorials, i will close comments here, this is because this widget have a lot of problems, and i’ll add another pagenavi widget very very soon witch wi’ll be free of errors. Wait for it.