In order to display the contents or the articles of a blog especially if you have the content in a large number, surely you can not display all them at once. That is only make the performance of your blog to be slow, because when users visit at the homepage of your blog, the content will displayed with all contained articles of your blog. Therefore you have to limit the whole of articles on the homepage of your blog, let's see the following picture below!
At Show at most, fill it with the number of articles that you want to show on every page. By default blogger only provide navigation newer and older articles in the navigation of the contents with the style still very simple. Here you need Pagenumber Navigation that allows the users to view the entire content in a better way and looks more elegant.
I'll show you how to create a Pagenumber Navigation or usually known as pagination with the style that can be design by yourself. You can it later on your blog, so you can gives the impression of your blog more attractive for the users. Something that required in the process of creating the Pagenumber Navigation that is "Js script" (Javascript) Pagenumber, and "CSS script" Pagenumber to make an appearance that more beautiful.
1. Login to the blogger dashboard and click on Template>Edit HTML. You need to put Javascript of pagenumber below!
<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=4;
var numshowpage=8;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,d){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--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[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}('7 L;7 j;7 h;7 v;1A();H 1z(1d){7 6=\'\';M=K(12/2);5(M==12-M){12=M*2+1}C=h-M;5(C<1)C=1;e=K(1d/m)+1;5(e-1==1d/m)e=e-1;D=C+12-1;5(D>e)D=e;6+="<4 9=\'1M\'>1L "+h+\' 1Y \'+e+"</4>";7 17=K(h)-1;5(h>1){5(h==2){5(j=="u"){6+=\'<4 9="1Z"><a b="\'+B+\'">\'+S+\'</a></4>\'}c{6+=\'<4 9="g"><a b="/r/s/\'+v+\'?&d-l=\'+m+\'">\'+S+\'</a></4>\'}}c{5(j=="u"){6+=\'<4 9="g"><a b="#" y="N(\'+17+\');x w">\'+S+\'</a></4>\'}c{6+=\'<4 9="g"><a b="#" y="O(\'+17+\');x w">\'+S+\'</a></4>\'}}}5(C>1){5(j=="u"){6+=\'<4 9="g"><a b="\'+B+\'">1</a></4>\'}c{6+=\'<4 9="g"><a b="/r/s/\'+v+\'?&d-l=\'+m+\'">1</a></4>\'}}5(C>2){6+=\' ... \'}1s(7 k=C;k<=D;k++){5(h==k){6+=\'<4 9="24">\'+k+\'</4>\'}c 5(k==1){5(j=="u"){6+=\'<4 9="g"><a b="\'+B+\'">1</a></4>\'}c{6+=\'<4 9="g"><a b="/r/s/\'+v+\'?&d-l=\'+m+\'">1</a></4>\'}}c{5(j=="u"){6+=\'<4 9="g"><a b="#" y="N(\'+k+\');x w">\'+k+\'</a></4>\'}c{6+=\'<4 9="g"><a b="#" y="O(\'+k+\');x w">\'+k+\'</a></4>\'}}}5(D<e-1){6+=\'...\'}5(D<e){5(j=="u"){6+=\'<4 9="g"><a b="#" y="N(\'+e+\');x w">\'+e+\'</a></4>\'}c{6+=\'<4 9="g"><a b="#" y="O(\'+e+\');x w">\'+e+\'</a></4>\'}}7 16=K(h)+1;5(h<e){5(j=="u"){6+=\'<4 9="g"><a b="#" y="N(\'+16+\');x w">\'+1l+\'</a></4>\'}c{6+=\'<4 9="g"><a b="#" y="O(\'+16+\');x w">\'+1l+\'</a></4>\'}}6+=\'<1q><a b="1n://1O.1K.1m" 1R="1Q 1S" 1D="1E-1F: 1I; 1G: 1H; 1N: 2d;" 28="27"><1o 26="0" J="1n://2a.2b.1m/1o/2f.2e" 1T="3" 2c="3" /></a></1q>\';7 E=z.1W("E");7 18=z.1V("1U-1X");1s(7 p=0;p<E.Q;p++){E[p].1i=6}5(E&&E.Q>0){6=\'\'}5(18){18.1i=6}}H 1f(X){7 Y=X.Y;7 1C=K(Y.22$21.$t,10);1z(1C)}H 1A(){7 i=o;5(i.f("/r/s/")!=-1){5(i.f("?V-d")!=-1){v=i.I(i.f("/r/s/")+14,i.f("?V-d"))}c{v=i.I(i.f("/r/s/")+14,i.f("?&d"))}}5(i.f("?q=")==-1&&i.f(".6")==-1){5(i.f("/r/s/")==-1){j="u";5(o.f("#G=")!=-1){h=o.I(o.f("#G=")+8,o.Q)}c{h=1}z.1p("<n J=\\""+B+"P/R/U?d-l=1&13=15-Z-n&T=1f\\"><\\/n>")}c{j="s";5(i.f("&d-l=")==-1){m=20}5(o.f("#G=")!=-1){h=o.I(o.f("#G=")+8,o.Q)}c{h=1}z.1p(\'<n J="\'+B+\'P/R/U/-/\'+v+\'?13=15-Z-n&T=1f&d-l=1" ><\\/n>\')}}}H N(F){11=(F-1)*m;L=F;7 W=z.1r(\'1g\')[0];7 A=z.1w(\'n\');A.1t=\'1v/1u\';A.1y("J",B+"P/R/U?1B-1j="+11+"&d-l=1&13=15-Z-n&T=1e");W.1h(A)}H O(F){11=(F-1)*m;L=F;7 W=z.1r(\'1g\')[0];7 A=z.1w(\'n\');A.1t=\'1v/1u\';A.1y("J",B+"P/R/U/-/"+v+"?1B-1j="+11+"&d-l=1&13=15-Z-n&T=1e");W.1h(A)}H 1e(X){1c=X.Y.25[0];7 1x=1c.1k.$t.I(0,19)+1c.1k.$t.I(23,29);7 1a=1P(1x);5(j=="u"){7 1b="/r?V-d="+1a+"&d-l="+m+"#G="+L}c{7 1b="/r/s/"+v+"?V-d="+1a+"&d-l="+m+"#G="+L}1J.b=1b}',62,140,'||||span|if|html|var||class||href|else|max|maksimal|indexOf|showpageNum|nomerhal|thisUrl|jenis|jj|results|postperpage|script|urlactivepage|||search|label||page|lblname1|false|return|onclick|document|newInclude|home_page|mulai|akhir|pageArea|numberpage|PageNo|function|substring|src|parseInt|nopage|nomerkiri|redirectpage|redirectlabel|feeds|length|posts|upPageWord|callback|summary|updated|nBody|root|feed|in||jsonstart|numshowpage|alt||json|nextnomer|prevnomer|blogPager||timestamp|alamat|post|banyakdata|finddatepost|hitungtotaldata|head|appendChild|innerHTML|index|published|downPageWord|com|http|img|write|div|getElementsByTagName|for|type|javascript|text|createElement|timestamp1|setAttribute|loophalaman|halamanblogger|start|totaldata|style|font|size|float|right|7pt|location|blogspot|Page|showpageOf|padding|24work|encodeURIComponent|Blogger|title|Templates|width|blog|getElementById|getElementsByName|pager|of|showpage||totalResults|openSearch||showpagePoint|entry|border|_blank|target||img1|blogblog|height|2px|gif|blank'.split('|'),0,{}))
//]]>
</script>
On the script code template, press Ctrl+F and find this code <b:include name='nextprev'/> just put the javascript above below this tag <b:include name='nextprev'/> on the script code template
2. Create the CSS Style Script for Pagenumber Navigation. I have provided two css style color Pagenumber Navigation that will be displayed like the picture above.
Pagenumber Black-Gold Style
#blog-pager {
width : 588px;
height : 45px;
text-align: center;
vertical-align: middle;
margin: auto;
padding:8px 8px 0px 8px;
border: 1px solid rgb(204, 204, 204);
background-color: rgb(238, 238, 238);
}
.showpageNum a:link,
.showpageNum a:visited{
font-family: Tahoma, Arial, Helvetica, Sans-Serif;
text-decoration: none;
color: #ffffff;
}
.showpageNum a {
background: #2E2E2E;
background: linear-gradient(top, #595959 0, #3D3D3D 50%, #141414 50%, #303030 100%) no-repeat;
background: -webkit-linear-gradient(top, #595959 0, #3D3D3D 50%, #141414 50%, #303030 100%) no-repeat;
background: -moz-linear-gradient(top, #595959 0, #3D3D3D 50%, #141414 50%, #303030 100%) no-repeat;
background: -o-linear-gradient(top, #595959 0, #3D3D3D 50%, #141414 50%, #303030 100%) no-repeat;
background: -ms-linear-gradient(top, #595959 0, #3D3D3D 50%, #141414 50%, #303030 100%) no-repeat;
background: linear-gradient(top, #595959 0, #3D3D3D 50%, #141414 50%, #303030 100%) no-repeat;
-svg-background: linear-gradient(top, #595959 0, #3D3D3D 50%, #141414 50%, #303030 100%) no-repeat;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
border:1px solid #DAECFB;
padding:7px;
margin:0 4px 0 auto;
position:relative;
display:inline-block;
margin-left: 0;
}
.showpageOf {
background: #2E2E2E;
background: linear-gradient(top, #595959 0, #3D3D3D 50%, #141414 50%, #303030 100%) no-repeat;
background: -webkit-linear-gradient(top, #595959 0, #3D3D3D 50%, #141414 50%, #303030 100%) no-repeat;
background: -moz-linear-gradient(top, #595959 0, #3D3D3D 50%, #141414 50%, #303030 100%) no-repeat;
background: -o-linear-gradient(top, #595959 0, #3D3D3D 50%, #141414 50%, #303030 100%) no-repeat;
background: -ms-linear-gradient(top, #595959 0, #3D3D3D 50%, #141414 50%, #303030 100%) no-repeat;
background: linear-gradient(top, #595959 0, #3D3D3D 50%, #141414 50%, #303030 100%) no-repeat;
-svg-background: linear-gradient(top, #595959 0, #3D3D3D 50%, #141414 50%, #303030 100%) no-repeat;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
border:1px solid #DAECFB;
padding:7px;
margin:0 4px 0 auto;
position:relative;
display:inline-block;
margin-left: 0;
font-family: Tahoma, Arial, Helvetica, Sans-Serif;
text-decoration: none;
color: #FFFFFF;
}
.showpageNum a:hover {
background: #642A29;
background: linear-gradient(top, #A34443 0, #7B3332 50%, #411B1B 50%, #692C2B 100%) no-repeat;
background: -webkit-linear-gradient(top, #A34443 0, #7B3332 50%, #411B1B 50%, #692C2B 100%) no-repeat;
background: -moz-linear-gradient(top, #A34443 0, #7B3332 50%, #411B1B 50%, #692C2B 100%) no-repeat;
background: -o-linear-gradient(top, #A34443 0, #7B3332 50%, #411B1B 50%, #692C2B 100%) no-repeat;
background: -ms-linear-gradient(top, #A34443 0, #7B3332 50%, #411B1B 50%, #692C2B 100%) no-repeat;
background: linear-gradient(top, #A34443 0, #7B3332 50%, #411B1B 50%, #692C2B 100%) no-repeat;
-svg-background: linear-gradient(top, #A34443 0, #7B3332 50%, #411B1B 50%, #692C2B 100%) no-repeat;
border:1px solid #FFDEB3;
padding:7px;
margin:0 4px 0 auto;
}
.showpagePoint {
background: #84633E;
background: linear-gradient(top, #B68F63 0, #AE8251 23%, #997348 50%, #61492E 50%, #876640 100%) no-repeat;
background: -webkit-linear-gradient(top, #B68F63 0, #AE8251 23%, #997348 50%, #61492E 50%, #876640 100%) no-repeat;
background: -moz-linear-gradient(top, #B68F63 0, #AE8251 23%, #997348 50%, #61492E 50%, #876640 100%) no-repeat;
background: -o-linear-gradient(top, #B68F63 0, #AE8251 23%, #997348 50%, #61492E 50%, #876640 100%) no-repeat;
background: -ms-linear-gradient(top, #B68F63 0, #AE8251 23%, #997348 50%, #61492E 50%, #876640 100%) no-repeat;
background: linear-gradient(top, #B68F63 0, #AE8251 23%, #997348 50%, #61492E 50%, #876640 100%) no-repeat;
-svg-background: linear-gradient(top, #B68F63 0, #AE8251 23%, #997348 50%, #61492E 50%, #876640 100%) no-repeat;
border:1px solid #FFFFFF;
padding:7px;
margin:0 4px 0 auto;
color: #FFFFFF
}
Pagenumber Blue-Orange Style
#blog-pager {
width : 588px;
height : 45px;
text-align: center;
vertical-align: middle;
margin: auto;
padding:8px 8px 0px 8px;
border: 1px solid rgb(204, 204, 204);
background-color: #d1e8ff;
}
.showpageNum a:link,
.showpageNum a:visited {
font-family: Tahoma, Arial, Helvetica, Sans-Serif;
text-decoration: none;
color: #ffffff;
}
.showpageNum a {
background: #00366B;
background: linear-gradient(top, #0061C2 0, #00458A 50%, #001C38 50%, #003870 100%) no-repeat;
background: -webkit-linear-gradient(top, #0061C2 0, #00458A 50%, #001C38 50%, #003870 100%) no-repeat;
background: -moz-linear-gradient(top, #0061C2 0, #00458A 50%, #001C38 50%, #003870 100%) no-repeat;
background: -o-linear-gradient(top, #0061C2 0, #00458A 50%, #001C38 50%, #003870 100%) no-repeat;
background: -ms-linear-gradient(top, #0061C2 0, #00458A 50%, #001C38 50%, #003870 100%) no-repeat;
background: linear-gradient(top, #0061C2 0, #00458A 50%, #001C38 50%, #003870 100%) no-repeat;
-svg-background: linear-gradient(top, #0061C2 0, #00458A 50%, #001C38 50%, #003870 100%) no-repeat;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
border:1px solid #DAECFB;
padding:7px;
margin:0 4px 0 auto;
position:relative;
display:inline-block;
margin-left: 0;
}
.showpageOf {
background: #00366B;
background: linear-gradient(top, #0061C2 0, #00458A 50%, #001C38 50%, #003870 100%) no-repeat;
background: -webkit-linear-gradient(top, #0061C2 0, #00458A 50%, #001C38 50%, #003870 100%) no-repeat;
background: -moz-linear-gradient(top, #0061C2 0, #00458A 50%, #001C38 50%, #003870 100%) no-repeat;
background: -o-linear-gradient(top, #0061C2 0, #00458A 50%, #001C38 50%, #003870 100%) no-repeat;
background: -ms-linear-gradient(top, #0061C2 0, #00458A 50%, #001C38 50%, #003870 100%) no-repeat;
background: linear-gradient(top, #0061C2 0, #00458A 50%, #001C38 50%, #003870 100%) no-repeat;
-svg-background: linear-gradient(top, #0061C2 0, #00458A 50%, #001C38 50%, #003870 100%) no-repeat;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
border:1px solid #DAECFB;
padding:7px;
margin:0 4px 0 auto;
position:relative;
display:inline-block;
margin-left: 0;
text-decoration: none;
color: #FFFFFF;
}
.showpageNum a:hover {
background: #FFAD42;
background: linear-gradient(top, #FFD399 0, #FFBA61 50%, #FF970F 50%, #FFAF47 100%) no-repeat;
background: -webkit-linear-gradient(top, #FFD399 0, #FFBA61 50%, #FF970F 50%, #FFAF47 100%) no-repeat;
background: -moz-linear-gradient(top, #FFD399 0, #FFBA61 50%, #FF970F 50%, #FFAF47 100%) no-repeat;
background: -o-linear-gradient(top, #FFD399 0, #FFBA61 50%, #FF970F 50%, #FFAF47 100%) no-repeat;
background: -ms-linear-gradient(top, #FFD399 0, #FFBA61 50%, #FF970F 50%, #FFAF47 100%) no-repeat;
background: linear-gradient(top, #FFD399 0, #FFBA61 50%, #FF970F 50%, #FFAF47 100%) no-repeat;
-svg-background: linear-gradient(top, #FFD399 0, #FFBA61 50%, #FF970F 50%, #FFAF47 100%) no-repeat;
border:1px solid #FFDEB3;
padding:7px;
margin:0 4px 0 auto;
}
.showpagePoint {
background: #EE7320;
background: linear-gradient(top, #F4A571 0, #F0843D 50%, #ED6A12 50%, #CC5B0F 50%, #ED6A12 82%, #EF7625 100%) no-repeat;
background: -webkit-linear-gradient(top, #F4A571 0, #F0843D 50%, #ED6A12 50%, #CC5B0F 50%, #ED6A12 82%, #EF7625 100%) no-repeat;
background: -moz-linear-gradient(top, #F4A571 0, #F0843D 50%, #ED6A12 50%, #CC5B0F 50%, #ED6A12 82%, #EF7625 100%) no-repeat;
background: -o-linear-gradient(top, #F4A571 0, #F0843D 50%, #ED6A12 50%, #CC5B0F 50%, #ED6A12 82%, #EF7625 100%) no-repeat;
background: -ms-linear-gradient(top, #F4A571 0, #F0843D 50%, #ED6A12 50%, #CC5B0F 50%, #ED6A12 82%, #EF7625 100%) no-repeat;
background: linear-gradient(top, #F4A571 0, #F0843D 50%, #ED6A12 50%, #CC5B0F 50%, #ED6A12 82%, #EF7625 100%) no-repeat;
-svg-background: linear-gradient(top, #F4A571 0, #F0843D 50%, #ED6A12 50%, #CC5B0F 50%, #ED6A12 82%, #EF7625 100%) no-repeat;
border:1px solid #FFDEB3;
padding:7px;
margin:0 4px 0 auto;
color: #FFFFFF;
}
Use one of the css styles above, or you can change the color by yourself. The css style should be placed into the skin of the template. Press Ctrl+F on the template html and type ]]></b:skin>, just put the css style above this code ]]></b:skin>
In other way you can the css style by click on Template>Customize. And then click Advanced, and put the css style here, the next click Apply to blog. You can see the complete Pagenumber Navigation on the main page. Related with Pagenumber Navigation, the next we shall create the style of Newer Home Older Navigation.
Related Articles
No comments :
Post a Comment