Blogger Templates

Blogger Templates, Tips and Tricks. We Walk the Talk Blog.

9:57 AM

Blogger Page Number

Posted by Leathergloves on Friday, February 6, 2009



How to add Blogger Page Number:


Login To Your Blogger And Then Click On Settings And Navigate To Layout Section.

Then Click On Add Page Element.





A new Window Will Open in Which Select Add Html/Javascript.
It will ask For Javascript.

Now Copy The Whole Javascript Below And Paste in it.
__________________________________________________________________________

<style>
.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-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=7;
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="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;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://blogger-templates123.blogspot.com">Blogger Widget</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 above code you can find the below written word and can change its value from 7 to the number of posts you show at your main page.

var pageCount = 7;

In my Blog, it is set to 7 as it is the default for blogger posts.

48 comments:

Leathergloves said...

Testing comments...

Channaka Gamunu said...

Thanx It is work

BigHeadAnn said...

thanks~
it works~!
^^

yhub team said...

its working

Tro Kalayjian said...

it's not working on my site, any chance I can get you to take a look?

Recon said...

To execute this script it blow up your site in size of 1 MB and possible more!

See by self:

http://leechermods.blogspot.com/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999

http://tools.pingdom.com/fpt/?url=http://leechermods.blogspot.com//&id=1118876

Leathergloves said...

Hi The Doc

I saw that it is working already. Perhaps you may like to share with us the problem you faced and any modifications you did please?

Recon said...

it calculate by postcounting the number of sites. Using it on a blog with 1000+ entries and or more than 50 sites (100++) the script source get near 1mb in size and more. Thats simply to much for this function and slow the page load extreme down.
I reduced the query to 199 = ~400 kb script size.
/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=199

by entering direct the url of the script in firefox and download the source, properties, you see the file size which execute each time a visitor enter your website.

for example

http://leechermods.blogspot.com/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999

some online tools to mess website performance and speed show the element size of each script and source, test your website:
http://tools.pingdom.com/

Maybe someone can found a more lite solution to count on post the page numbers instead of list all posts inside a script by blogspot.

The script is suitable by blogs with less than 500 posts.

aXXo said...

this widget dosent work well it give me wrong time and that give me another page.

Leathergloves said...

What is your blog URL please?

SyaifulHS said...

well done, really cool script
appreciate your helps here

Leathergloves said...

Thanks for your kind comments.

JT said...

This did not work for me, the gadget header is the only thing that shows up.

Leathergloves said...

What is your blog URL please?

Anonymous said...

Wow, it's perfect and very easy to install. Thanks.

Unknown said...

After a lon search i found your solution Thank you it is great!

Leathergloves said...

To Anu and pupufcu

Great you found my website useful. I implement them as I showed you for more credentials. We Walk the Talk Blog.

To JT, what is your URL?

Lily Norliza said...

The page number does not appear on my first page, appears only on the second page...and then my second page is counted as the first page...

Leathergloves said...

I have changed the following line so that it also accepts registered URLs

var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==".com/";

Unknown said...

Thank You Boss It is Working Visit Now Free Blogger XML Templates Download http://www.blog-xmltemplate.co.cc

Tinj said...

For some reason when I click on page 2 it shows the last two posts from page one before the first post on page 2. Is there anyway to fix this?

Kamran Khan said...

sorry boss!!!
this script is not working in my blog...
http://deewanjee.blogspot.com/

Leathergloves said...

To Just Crank-it:
Please set your var pageCount=10; as you have 10 posts/page. You need to change the code when you change the maximum posts per page in future.

To bdkminang:
Please tell me your error mesage or the symptoms in order for me to help you. I suspect yours may be the same as Just Crank-it. Yours is 5 pages.

To Dewanjee:
Please tell me your error mesage or the symptoms.

Lily Norliza said...

Just got the time to reinstall the code inside my blog. It seems working now! Thanks a lot. However there's one tiny problem...my background is black, I don't know how to change the color of text "Page X of X+Y" into other color than black so it is visible inside the textbox :$ ...

Anonymous said...

Great! works very fine

everydayusefulinformation said...

This script works very well on my site:
wallpaperz4iphone.blogspot.com

But there is a small problem. When i try to check the posts with label "APPLE" it shows me that there are a total of 9 posts and there are total 4 pages shown at the bottom, but when i click on next page (while i am on page 1) it straight ways jumps to page number 4 and says there are no more posts to show.

I have set the pagecount variable to "2". If i increase to 7, there are no page numbers display on the label "APPLE"

Please help me on this.
Thanks in advance !!

Ivneet Singh said...

Hey Thanks it works! checkout mine
http://trionds.blogspot.com

Unknown said...

Thats a Nice tutorial it works
http://www.freshersparadise.com

do visit

for more details

mas_ood said...

sorry boss!!!
this script is not working in lable category
http://classiccarsphotopedia.blogspot.com
please help me
thanks

Leathergloves said...

It seems that this code is not designed to cater to the label category in the first place. Give me some time to see how to modify the code.

To Great Ideas:
.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;
}

I suggest change the color: #FFFFFF. I need to test.

Lily Norliza said...

Hi, I've tried but the background for the total page number textbox is still black. The changes to white color only effect the other page number that I'm not currently in. TQ...btw previously I commented as Great Ideas. TQ

Anonymous said...

OMG. this one actually works! Thank you so much

Jane H. Johansen @veganmisjonen.com said...

Thanks!! FINALLY one that works :D

Unknown said...

for some reason it doesn't work for me, only shows up the blog dashboard panel (floating on top of the blog) which i had hidden :(

lulusayshi.blogspot.com

Noob said...

Thanks it work for me

pcmediks.blogspot.com

Nto said...

thanksss

Nube Wanabe said...

i have edited the first code to abolish the black background numbers some code missing i include the background color


change this:
________________________

.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;
}


into this:
__________________________

.showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px;
}
.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
background-color: #FFFFFF;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}


_____________________

thanks for the great effort this is the only code that works for my site! very very cool
uploadingtips.co.cc

Anga said...

Thanks a lot for your effort - used it on my blog as well. Good job!

GEORGEPER said...

THANK YOU VERY VERY MUCH IT WORK PERFECT TO MY BLOG

http://gs318.blogspot.com/

THANK YOU

GEORGEPER said...

iI HAVE A QUESTION FOR THE ADMIN HEREWHICH IS --HOW CAN I PUT THE SAME GADGET AT THE TOP OF MY POSTS???

IF YOU HAVE or FIND AN ANSWER PLEASE INFORM ME TO THIS E-MAIL

GEORGESALON@FREEMAIL.GR

THANK YOU FOR EVERYTHING

Anonymous said...

thx useful post ^^

www.top1mx.co.cc
warez4up.blogspot.com

ak said...

Thanks. Using it in my blog.

Sanju said...

thanks for the post dude - its working..

Y.K said...

it doesn't work for me I have done everything that was said however it just doesn't work. Is there anything I can try to make it work? Thank You in advance!

Y.K said...

Can anyone help why is it not working on my blog? I have done everything stated and it doesn't work...

nadiasilver said...

it is working . no confliction

kiki hiller said...

hello. hm, i've read through all comments - and in between even implied your tutorial: Hide Nav Bar in Blogger - THANKS FOR THAT! - but i cannot get the "page#" widget to work via the javascript/html gadget... can you help? THANKS

Leathergloves said...

Tschikki

Your page posts have to be more than one page for it to work, i.e. you must be "older post" coming for your blog.

I saw you have only 6 posts and I suspect yours is set to default 7 posts per page.

See related comments

Copyright © 2024 Blogger Templates 123. All rights reserved.

Home | About | Contact | Privacy Policy | Disclaimer