ads

Make money online

How to add stylish numbered page navigation widget for Own Style

Now I am going to show you how to add next and previous button on blogger with numbered post navigation or pagination. In your blogger template you may get default post/page navigation or pagination options. Generally we see newer post and older post option in the bottom of every blog post. These links provide simple navigation option to go another post of your blogger blog post. You will see it in the home, label and archive pages. But you may know that it is not user friendly. Your visitor may not know how much posts or articles you have. If you put number pagination system in your home, label and archive page it will be better. In this article I am going to show left, right and centered pagination mechanism.

To make a nice numbered page navigation you should apply some html, css and js tricks. Since you cannot use php in your blogger site you can make same mechanism using JavaScript. CSS helps you to make a stylish design for page navigation and JavaScript give you the mechanism of pagination. We apply css to hide older post and newer post navigation from home page and some other page and give some style to make our own numbered page navigation widget for blogger blogspot website. You get the css and JavaScript code here. Follow the below instructions and put the css and JavaScript Code in the proper places in your blogger template as per my direction.

If you are a newbie blogspot user and unable to do this just follow my video instructions. At the bottom of this article you will get a nice video tutorial about this topic.
First of all login your blogger account and go to the "Template" option and click the "Edit HTML" and then press Ctrl+F and search for
]]></b:skin>


Pagination Style One:- Put the following code just before "]]></b:skin>"
#blog-pager {float:right; margin-top:15px; padding:0 10px;}
.showpageArea a{background-color:#eee; border:0px solid #C5C5C5;text-decoration:none;}
.showpageArea .showpagePoint, .showpageArea a {color: #3399FF !important;display:block;float:left;margin-right:3px;padding:5px 8px;text-decoration:none}
.showpageArea .showpagePoint, .showpageArea a:hover {background-color: #eee;text-decoration;color: #000 !important;}

 It is my own css code. You can change the link & hover color, font color, background color as per your requirement. Just edit them to give your own style.

 Pagination Style Two:- Put the following code just before "]]></b:skin>"
#blog-pager {float:right; margin-top:15px; padding:0 10px;}
.showpageArea .showpagePoint, .showpageArea a:hover {background-color: #000000;color: #fff;text-decoration;}
.showpageArea a{background-color:#555555; border:0px solid #C5C5C5;text-decoration:none;}
.showpageArea .showpagePoint, .showpageArea a {color: #fff !important;display:block;float:left;margin-right:3px;padding:5px 8px;text-decoration:none}


 Pagination Style Three:- Put the following code just before "]]></b:skin>".
#blog-pager {float:right; margin-top:15px; padding:0 10px;}
.showpageArea .showpagePoint,.showpageArea a{color:#fff !important;display:block; float:left; padding:5px 8px; margin-right:3px;text-decoration:none;}
.showpageArea a{background-color:#00CC00; border:0px solid #C5C5C5;text-decoration:none;}
.showpageArea .showpagePoint,.showpageArea a:hover{background-color:#009200; border:0px solid #E0E0E0; color:#222;text-decoration:none;}


Pagination Style Four:- Put the following code just before "]]></b:skin>"
#blog-pager {float:right; margin-top:15px; padding:0 10px;}
.showpageArea a{background-color:#3282B9; border:0px solid #C5C5C5;text-decoration:none;}
.showpageArea .showpagePoint, .showpageArea a {color:#fff !important;display:block;float:left;margin-right:3px;padding:5px 8px;text-decoration:none}
.showpageArea .showpagePoint, .showpageArea a:hover {background-color: #054077;color: #fff;text-decoration;}


Pagination Style Five:- Put the following code just before "]]></b:skin>"
#blog-pager {float:right; margin-top:15px; padding:0 10px;}
.showpageArea a{background-color:#FF8000; border:0px solid #C5C5C5;text-decoration:none;}
.showpageArea .showpagePoint, .showpageArea a {color: #fff !important;display:block;float:left;margin-right:3px;padding:5px 8px;text-decoration:none}
.showpageArea .showpagePoint, .showpageArea a:hover {background-color: #B25900;color: #fff;text-decoration;}

Pagination from Left Side: If you want your pagination start from the left side then overwrite this css id (#blog-pager) -

#blog-pager{margin-top: 15px;padding: 0 10px; float:left}

Pagination in Center: If you want a centered pagination then overwrite this css id (#blog-pager)-

#blog-pager{margin-top: 15px;padding: 0 10px; text-align:center !important}

Now press again the Ctrl+F and search for </body> and put the following JavaScript code just before it.
<script type='text/javascript'>
//<![CDATA[
var pageCount=6;
var displayPageNum=8;
var upPageWord ='«  Previous'
var downPageWord ='Next »';
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('1c 17(x){3 C=r;3 E=18 1b();3 y=1;3 H=1;3 v=0;3 p=0;3 G=0;3 F="";3 J="";3 w="";l(3 z=0,A;A=x.1i.Y[z];z++){3 u=A.s.$t.j(0,19)+A.s.$t.j(1d,1f);k=1m(u);3 i=A.11.$t;4(i!=""){4(v==0||(v%g==(g-1))){4(C.6(k)!=-1){y=H}4(i!=""){H++}E[E.c]="/d?V-9="+k+"&9-o="+g}}v++}l(3 D=0;D<E.c;D++){4(D>=(y-R-1)&&D<(y+R)){4(p==0&&D==y-2){4(y==2){J=\'<5 7="n"><a b="/">\'+S+"</a></5>"}e{J=\'<5 7="n"><a b="\'+E[D]+\'">\'+S+"</a></5>"}p++}4(D==(y-1)){F+=\'<5 7="1e">\'+y+"</5>"}e{4(D==0){F+=\'<5 7="T"><a b="/">1</a></5>\'}e{F+=\'<5 7="T"><a b="\'+E[D]+\'">\'+(D+1)+"</a></5>"}}4(G==0&&D==y){w=\'<5 7="n"> <a b="\'+E[D]+\'">\'+1h+"</a></5>";G++}}}4(y>1){F=""+J+" "+F+" "}F=\'<U 7="1j">\'+F;4(y<(H-1)){F+=w}4(H==1){H++}F+="</U>";3 I=h.Z("10");3 B=h.12("13-15");4(H<=2){F=""}l(3 D=0;D<I.c;D++){I[D].Q=F}4(I&&I.c>0){F=""}4(B){B.Q=F}}1c 16(A){3 F=r;3 G=18 1b();3 J=F.6("/d/f/")!=-1;3 M=J?F.1a(F.6("/d/f/")+14,F.c):"";M=M.6("?")!=-1?M.1a(0,M.6("?")):M;3 B=1;3 L=1;3 y=0;3 p=0;3 K=0;3 I="";3 P="";3 z="";3 N=\'<5 7="T"><a b="/d/f/\'+M+"?&9-o="+g+\'">\';3 F=r;l(3 C=0,D;D=A.1i.Y[C];C++){3 x=D.s.$t.j(0,19)+D.s.$t.j(1d,1f);k=1m(x);3 i=D.11.$t;4(i!=""){4(y==0||(y%g==(g-1))){4(F.6(k)!=-1){B=L}4(i!=""){L++}G[G.c]="/d/f/"+M+"?V-9="+k+"&9-o="+g}}y++}l(3 H=0;H<G.c;H++){4(H>=(B-R-1)&&H<(B+R)){4(p==0&&H==B-2){4(B==2){P=N+S+"</a></5>"}e{P=\'<5 7="n"><a b="\'+G[H]+\'">\'+S+"</a></5>"}p++}4(H==(B-1)){I+=\'<5 7="1e">\'+B+"</5>"}e{4(H==0){I=N+"1</a></5>"}e{I+=\'<5 7="T"><a b="\'+G[H]+\'">\'+(H+1)+"</a></5>"}}4(K==0&&H==B){z=\'<5 7="n"> <a b="\'+G[H]+\'">\'+1h+"</a></5>";K++}}}4(B>1){4(!J){I=""+P+" "+I+" "}e{I=""+P+" "+I+" "}}I=\'<U 7="1j">\'+I;4(B<(L-1)){I+=z}4(L==1){L++}I+="</U>";3 O=h.Z("10");3 E=h.12("13-15");4(L<=2){I=""}l(3 H=0;H<O.c;H++){O[H].Q=I}4(O&&O.c>0){I=""}4(E){E.Q=I}}3 r=1u.b;3 8=r;4(8.6("/d/f/")!=-1){4(8.6("?V-9")!=-1){3 W=8.j(8.6("/d/f/")+14,8.6("?V-9"))}e{3 W=8.j(8.6("/d/f/")+14,8.6("?&9"))}}3 X="/";4(8.6("?q=")==-1){4(8.6("/d/f/")==-1){h.1l(\'<m 1n="\'+X+\'1o/1p/1t?1r=1s-1q-m&1k=17&9-o=1g" ><\\/m>\')}e{h.1l(\'<m 1n="\'+X+"1o/1p/1v/-/"+W+\'?1r=1s-1q-m&1k=16&9-o=1g" ><\\/m>\')}};',62,94,'|||var|if|span|indexOf|class|thisUrl|max||href|length|search|else|label|pageCount|document||substring|timestamp|for|script|showpage|results|||home_page_url|published||||||||||||||||||||||||innerHTML|displayPageNum|upPageWord|showpageNum|div|updated|lblname1|home_page|entry|getElementsByName|pageArea|title|getElementById|blog||pager|showpageCount2|showpageCount|new||substr|Array|function|23|showpagePoint|29|99999|downPageWord|feed|showpageArea|callback|write|encodeURIComponent|src|feeds|posts|in|alt|json|summary|location|full'.split('|'),0,{}))
//]]>
</script>
Here you can change the pageCount and displayPageNum as per your requirement. If you want to use your own language in Next and Previous option just edit them. Then save the template, visit your site and refresh to see a nice numbered page navigation option.

Post a Comment

0 Comments