Páginas Numeradas

Nesse Tutorial eu irei ensina-los a colocar páginas numeradas no seu Blog então vamos ao tutorial, vou tentar explicar detalhadamente, espero que consigam entender.
Escolha um dos estilos, copie e cole acima de

]]></b:skin>

1° Estilo

/* Page Navigation
----------------------------------------------- */
#blog-pager {
float: center;
}
.showpageArea {
margin: 10px 0;
}
.showpageArea a {
text-decoration: none;
}
.showpageNum a {
font-size:10px;
padding: 4px 8px 4px 8px;
margin: 2px;
text-decoration: none;
border: 1px solid #282828;
color: #000;
background-color: #ffffff;
}
.showpageNum a:hover {
border: 1px solid #333;
color: #000;
background-color: #cccccc;
}
.showpagePoint {
font-size:10px;
padding:4px 8px 4px 8px;
margin:0 5px 0 5px;
font-weight: bold;
border:1px solid #282828;
color:#000;
background-color: #cccccc;
text-decoration: none;
}
.showpageOf {
font-size:10px;
padding: 4px 8px 4px 8px;
margin: 5px;
color: #ffffff !important;
border: 1px solid #282828;
background-color: #838383;
}
.showpage a {
font-size:10px;
text-decoration:none;
border: 1px solid #282828;
padding: 4px 8px 4px 8px;
}
.showpage a:hover {
text-decoration:none;
border: 1px solid #282828;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#838383;
}

2° Estilo

/* Page Navigation
----------------------------------------------- */
.showpageArea {
width:100%;
margin: 20px 30px;
color:#6c6c6c;
}
.showpageArea a {
text-decoration: none;
color:#6c6c6c;
}
.showpageNum a {
font-size:100%;
margin: 2px;
text-decoration: none;
color: #ccc !important;
border-radius: 5px;
-moz-border-radius: 5px; /* firefox rounded corner top left */
-webkit-border-radius: 5px; /* Safari 3 rounded corner top left */
margin-bottom: 0px;
padding: 5px 10px 5px 10px;
background: #303030;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#303030', endColorstr='#171717'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#303030), to(#171717)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #303030,  #171717); /* for firefox 3.6+ */
}
.showpageNum a:hover {
color: #fff !important;
border-radius: 5px;
-moz-border-radius: 5px; /* firefox rounded corner top left */
-webkit-border-radius: 5px; /* Safari 3 rounded corner top left */
margin-bottom: 0px;
padding: 5px 10px 5px 10px;
background: #cf0202;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf0202', endColorstr='#660000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#cf0202), to(#660000)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #cf0202,  #660000); /* for firefox 3.6+ */
}
.showpagePoint {
color: #FFFFFF;
margin:2px;
border-radius: 5px;
-moz-border-radius: 5px; /* firefox rounded corner top left */
-webkit-border-radius: 5px; /* Safari 3 rounded corner top left */
margin-bottom: 0px;
padding: 5px 10px 5px 10px;
background: #cf0202;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf0202', endColorstr='#660000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#cf0202), to(#660000)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #cf0202,  #660000); /* for firefox 3.6+ */
}
.showpageOf {
margin:5px;
color: #555555 !important;
border-radius: 5px;
-moz-border-radius: 5px; /* firefox rounded corner top left */
-webkit-border-radius: 5px; /* Safari 3 rounded corner top left */
margin-bottom: 0px;
padding: 5px 10px 5px 10px;
background: #0f0f0f;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#202020', endColorstr='#0f0f0f'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#202020), to(#0f0f0f)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #cf0202,  #0f0f0f); /* for firefox 3.6+ */
}
.showpage a {
font-size:100%;
text-decoration:none;
padding: 4px 8px 4px 8px;
}
.showpage a:hover {
text-decoration:none;
}
.showpage {
margin:5px;
color: #555555 !important;
border-radius: 5px;
-moz-border-radius: 5px; /* firefox rounded corner top left */
-webkit-border-radius: 5px; /* Safari 3 rounded corner top left */
margin-bottom: 0px;
padding: 5px 5px 5px 5px;
background: #0f0f0f;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#202020', endColorstr='#0f0f0f'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#202020), to(#0f0f0f)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #cf0202,  #0f0f0f); /* for firefox 3.6+ */
}

Após ter colocado o estilo desejado, procure pelo trecho

</body>

Acima deste trecho cole o código abaixo

<!--Page Navigation Starts-->
<script align='center' type='text/javascript'>
var pageCount=3;
var displayPageNum=15;
var upPageWord ='Voltar';
var downPageWord ='Próximo';
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v2.js' type='text/javascript'/>
<!--Page Navigation Ends-->

Caso queira mudar a quantidade de páginas por número, e o número de páginas que vai aparecer, siga as seguintes instruções abaixo

var pageCount=3; // é quantidade de página por número , exemplo: Na página 1 vai ter 3 páginas , quando adicionar a quarta pagina aparece a página 2 e assim sucessivamente 

var displayPageNum=15; // Número de Páginas Numeradas que irá aparecer

Espero que tenham gostado e entendido o tutorial, comentem