Page Navigation Hack for Blogger – bugs fixed

17. Oct, 2009 16 Comments

The most awaited Page navigation script with bugs fixed is released. I have received lots of comments on the bugs of Page navigation hack. Although I was busy with my studies , I do spent sometime in fixing the errors. But i was not successful in fixing the errors of Page Navigation hack. It’s Abu Farhan, a fella blogger, who has fixed the errors and made this wonderful page navigation hack available to blogger once again. So blogger is no longer going to be bad when compared to Wordpress. Still more features to come , now I invite other coders and developers to create more features which are available to only wordpress before. Without making much fuzz i would like to present you the code.

31 page navigation Page Navigation Hack for Blogger bugs fixed

Regarding Installation you can follow any of the two methods mentioned here :

Installation instructions

Since blogger doesn’t support uploading javascript files it becomes very difficult to add huge codes like below. This will certainly increase your site loading time. So i have included the JavaScript to my own server. Just add the following code to your blogger template.

Go to layout section of your blog and then navigate to EDIT HTML subtab.

There search for </head> tag. Add the following code immediately above it.

Now save your template. You have successfully added the code for page navigation hack for Blogger.

Modified Code

If you want to add the code manually then do the following steps.

Go to layout section of your blog and then navigate to EDIT HTML subtab.

There search for </head> tag. Add the following code immediately above it.

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

Now add the following code immediately above </body> .

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= &#39;&#39;;
var upPageHtml =&#39;&#39;;
var downPageHtml =&#39;&#39;;

htmlMap[htmlMap.length]=&#39;/&#39;;
postNum++;

for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) {

var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);
var title = post.title.$t;
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = &#39;/search?updated-max=&#39;+timestamp+&#39;&amp;max-results=&#39;+pageCount;

}

var banyaknomer = htmlMap.length;
if (json.feed.entry.length % pageCount == 0){
var banyaknomer = htmlMap.length -1 ;
postNum=postNum-1;
};

for(var p =0;p&lt; banyaknomer;p++){
if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
if(fFlag ==0 &amp;&amp; p == thisNum-2){
if(thisNum==2){
upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}else{
upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}

fFlag++;
}

if(p==(thisNum-1)){
html += &#39;&lt;span class=&quot;showpagePoint&quot;&gt;&#39;+thisNum+&#39;&lt;/span&gt;&#39;;
}else{
if(p==0){
html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/&quot;&gt;1&lt;/a&gt;&lt;/span&gt;&#39;;

}else{
html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ (p+1) +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}
}

if(eFlag ==0 &amp;&amp; p == thisNum){
downPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ downPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
eFlag++;
}
}
}

if(thisNum&gt;1){
html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
}

html = &#39;&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;COLOR: #000;&quot; class=&quot;showpageOf&quot;&gt; Pages (&#39;+(postNum-1)+&#39;)&lt;/span&gt;&#39;+html;

if(thisNum&lt;(postNum-1)){
html += downPageHtml;
}

if(postNum==1) postNum++;
html += &#39;&lt;/div&gt;&#39;;

var pageArea = document.getElementsByName(&quot;pageArea&quot;);
var blogPager = document.getElementById(&quot;blog-pager&quot;);

if(postNum &lt;= 2){
html =&#39;&#39;;
}

for(var p =0;p&lt; pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&amp;&amp;pageArea.length&gt;0){
html =&#39;&#39;;
}

if(blogPager){
blogPager.innerHTML = html;
}

}

function showpageCount2(json) {

var thisUrl = home_page_url;
var htmlMap = new Array();
var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.length) : &quot;&quot;;
thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ? thisLable.substr(0,thisLable.indexOf(&quot;?&quot;)) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= &#39;&#39;;
var upPageHtml =&#39;&#39;;
var downPageHtml =&#39;&#39;;

var labelHtml = &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/search/label/&#39;+thisLable+&#39;?&amp;max-results=&#39;+pageCount+&#39;&quot;&gt;&#39;;
var thisUrl = home_page_url;

htmlMap[htmlMap.length]=labelHtml;
postNum++;

for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) {
var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);

var title = post.title.$t;

if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!=&#39;&#39;) postNum++;
htmlMap[htmlMap.length] = &#39;/search/label/&#39;+thisLable+&#39;?updated-max=&#39;+timestamp+&#39;&amp;max-results=&#39;+pageCount;

itemCount++;
}

var banyaknomer = htmlMap.length;
if (json.feed.entry.length % pageCount == 0){
var banyaknomer = htmlMap.length -1 ;
postNum=postNum-1;
};

for(var p =0;p&lt; banyaknomer;p++){
if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
if(fFlag ==0 &amp;&amp; p == thisNum-2){
if(thisNum==2){
upPageHtml = labelHtml + upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}else{
upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}

fFlag++;
}

if(p==(thisNum-1)){
html += &#39;&lt;span class=&quot;showpagePoint&quot;&gt;&#39;+thisNum+&#39;&lt;/span&gt;&#39;;
}else{
if(p==0){
html = labelHtml+&#39;1&lt;/a&gt;&lt;/span&gt;&#39;;
}else{
html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ (p+1) +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}
}

if(thisNum&gt;1){
if(!isLablePage){
html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
}else{
html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
}
}

html = &#39;&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;COLOR: #000;&quot; class=&quot;showpageOf&quot;&gt; Pages (&#39;+(postNum-1)+&#39;)&lt;/span&gt;&#39;+html;

if(thisNum&lt;(postNum-1)){
html += downPageHtml;
}

if(postNum==1) postNum++;
html += &#39;&lt;/div&gt;&#39;;

var pageArea = document.getElementsByName(&quot;pageArea&quot;);
var blogPager = document.getElementById(&quot;blog-pager&quot;);

if(postNum &lt;= 2){
html =&#39;&#39;;
}

for(var p =0;p&lt; pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&amp;&amp;pageArea.length&gt;0){
html =&#39;&#39;;
}

if(blogPager){
blogPager.innerHTML = html;
}

}

</script>

I hope this must work fine from now on. If you still find any bugs then do let us know. We are here to help you on fixing them.

Changing the CSS style

Hope you guys are really bored to see the same CSS style being used by most of the blogs. So Now i would like to explain how to have your own CSS codes for Page Navigation hack. Though in this tutorial i will explain the code which i used myself before for my blogger blog.

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

This is my default coding style for the page navigation hack.

Page Navigation Menu Widget for Blogger Page Navigation Hack for Blogger bugs fixed

But Now i will explain how to make it more better than this.

.showpageArea {padding: 0 2px;margin-bottom:10px;margin-top:10px;
}

This tag explains where should the page navigation hack must be present. If by mistake the hack overlaps with your content then you can increase the margin-bottom and margin-top attributes to a higher value to make it fit exactly where you want it to appear.

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

This code defines the CSS style for the back and Next buttons. You can add some images as background. For example , in my blogger version before i used an background image to the Next and previous button. Here is the code for that :

float : left;
background : url(http://moviedls.files.wordpress.com/2009/02/backbutton.gif) no-repeat 0 0;
text-align : center;
width : 127px;
height : 42px;
text-align : center;
display : block;
margin : 0 5px;
color : #333;
padding-top : 6px;

If you want to change the background color or image behind the page numbers then you must edit this code :

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

If you take my own code , i used the following code for my blog before.

.showpageNum a {
background : url(http://i422.photobucket.com/albums/pp302/bloggeracs/page_num.gif) no-repeat 0 0;
width : 37px;
height : 42px;
display : block;
text-align : center;
float : left;
margin : 0 5px;
padding-top : 6px;
text-decoration : none;
color : #333;
}
.showpageNum a:hover {
background : url(http://i422.photobucket.com/albums/pp302/bloggeracs/page_num.gif) no-repeat 0 100%;
color : #fff;
}

Change the background images to your wish.

.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;
}

This code defines the CSS for the current page look. It is similar to a:active tag which we use in links. I used the following tag for this :

.showpagePoint {
background : url(http://i422.photobucket.com/albums/pp302/bloggeracs/page_num.gif) no-repeat 0 100%;
width : 37px;
height : 42px;
display : block;
float : left;
text-align : center;
margin : 0 5px;
padding-top : 6px;
font-weight : bold;
color : #fff;
}
.showpageNum a:link, .showpage a:link {
text-decoration : none;
color : #cc0000;
}

So here is the complete CSS code i used for my blogger blog before. You can use this code as well for your blog. All you need to do is just replace the CSS code already present with this one.

.showpageArea {
padding : 10px;
color : #003366;
text-align : left;
width : 530px;
}
.showpageArea a {
float : left;
background : url(http://www.techieblogger.com/wp-content/uploads/2009/10/backbutton.gif) no-repeat 0 0;
text-align : center;
width : 127px;
height : 42px;
text-align : center;
display : block;
margin : 0 5px;
color : #333;
padding-top : 6px;
}
.showpageArea a:hover {
color : #333;
margin : 0 5px;
padding-top : 6px;
}
.showpageNum a {
background : url(http://www.techieblogger.com/wp-content/uploads/2009/10/page_num.gif) no-repeat 0 0;
width : 37px;
height : 42px;
display : block;
text-align : center;
float : left;
margin : 0 5px;
padding-top : 6px;
text-decoration : none;
color : #333;
}
.showpageNum a:hover {
background : url(http://www.techieblogger.com/wp-content/uploads/2009/10/page_num.gif) no-repeat 0 100%;
color : #fff;
}
.showpagePoint {
background : url(http://www.techieblogger.com/wp-content/uploads/2009/10/page_num.gif) no-repeat 0 100%;
width : 37px;
height : 42px;
display : block;
float : left;
text-align : center;
margin : 0 5px;
padding-top : 6px;
font-weight : bold;
color : #fff;
}
.showpageNum a:link, .showpage a:link {
text-decoration : none;
color : #cc0000;
}

Hope you guys like my tutorial , still you want any modifications then do let me know.

Mohamed Rias - has written 94 posts on Techie Blogger

I am Mohamed Rias , admin of Techieblogger.com. Basically I am Engineering student but still blogging is my passion. My areas of interest are HTML , CSS , Jquery , Javascript and PHP.

Visit Authors Website | All Articles From This Author

Other Recommended Posts

0
hits

If you like this article , then please help us by bookmarking

16 Responses to “Page Navigation Hack for Blogger – bugs fixed”

Jorge Reply 17. Oct, 2009 at 8:39 pm

cara me ajuda eu adoraria conseguir colocar este estilo de page navi no meu blog do blogger se puder me ajudo value.
Bariski | TutZone.net Reply 18. Oct, 2009 at 6:28 am

Awesome. Thanks buddy. You rock.
HomeBiss Reply 18. Oct, 2009 at 6:45 am

Thanks.. Been waiting for this but I have the feeling that some bloggers may encounter new bugs in the future. Will apply this new fixes later, thanks again.
Andrew Reply 18. Oct, 2009 at 10:31 am

I’ve been using the page navigation widget by bloggerplugins.com but it only shows 51 pages (10 per page so 501 posts). Is your widget capable of showing more than 501 posts?
- Mohamed Rias Reply 19. Oct, 2009 at 1:29 pm
  
  Yes it’s capable of working for any number of posts.. you can give it a try. If it doesn’t work then let me know , we can fix the bug.
eni Reply 22. Oct, 2009 at 7:34 pm

Hi..

I’m newbie on bloggin, still in 2weeks
I get a little confused. I try 2nd method: modified code html for navigation. But i see no difference on my blog. I also try 1st method. Its also no change on my blog. Which step i have left?

I also need to know, how to make “REPLY” to comment. I’ve try many way as intensedebate and JS Kit, but it also no change on my blog. Please guide me.
mruni Reply 16. Nov, 2009 at 7:53 pm

[img]http://i38.tinypic.com/4uxkde.jpg[/img]

hey can u give me code for above number page effect

my email address is universaltiraf@gmail.com

thanks in advance !!
- Mohamed Rias Reply 17. Nov, 2009 at 1:20 am
  
  Ya sure.. please send me the blog url which has this sort of navigation widget. I can rip that to blogger’s page navigation widget. cheers
  - Rajesh Reply 17. Nov, 2009 at 6:05 pm
    
    I need a simple and customised blogger template from you. as you are very expert in blog theme development.
    
    Can you mail me your email address ?
esyrecipes Reply 17. Nov, 2009 at 7:41 am

i have followed all the instruction made by u but still the nuber navigator is not appear in my blog so any help
thanks in advance !!!!!!
cheth Reply 18. Nov, 2009 at 3:06 pm

Rias,
I was using a converted wp theme.. but no matter what I try I’m unable to add a default older post navigation like before.. nor able to use your previous page navigation hacks.. do help bro.
- Abu Farhan Reply 24. Nov, 2009 at 9:48 am
  
  Hi cheth your template problem becuase you don’t have id = blog-pager at bottom of post you can add by your self.
Bronko Reply 12. Dec, 2009 at 9:35 am

hi,

i just installed the code manually but the page navigation doesn’t display on the site.
any suggestions?

best regards

Bronko
varun Reply 31. Dec, 2009 at 3:25 pm

Hi thanks for the post. Can You Tell Me Which website You Took this great template from?
Or Can you send me a template to the my email address at varun419@in.com
techie-solutions.blogspot.com
tech and gadget updates Reply 18. Jan, 2010 at 4:55 pm

Hi Mohamed,

I’m so greatful that you’ve published a bug fix on the old version of the hack cause i’ve been following this hack for quite a while now.

Anyways, I’ve tested the short and manual version of the hack codes you described above but it seems that there’s still a bit of a problem coz nothing showed after I implementing the codes. I am pretty sure I followed your instructions and copy-pasted the necessary codes (done it 3x) with no avail.

I’ll be very greatful and would very much like to use this hack if you could only fix it. In the meantime, i’ll look for other alternatives.

All the best,
Virgel
Ben Reply 28. Feb, 2010 at 12:49 am

Hi,

Can you let me know how to show a summary of posts on pages 2 & 3 of my blog, below this page number widget? For example, a widget that would show the post titles and possibly a thumbnail of the posts’ image, of posts on pages 2 & 3? There’s an example on this website: gossiponthis.com at the bottom of the page. Please let me know if something like this is possible.

Thanks a lot,
Ben