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 += ' <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:
Testing comments...
Thanx It is work
thanks~
it works~!
^^
its working
it's not working on my site, any chance I can get you to take a look?
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
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?
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.
this widget dosent work well it give me wrong time and that give me another page.
What is your blog URL please?
well done, really cool script
appreciate your helps here
Thanks for your kind comments.
This did not work for me, the gadget header is the only thing that shows up.
What is your blog URL please?
Wow, it's perfect and very easy to install. Thanks.
After a lon search i found your solution Thank you it is great!
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?
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...
I have changed the following line so that it also accepts registered URLs
var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==".com/";
Thank You Boss It is Working Visit Now Free Blogger XML Templates Download http://www.blog-xmltemplate.co.cc
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?
sorry boss!!!
this script is not working in my blog...
http://deewanjee.blogspot.com/
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.
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 :$ ...
Great! works very fine
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 !!
Hey Thanks it works! checkout mine
http://trionds.blogspot.com
Thats a Nice tutorial it works
http://www.freshersparadise.com
do visit
for more details
sorry boss!!!
this script is not working in lable category
http://classiccarsphotopedia.blogspot.com
please help me
thanks
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.
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
OMG. this one actually works! Thank you so much
Thanks!! FINALLY one that works :D
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
Thanks it work for me
pcmediks.blogspot.com
thanksss
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
Thanks a lot for your effort - used it on my blog as well. Good job!
THANK YOU VERY VERY MUCH IT WORK PERFECT TO MY BLOG
http://gs318.blogspot.com/
THANK YOU
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
thx useful post ^^
www.top1mx.co.cc
warez4up.blogspot.com
Thanks. Using it in my blog.
thanks for the post dude - its working..
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!
Can anyone help why is it not working on my blog? I have done everything stated and it doesn't work...
it is working . no confliction
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
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
Post a Comment