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 by inserting script to your template by editing or you can add it as a widget . In this post I will write only how to add this Page navigation menu by editing template code.
I have used a background image for this Page Navigation hack. If you want to show this without the background image just remove the background image url .
Let us start :
Step 1 : Log in to your blogger account and navigate to Layout section. Now go to the edit HTML subtab.
Step 2 : search this line ]]></b:skin> and add this CSS code above that line.
CSS CODE WITH IMAGE :
.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;
}
It must look like this :
Step 3 : Now search for this code or related in your template ( no need to expand widgets )
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
Now Add This script just below the </b:section> .
<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 += '&nbsp;<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="font-size:11px;padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;border: 1px solid #333; background-color: #FFFFFF;" 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 ~ Techie Blogger</a></div>
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.
That's it now we have added Page Navigation menu hack to our blog successfully
.That CSS code will suit almost all templates. Please don't remove the credit link.
I hope all of you will like this Page Navigation blogger hack . If you have any doubts please ask in comment section . Comments are most welcome , please give me your feedback about this blogger Hack.
You can also add this Page navigation hack in the another method : Widget style.
on August 2, 2008 at 5:05 PM
it works in my blog, thanks alot!
on August 2, 2008 at 7:06 PM
Your are welcome RW ,I hope you know that this hack is present only in very few blogs. I am very happy to have your Blog in that List.
You can expect more hacks like these here at Blogger Accessories.
on August 3, 2008 at 11:36 PM
dude i cant see this hack working on your page itself....its showing newer post home older post and noting after that... same thing is happening wid me...
on August 4, 2008 at 12:53 AM
Hi Wolverine ,
This Page Navigation hack works only in home page , Labels page and Archives page ( where we have more posts ) . Check it again , it should work fine.
regards ,
Blogger Accessories
on August 4, 2008 at 1:37 AM
yeah... its working now... great hack buddy...
ill post a link on my blog...
on August 4, 2008 at 5:12 AM
Thanks Wolverine , you can expect more hacks like lytebox , dock menu , etc very soon
on August 6, 2008 at 10:14 AM
Hello Mohamed,
I just wanted to say THANK YOU SO MUCH for posting this excellent hack!
I have tried for months to achieve this without success, and am very happy to have found your tutorial. Just now I am customizing the appearance of this widget and will install in my main blog very soon.
With your permission, I would like to write about this hack on Blogger Buster. Many of my readers have requested this hack, and I would love to pass on the information so that others can come to your site and learn how to add this to their blogs.
Please let me know if you would be happy for me to link to this post (and also your widget based post) along with a description of how this works.
Best wishes, and again many thanks for your hard work. I am genuinely impressed by your efforts :)
on August 6, 2008 at 7:32 PM
Thanks Amanda , yesterday ( 06-07-2008 ) I tried to contact you in your site . Then I decided to customize the appearance of this hack and then I must contact you.
I am giving you permission to add this hack to your site and you can distribute it to your readers too , but with a link to my blog.
If you want any help contact me , I Will help you ,
regards ,
Blogger Accessories
on August 6, 2008 at 7:47 PM
Amanda I forgot to tell you one thing , the script i posted here is already customized . If you want the full script with comments let me know . I will send it to you by email.
regards,
Blogger Accessories
on August 7, 2008 at 1:43 AM
Thank you Mohamed, this would be very helpful :)
I managed to install successfully on my test blog, but had some problems when installing on my main blog which uses a custom domain. Eventually I did figure out the problem and now have this working properly on all pages.
Would you be able to email me please? Then I can send you details of the revisions required to make this work for a custom domain blog, and other small changes which I made to ensure this runs more smoothly. I was unable to find any email contact details for you :)
Thank you for allowing me to write about this. I would certainly include a link back here and also to your other post which explains the simpler method of adding as a widget beneath the Blog1 area (which may be much easier for those who are shy of customizing their actual template code!).
I will write this up over the weekend and hope this will bring you much traffic as you surely deserve this for your efforts!
Best wishes,
Amanda
on August 8, 2008 at 5:07 PM
Thanks again rias your hack succesfull installed in my blog.
Best Regards
on August 8, 2008 at 6:30 PM
@ Subagya ,
You are welcome dude . Very soon I am going to publish 3 Blogger Templates ripped from Wordpress.
regards ,
Blogger Accessories
on August 8, 2008 at 10:34 PM
Salam!
You have nice blog and super hacks of blogger. I am exactly looking for this since I am blogging. I am happy to install successfully in my blog. I have a one problem on it. I set to 4 post each page. when I click one of label, except showing 4 post it shows all post. When I click on page number 2 then i got 4 post but that are of page number 1. I think better to check my blog. And I love nav image of your and I want to do it as yours.
Anyway hope you will help me for this.
Allah HAfiz
on August 9, 2008 at 12:30 AM
walaikum Asalam xphunt3r ,
When you visit Labels Page it will show all posts because you need to modify the Labels widget to show number of posts you want. In my Blog I have edited Labels widget to Show 2 posts per page. I will post this Hack soon in my Blog and If you want CSS for Navigation hack just like me then wait for sometime. Right Now I am modifying my script so I will post the Modified hack with CSS soon.
Sorry for the inconvenience , I will post them soon
Allah Hafiz
on August 9, 2008 at 2:29 AM
i did it thank you very much.
but it cant seem in homepage.
how can i do?
on August 9, 2008 at 10:20 AM
good
on August 9, 2008 at 7:47 PM
Assalamualikum rias,
I have got a trouble with page navigation hack, i use your template (JUMONG THREE COLUMN BLOGGER TEMPLATE), it seem don't shown up in my main page, but if i click labels / categories that page navigation shown up. I look up your blog in main page and your page navigation shown up but in my blog not.
May be you can help me?
and i have try use your page navigation widget, but don't work it in my blog?
Sorry if my english bad, i hope u understand what im try to say.
Thanks
Best Regards
on August 9, 2008 at 10:39 PM
@ Subagya
I implemented this hack in my Jumong Template demo blog. I got no errors , did you made any modification to the Template. Or send me your Template , I will apply the hack and send it to you.
email : mohamedrias1103@gmail.com
regards ,
Blogger Accessories
on August 9, 2008 at 10:43 PM
Hi subagya , I hope you copied my CSS code for Page Navigation Hack. I use different script to suit that css code. Please replace your old script with my new script.
on August 9, 2008 at 11:50 PM
Assalamu Alaikum Mohamed,
I tried your Navigation on my custom template but unfortunately it doesn't work with both of your methods.
Also, how do I get the orange navigation that you have?
on August 10, 2008 at 5:22 AM
Walaikum Asalam Yresy ,
Please tell me what template you are using . Then I will be able to tell What changes you should do in the script. Or send me the template to mohamedrias1103@gmail.com , after implementing that hack I will send it to you
regards ,
Blogger Accessories
on August 10, 2008 at 8:28 PM
Assalamulaikum rias,
Thanks very much for you attention , yes i modification your template ( i hope you dont be a mad), now the pagination hack work in my blog, because my mistake i did't copied your css full code.
And it use your page navigation orange i hope you aggred with it.
Thanks again
Wassalam
on August 10, 2008 at 8:43 PM
And Rias , With your permission i would like to translate your hack to indonesian language, i hope you agree with it. im waiting for your permisision.
Thanks
on August 10, 2008 at 9:31 PM
Hi Subagya ,
Yes you can translate this hack to your language.
regards ,
Mohamed Rias
on August 10, 2008 at 11:35 PM
Hi Mohamed !
I sent to you my problem
Please check mail and help me fix that problem
Thank you !
on August 11, 2008 at 12:34 AM
Hi NTT ,
I received your email and I successfully installed related Posts widget ,page Navigation Widget and also " Show author comments in different style" hack. But the page navigation widget I am having in my blog right now suits only White background. So I need to create images to suit your dark iphone template. So please be patient I will create and send. or Please use the default page navigation widget CSS style. After I create a different CSS style , you can implement that hack .
regards ,
Blogger Accessories
on August 11, 2008 at 6:14 AM
Thanks Mohamed
but can you fix below problem ?
with :
var pageCount = 2;
var displayPageNum = 3;
first pages : http://img291.imageshack.us/img291/1117/88945917tl2.jpg
when I choose number page "3" then :http://img84.imageshack.us/img84/7382/63486291gm6.jpg
choose number page "4" then :http://img353.imageshack.us/img353/7661/26199285ny9.jpg
help me .thanks .
on August 11, 2008 at 7:47 AM
Hi NTT ,
Thanks for bringing this error to my notification. Now i have updated my Script , so please replace the old script with the new script.
Your Template is almost ready , But I am not able to find some Comment Code. If you want comments CSS of my style tell me , I will replace the Comment CSS and Div section to my template form.
regards ,
Blogger Accessories
on August 11, 2008 at 11:17 AM
beautiful.. thx... :)
on August 11, 2008 at 1:10 PM
Assalamualaikum rias
I have translate your page navigation hack in indonesian languange and i don't forget in my post to link your blog :). I hope you can give me permission to translate your another hack :D. Thanks for you Extra Effort to publish blogger hack (its really great blogger hack!!). And can't wait to see :D > Keep Post Mohamed
Wassalam
on August 11, 2008 at 7:44 PM
Hi subagya ,
Thanks for translating this hack to your regional language. Please replace that script with the script in my post. Because that old script contains an error. NTT told me with images. So i edited the scripts and the script in my post is updated one.
regards,
Blogger Accessories
on August 11, 2008 at 10:55 PM
THANK YOU, MOHAMED
You're No.1
your hack very cool
But I have a suggest :
1. "first page BUTTON" and "last page BUTTON"
2. Overcome state "var displayPageNum" not exactly .
for example :displayPageNum=3 then only 3 pages appear . at the moment not 3
Sorry if my english bad
thanks .
on August 11, 2008 at 11:04 PM
Hi NTT ,
Yes , you are right. I had those first page button and last page button in my unedited script. If you want that i can send you that to your email.
regards,
Blogger Accessories
on August 11, 2008 at 11:16 PM
and this problem :
if in a day I post many posts (ex. 50posts/a day) then have many button (number page)the same link
ex: http://www.khonggian-it.com/search/label/TIN%20TUC?updated-max=2008-08-07T00%3A00%3A00%2B08%3A00&max-results=8
the button :4,5,6 same link,
result when click any numberpage in that string the same link then it's always go to last numberpage in that string the same link.
in example above, when i click numberpage 4 then it's go to numberpage 6 .
please fix this problem .thanks.
on August 11, 2008 at 11:49 PM
Yes, please send me that script
thanhroe@gmail.com
thank you .
on August 12, 2008 at 7:27 PM
Mohamed and Amanda, you are my idols.. :))
I'd like yr permission (I'll also ask to Amanda ) to translate this for my readers in portuguese, of course linking you back.
Tks very much!!
on August 12, 2008 at 7:37 PM
Hi RO ,
Yes you can translate this hack to Portuguese. If you need any help ask us.
regards,
Blogger Accessories
on August 12, 2008 at 10:42 PM
Would it be possible to show a specific number of pages without using the widget but by having modified the html code ?
would it be possible to do for instance :
Page 1 : 5 posts
Page 2 : 3 posts
Page 3 : 7 posts
how would it run ?
Thanks a lot (and sorry for my poor english level)
on August 13, 2008 at 12:09 AM
hi Touriste ,
Thanks for your suggestions .I will check whether I can do that. If I am able to succeed , then I will publish that new version of Page Navigation Hack soon.
regards,
Blogger Accessories
on August 13, 2008 at 9:08 AM
I would add an other question for the futur "template" :
Would it be possible to publish the posts without following a chronologic order and without changing the date of the post in the options ?
To explain it in an other way : Would it be possible to choose the page of a post and the precise place on this same page ?
on August 13, 2008 at 10:27 AM
Hi Mohamed! Tks for yr comment at my page. I published again the script, this time in a attachment file once it's easier for the readers to view it and copy it. Pls let me know if everything is okay now.
Brazilian Ricardo Santos has noticed that some posts are missed or repeated in some pages. (pls see his comment in Blogger Buster). I'm experimenting this problem at my blog. Do you think it's possible to fix this?
Tks again the great hack.
on August 13, 2008 at 10:36 AM
Yups, i have update you script in my post.
Keep post bro..
wassalam
on August 13, 2008 at 3:46 PM
For some unknown reason it's not shown in my blog! :(
http://daysofrashed.blogspot.com/
on August 13, 2008 at 3:50 PM
Assalamu Alaikum Mohammed,
I e-mailed you in your Gmail about the Dark iPhone template for my website. Did you make the hacks for that? I think maybe you e-mailed but I accidentally deleted your e-mail. I emailed you on your Gmail. Please check! Thanks.
on August 14, 2008 at 10:18 AM
Is this css :
http://blog.tafticht.com/2007/10/01/tutorial-de-creation-dune-barre-de-pagination-tout-en-css-avec-15-exemples/
could run in blogger thanks to this html code :
http://www.phpcs.com/codes/PAGINATION-AUTOMATIQUE-APPEL-FONCTIONS-PHP_39392.aspx
on August 14, 2008 at 10:34 AM
Hi Touriste ,
We can have that CSS styling to this Page navigation Hack. I am working on this only. Within Next week I will post some best CSS codes for this Page Navigation hack. I also fixed some bugs . Will update the post next week.
regards,
Blogger Accessories
on August 14, 2008 at 8:02 PM
thanks man..u r the savior
on August 14, 2008 at 10:22 PM
Dear Mohamed Rias
I waiting for you insert "back button", "first button" and "last button" into above script .
thanhroe@gmail.com
thanks .
on August 15, 2008 at 6:17 AM
Hi Mohamed !
I sent to you my problem
Please check mail and help me fix that problem if you can .... please
Thank you !
on August 15, 2008 at 2:03 PM
It functioned perfectly. if possible disponibilize yours code with images. Greetings
Balbino de Araujo
on August 18, 2008 at 12:15 PM
Mohamed, i have one problem, i put this code in my blog, but, there are some post "lost", i dont know why?, can you help me please?
on August 18, 2008 at 9:42 PM
hi buddy.. is this the updated hack or the same old hack..
on August 19, 2008 at 5:43 PM
Thanks M.Rias..
I found it really worked..
Very useful...
on August 22, 2008 at 3:48 AM
thanks yes good share
on August 22, 2008 at 9:47 PM
on August 26, 2008 at 1:54 PM
CSS not Work, pagination OK
pliss...
HELP
on August 26, 2008 at 7:02 PM
Hi SJM ,
Please tell me which template you are using . If possible send me ur template to my email mohamedrias1103@gmail.com i will add this Page navigation hack in your blog.
regards,
Blogger Accessories
on August 26, 2008 at 11:56 PM
I love this feature! However for Labels with spaces (%20) or non-English characters, I found the page numbers failing to show on Safari on Mac, allowing no access to articles on older pages of a Label.
on August 27, 2008 at 11:12 PM
Hi, can I send u my templete and u could add this page navigation in my blog ? I was trying to add but no changes, thought
on August 28, 2008 at 7:04 PM
Hi Soulmate ,
Yes send me your template to my email id.
regards,
Blogger Accessories
on August 30, 2008 at 8:07 AM
The code above was shown to me as & lt not "<". So copying the code above will result to no changes at all. Mohamed i hope you can solve this issue. Thanks.
Charles of Money Making and Blogging Tips
on August 30, 2008 at 7:05 PM
Hi Pals ,
Please make sure you have done all correctly first. Because only few got errors in adding this hack. If you want i can add this hack for you . Send your template to my email.
regards,
Blogger Accessories
on August 30, 2008 at 11:51 PM
waks?
difficult-nyaa... T.T
on September 1, 2008 at 5:25 AM
hi Dewi Kharisma M. ,
i don't understand what you mean ?
If you have any problem adding this , please let me know ( mailto:mohamedrias1103@gmail.com)
on September 1, 2008 at 5:47 AM
Hi Mohamed,
I guess my site belonged to the 0.001 cases that did not work. But with your persistent offline support you made it work! Thanks a lot and if there is any way I can return the favor please let me know! www.mds2009.com.
John Evers
on September 1, 2008 at 4:26 PM
hi mohamed,
i have a blog that is hosted on my own server with a custom template. www.kabe243.com/blog any idea if it is possible to make a pagination for it like you did here?
thanks - kabe
on September 1, 2008 at 7:00 PM
Hi Kabe243 ,
For those who use custom domain we need to change the script.
find this line in the script :
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
replace the above line with the following line
var isFirstPage = thisUrl.substring(thisUrl.length-10,thisUrl.length)==".com/blog/";
Now everything must be fine.
If you still have problem , please send your template to my email id mohamedrias1103@gmail.com . I will add this hack and then i will send you back.
regards,
Blogger accessories
on September 4, 2008 at 2:29 AM
Hi Mohamed I have a problem on displaying the page navigation hack on my blog....
Can you make it for Me?
I'll will sent you my template to your email!
on September 6, 2008 at 1:31 AM
Salam Mohamed Rias !
I have successfully installed this hack and it looks good . One thing I would like to ask is that on every page , right below the page navigation buttons there is text which says "Subscribe to: Post Comments (Atom)" . How to get rid of this text / link ? as it is making the buttons look odd .
on September 7, 2008 at 8:47 AM
i did it.. but doesnt appear anything :(
on September 11, 2008 at 1:35 PM
I Have problem with more than 500 posts on my blog :(
My Blog: 627 posts, and I set var pageCount = 5; ( 5 posts displayed on each page ) , But It show only 100 pages(=500post)...
there is this problem? -->
"/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999"
Please help me...
on September 14, 2008 at 9:31 AM
it not work in my blog..
i already set pagecount=2.
its mean my 1page show 2 post.
but it show all post.
but when i open pages 2 it can show 2 post
how my 1 page show all post?
did i miss something
on September 15, 2008 at 9:53 AM
Hi sharksuke ,
Welcome to Blogger Accessories. Please go to settings section of your blog. Then navigate to " Formatting ". There please change the number of posts to be shown on home page = Page count.
if still the problem persists , then please mail me mohamedrias1103@gmail.com
regards,
Blogger Accessories
on September 15, 2008 at 10:05 AM
Walaikum Salam Kashif ,
Go to Layout section of your Blog , then navigate to EDIT html subtab. put a check in Expand widgets box. Then search this text
<b:include name='feedLinks'/>
remove that line.
Hereafter subscribe to posts link won't appear.
regards
Blogger Accessories
on September 15, 2008 at 10:07 AM
@ Mr.Sim ,
Please change the number (2) to your wish in your Blog.
var pageCount = 2;
regards,
Blogger Accessories
on September 15, 2008 at 10:13 AM
Salam Alaikum iEn ,
You are using custom domain muncet.com
To implement this hack in your blog , you need to make some modifications.
in the script search this line
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
Change it to
var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==".com/";
that's it now the Page Navigation Hack will appear in your Blog.
Please change the css code to suit your template.
regards,
Blogger Accessories
on September 19, 2008 at 3:08 PM
nice i will wait for widget
on September 21, 2008 at 12:26 AM
Hi Paranoid ,
I already posted a article on this " Adding Page navigation hack like a widget"
check here
http://rias-techno-wizard.blogspot.com/2008/07/page-navigation-menu-widget-for-blogger.html
regards,
Blogger Accessories
on September 24, 2008 at 4:02 PM
hello ...I successfully installed in my blog...
but the problem is that all the page numbers don't have space..they are so closed.
help me in this regard...
http://tehno-plex.blogspot.com
on October 4, 2008 at 4:20 AM
cant install this on web 2.0 template
see my blog http://fungage.blogspot.com download movies games for free
on October 4, 2008 at 6:57 AM
dear mohammad
in my blog the pagination doesnt work properly
plz chk it out .........my blog
www.gamespump.blogspot.com
when i press on page 2 it goes to some other page like 21 in mine.....
plz i liked ya hack and thus applied it but plz fix it nwo as it is not working properly
thanks in advance..............
on October 5, 2008 at 5:21 AM
Hi dude,
I got installed the code in the blog template....able to see the page numbers. However, when i select the categories, i am not able to see the page navigation and also only 20 posts though i got more....cud plz chk.????
http://idledownloads.blogspot.com
on October 5, 2008 at 7:10 AM
Excellent Widget
I just implemented it on my blog:
Ebooks Catalog
on October 5, 2008 at 11:26 AM
Hello my friend i just installed this in my blog but i have problems in my categories.for example in one category i have made 24 post ,i see 20 and all is in the first page the other 3 pages has the same posts,thanks in advance
on October 8, 2008 at 12:03 PM
Installed this on my blog but the numbered page links do not appear on the main page - only on the older pages.
on October 9, 2008 at 11:57 PM
Hi Rias,, I installed the codes.. but then also.. I am nt able to see the navigation widget...
on October 10, 2008 at 9:55 PM
seee mine http://fungage.blogspot.com
on October 11, 2008 at 10:36 PM
hello! how can i put picture avatar like your blog!
on October 12, 2008 at 6:04 AM
heeeeeeeeeeeey, iam very happy, its working in my blog thanq for help...
this is my blog http://audiovideolinks.blogspot.com/
on October 14, 2008 at 8:12 AM
thanks its not working for me http://funaxe.blogspot.com
on October 15, 2008 at 1:14 AM
Hello, This is a Really Nice Hack..
How Have You Highlighted The Author Comments ??..
And the Follow Up Comments
on October 15, 2008 at 7:46 PM
Hey mohamed,I am freaking out with this code,can't get it to work,it just doesn't appear.Please send me an e-mail in order to get this to work.Pleaaaaaaaasse!!!!
gaunt.les@hotmail.com
THX a lot!!!!!!!!
on October 19, 2008 at 8:25 AM
Does this work in Classic blogger??
on October 19, 2008 at 10:13 PM
Dear Mohamed Rias
My blog has a custom domain,how can I use this hack
on October 20, 2008 at 9:46 AM
Dear Mohamed,
can i ask for some help on how to do this hack for old blogger with such variables:
<$BlogItemNumber$>, <$BlogItemUrl$>, ... etc
not the new blogger codes.
on October 24, 2008 at 1:56 AM
hi mohamed -
this hack is awesome. it works for most of my templates, but for some reason, will NOT work on 3 column templates that I am trying to use.
do you think that the hack just isnt compatible with some of the templates?
do you think I have too many widgets/styles?
I cant figure it out, and I think I am doing it right.
Any help is appreciated.
http://themackenzyproject.blogspot.com/
on October 27, 2008 at 12:01 PM
Hi mackenzy,
I think this hack does not show on your blog because you use a modified template.
This hack use a div name "blog-pager" to put the page numbers inside that div tag.
As I viewed your page source, I didn't see any such div tag. It might be have been removed or changed from your template.
Please visit my blog, I have a new post mentioning this problem.
http://www.hajunik.com/2008/10/page-navigation-hack-for-blogger.html
on October 28, 2008 at 10:28 PM
Hi Mohamed,
Thanks for this hack, it's very useful! But, I found that this doesn't work around when in search results page. Instead of the numbers, the normal next/prev links appear. Can you do some fix on the hack or at least provide an additional code on the javascript to make it work around on the search results page? By the way, great blog you have ^^
on October 28, 2008 at 11:23 PM
Hi Mohammed,
I am unable to use this trick in my Blog
http://hclabs.blogspot.com/
can you please fix this ?
waiting for Your reply!!!
cc0990@gmail.com
on October 30, 2008 at 1:21 PM
Have u ever realized that it seens to have a smal count error? When o move from de inciatial page, to the second, it miss a post (the first in the second page)
by the way! Why dont u use this hack in your (this) blog?? :D
even so ... thz for the great jog ...
on November 2, 2008 at 12:13 AM
BUG
Day-1 = 10 post
Day-2 = 20 post
var pageCount = 5;
When we click on Page 2, it should be shows post #6 from Day-1.
But when we click on Page 2, this Nav Hack will shows post #1 from Day-2.
The post #6 through post 10 from Day-1 will dissapear and never shows.
Please fix the bug.
on November 2, 2008 at 12:29 AM
BEWARE: BUG CONTAIN
Day-1 = 10 post
Day-2 = 8 post
Day-3 = 10 post
var pageCount = 5;
This Nav Hack will make post#6 - post#10 on Day-1, post#6 - post#8 on Day-2, and post#6 through post#10 on Day-3 will dissapear and never shows.
Because when we click on Page 2 with this Nav Hack, it will shows post #1 on Day-2 (where it should be shows post#6 - post#10 on Day-1).
And when we click on Page 3 with this Nav Hack, it will only shows post#1 - post#5 on Day-3.
The BUG is on:
http://bug.blogspot.com/search?updated-max=2008-10-31T00%3A00%3A00%2B08%3A00&max-results=20
Please fix the bug.
on November 3, 2008 at 4:08 AM
Wow! A lot of thanks to you Sir! This hack works in my blogsite... I hope you keep posting valuable post like this....
http://krkeans2001.blogspot.com
on November 4, 2008 at 9:19 PM
my blog template use a blogger classic template, hot to work ???
on November 12, 2008 at 6:01 AM
nice hack
blogger-godown.blogspot.com
on November 14, 2008 at 6:35 AM
hi mohamed .. so pleased to use your great hacks !
this hack work fine for me
but i need to remove this (Page 1 of 2: )like you did and keep viewing just pages numbers and navigation butons .. have you any idea ?
thanks
on November 28, 2008 at 4:31 AM
i am using a true eligance template by Hajunik.com. In template the page navigation hack is installed but there is some problem in this. I have 10 posts in my blog and i show 7 posts on each page. The problem is that when i click on page 2 it show the 10th number post. It doesn't the show the post number 8 and 9. Please solve the problem....
http://animation-tutorials-links.blogspot.com/
on November 29, 2008 at 9:51 AM
I was trying to use this pagination. But some error show:
Element type "htmlMap.length" must be followed by either attribute specifications, ">" or "/>".
What is the problem?
on December 11, 2008 at 11:12 AM
Unfortunately, it doesnt working in my blog!!!I ve been trying many ways to do, but nothing can help me!!!:(((
on December 12, 2008 at 11:09 AM
Hi Mohammed! Thx for yr xtra ordinary blog hack..its works on ma blog...but i wana put this navigation bar at the bottom of ma site...can yo plz tell me how can i put it at the bottom(now its on the top) of ma site?
Thx a lot.
on December 13, 2008 at 4:18 AM
on December 13, 2008 at 2:17 PM
Hi Mohamed,
Can you share the code that you are using, including those image to me.
Please send it to shiro001money@gmail.com
Thanks
on December 19, 2008 at 3:07 AM
Salam Rias,
Mohon izin nak masukkan hack ni dalam blog aku (alih bahasa ke bahasa melayu) http://panduanpemblog.blogspot.com/
Ada masalah sikit dengan feeder punya link dalam blog aku.
Terima kasih banyak.
on December 19, 2008 at 6:49 AM
It doesn't work at all with my blog, sad.
----
http://professionallab.blogspot.com
on December 19, 2008 at 7:51 PM
It doesn't work for me either- I've tried yours and the one on Blog Buster. Nothing shows except what was there in the first place, i.e. older, newer, etc. Thanks anyway.
on December 24, 2008 at 6:52 PM
It is working well for me! Thanks for sharing !
Btw,is there any choices of the style?
on December 26, 2008 at 1:10 AM
Hiiii
I tried both of ur methods.This widget tpye and the other one direct by editing blogger template.I did everything the way u said but still its not working.I dont know what the problem is.Any help would be appreciated.
http://avinashtech.com
on December 27, 2008 at 2:48 AM
Hey, how do I insert this with Blogger Classic Template?
on December 31, 2008 at 11:44 AM
not function for me 2
on December 31, 2008 at 7:18 PM
still not function for me
on December 31, 2008 at 9:22 PM
now, it does not even work with custom domain .com
on January 1, 2009 at 9:36 PM
Greate!. it works at me. But i am worried about the ping result of my blog.Because after adding these long codes ,my blog started to open slower.May it is not too required. Yes ping respond is not good after this.
on January 5, 2009 at 3:03 PM
i do never use css like that it still confusing for me..:)peace bro
on January 7, 2009 at 5:42 AM
I can't find the "b:section class='main' id='main' showaddelement='yes'" in the blog that I want this in, it's weird because my other blogs has this line... could anyone help me out? here's the blog i want this in but unfortunately have trouble installing it on. http://www.whats-up.co.cc
on January 14, 2009 at 11:19 AM
on January 14, 2009 at 11:28 AM
I deleted the last reply, because the problem got solved. :-))
Great stuff, thank you, rias.
on January 21, 2009 at 8:36 AM
Great Tips..
Shafar
on January 21, 2009 at 12:40 PM
Hi Rias,
When I clicked the 2nd page, the showed posts don't seem right to me, some posts are just not there....I have 3 posts per page, and on the 2nd page, I would expect the 4th at the beginning, but somehow it's not there....please help!
Thank you!
on January 22, 2009 at 4:24 AM
Not able to get it working on my site.
on January 22, 2009 at 7:42 AM
Hallo...
how do u do?
Why this trick can't work with my template?
on January 23, 2009 at 10:30 PM
Mohamed, thank you very much for the beautiful work. I have implemeted it in one of my blogs:
http://evaldolima.blogspot.com/
Hope you don't mind, but I used your CSS style and images on it too.
Best regards from Brazil!
on January 24, 2009 at 8:51 PM
plz chk ....i have many b section plz tell me where to paste the second code......
Gamespump
on January 28, 2009 at 12:19 AM
It's not showing any navigation on my main page please help.
http://www.dlcomplete.com
on January 28, 2009 at 6:13 PM
Hi there.
I don't know if you really read your comments and I also don't know if anyone has pointed this out already.
I think I know the reason why people have problems with this hack. It might not work for some people (as it didn't for me) mainly because of the timestamp on the page links.
As you probably know all the blogger posts have a time and date. With this hack you just ignore the time of the last post on the page and use only the date for sorting thins out. What happens is that if people post more than once a day, some posts might get lost in that process.
My suggestion (at least it worked for me) is changing the "timestamp" variable to use more than only 10 characters of the "post.published.$t" string.
In my case I had to use : var timestamp = post.published.$t.substr(0,19) + 'Z';
I think it depends on what you have in your blog settings, though.
Hope I could be of assistance to someone!
on January 29, 2009 at 8:13 AM
incredible awesome script !!
thanx so much Mohamed :)
wish Success for you brother :)
on January 30, 2009 at 7:50 AM
Hmm... It works, but it does'nt lokk anything like the image above. ???
http://brainchild-vonbix.blogspot.com/
on February 2, 2009 at 6:29 AM
Hello is possible modify this hack for work with this new system pagination?
http://og5.net/christoph/article/A_better_Pagination
on February 9, 2009 at 11:26 AM
Hey i m trying but not being for more than 3 times please help me sudeep0112@gmail.com
on February 11, 2009 at 10:49 AM
mohamed man plz help me i have a blog but dis trick doent worked on it plzz contact me at dil_ka_mamla_in_2012@yahoo.com plz plz plz i need ur help thnx in advance
on February 12, 2009 at 3:12 AM
muhmmad please contact with me ill send you my template i try it lot of time but cant get sucess
please can you help me :( :( :(
on February 13, 2009 at 4:18 AM
hey muhammad, i need help too. it doesn't work on mine. if u not busy, please contact me. i send u the template
on February 14, 2009 at 12:02 AM
Hai Brother iam very sad today because iam didnt know what can i do. for the blogger template iam running the blog named moretelugu-www.moretelugu.blogspot.com.unfortunately ihave changed my blogger template then i wanna tried to change another template it cames as header1 cannot remove ihave tried more times on more systems but no result so ihave desided to classic template.now how can i change another template to my blogger please help me\.iwill very thankful to you.
on March 1, 2009 at 5:00 PM
Not really working well the numbers get messed up
and i really mad i waster hours on changing code still nothing -.- please HELPPPP!!!
http://3dmx.blogspot.com/
on March 4, 2009 at 10:13 AM
hi need little help
works kool
but can u
amend litle code for me
I want to remove tag "Previous" in navigation bar
eg
Page 18 of 126: First Previous 16 17 18 19 20 Next Last
Mail at pro357a@gmail.com
thanks in advance..
on March 4, 2009 at 2:59 PM
Please fix it... It doesn't work!!!! It's doesn't show anything!
on March 4, 2009 at 8:14 PM
when you will post this script bugs free.. it has lot of bug it skips post and it looks ugly..your look beautiful why dont you share that with us are u afraid..dont mind plz..
on March 19, 2009 at 4:52 PM
its Not Working ...............
on March 21, 2009 at 12:44 AM
mmm..nice nifo...but if i post more than 7 in a day and i click page 2 icon,it will go to page 3 ...
on March 25, 2009 at 6:41 AM
assalamo alaykom mohamed
jazak allah khayran
thanx alot for the update and for the nice hack but unfortunately it doesn't work correclty ,there are alot of bugs.
for example there many posts in my blog that are not shown and in the labels page there are many duplicates.
please if you can fix this we will be so grateful .
on March 28, 2009 at 4:32 AM
huhuhuhuhu. its not working! but i love to have like this. please help me!
on March 28, 2009 at 11:01 AM
Hmmm, cool idea but every time I try it when I set it up to show 3 possible page number choices it shows 4, if I selst 4, it offers 5. Then page one, home page is fine, but when I select to go to page two it skips several posts. Page 2 shows the posts that should be on page 4-5. Any ideas? Alan
on March 28, 2009 at 12:18 PM
Mohamed. Sad, it is a good code except obviously has bugs and skips many posts for most users. I will have to trmove it now, it seems you are failing to answer posts on this venue. Bummer.
on March 30, 2009 at 9:52 AM
hello mohamed i tried putting this scipt in my blog but not working can u help me??
thanks in advance
on April 4, 2009 at 2:00 AM
Step 3
Did not find in html coding. Please Advice Me how to fine it.
on April 11, 2009 at 7:51 AM
hay mohamed...salamo 3aleko
thats amazing hack but in my blog does not work ..i don't know why..so plz give me some more info about that hack
on April 14, 2009 at 7:45 AM
Hello Riaz, I have a blog which has over 200 pages (http://knight-nirvan.blogspot.com) but the code you provided only provide 63 pages,that is on my blog, it says " Page 1 of 63 ", I want to increase the amount of number pages... that is " 63 " not the number of post to be published on one page.Can you help me??
Your Help will be most appreciated.
Please reply me ....
on April 15, 2009 at 4:09 AM
Hi there. You are doing a lot of great stuff here. I am still trying to figure out a lot of widgets for my blog, including a label cloud widget for blogger. Is it possible, & is it simple to install. Thanks a lot for your time.
on April 20, 2009 at 7:49 AM
Hi Mohamed, I tried your hack using the HTML editor and it doesn't seem to be working. I am quite keen to get a navigation option and would appreciate any help you can provide.
Thanks
Brian
on April 21, 2009 at 8:47 PM
mine is classic template can u send me the code to use in classic template of blogger. please my mail is aaboobacker@ctjv.com
on April 28, 2009 at 7:23 AM
@Debajyoti Das
I will write about that soon frnd
on May 3, 2009 at 10:50 PM
Hi, can u help me with this hack pls..?
I've install everything (follow from blogger buster and compare it with yours) but nothing changed.
Thank bfore
on May 6, 2009 at 9:01 PM
I tried your Navigation on my custom template but unfortunately it doesn't work with both of your methods.
Sorry if my english bad, i hope u understand what im try to say.
And Send E-mail hack
Thanks
on May 13, 2009 at 10:40 AM
there are many useful hack! thank you
on May 13, 2009 at 6:10 PM
@ Oases
Welcome to Techie Blogger. You are welcome frnd..
will post more hacks like this soon..
regards,
Mohamed Rias
on May 15, 2009 at 12:29 PM
this script only works if the blog have a few posts per day.
Probably, the problem is in "T00%3A00%3A00%2B08%3A00" at /search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount
and <script type="text/javascript"> don't works yet. the correct: .<.script type='text/javascript'.>. [remove dots]
on May 16, 2009 at 5:34 AM
Dear Rias,
I'm unable to find the code given at step2 in my blog.
Instead I have this code
{I made some modifications by removing < hope u wil understand the code}{ showaddelement='no'>
b:widget id='HTML7' locked='false' title='Page Navigation' type='HTML'/}
/b:section}
Now please tell wat shud i do to get it done?
Thanx.
on May 19, 2009 at 1:16 AM
hey rias your works are marvellous
http://digitalcurves.blogspot.com/
on May 22, 2009 at 12:14 PM
the script doesnt work
on May 22, 2009 at 6:03 PM
My blog has lost older post, home and newer post that I never touch them. Help me! Page navigation not work with all blog of mine.
on May 25, 2009 at 11:42 PM
Salamu alaykum brother.
baraka alah feek akhi, for the "Page Navigation"
you made .
I really need it in my blog " http://al3arabiya.blogspot.com "
because i have too many postsand the "older post " button is too small
how can i add this code to my blog ?
http://1.bp.blogspot.com/_xn2gmPb9TfM/SKH-nxZqqUI/AAAAAAAACFE/ST-hC4HWp2w/s320-R/page-navigation.jpg
plz help
if there is no chance , plz tell me what is the template could be work with that "page navigation"
baraka alah fik akhi wa jazak allah khayr
.
on June 2, 2009 at 1:19 AM
Really helpful post .
thank you !
on June 4, 2009 at 2:27 AM
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/
on June 11, 2009 at 5:22 PM
Is it possible to change the word "Pages"?
on June 15, 2009 at 11:04 PM
hi i have check but its not working on my blod i have added the script through html also but i has not shown ?
on June 18, 2009 at 6:22 AM
i tried it but it didn't work
says {1}must be terminated by the proper attrib "style"
take a look whether it works in my blog or not
http://torrent-heaven.blogspot.com
on August 17, 2009 at 12:14 PM
Deat sir.
its not working in my blogs. please can u tell de detail about where i have paste coz.while i was pasteing code and saving its cant save. please sir send me mail dahalcm8@gmail.com
Post a Comment