Páginas numeradas no blogger com 8 estilos para você escolher

Postado Por : Admin / As : janeiro 31, 2018
BloggerPaginacaoNumerada



1 – Vá no modelo do seu template e pesquise pelo trecho:
<b:includable id=’mobile-index-post’ var=’post’>  
2 – ACIMA dele cole o seguinte código:
<b:includable id=’page-navi’>
<div class=’pagenavi’>
<script type=’text/javascript’> var pageNaviConf =
{
perPage: 5,
numPages: 8,
firstText: &quot;Primeira&quot;,
lastText: &quot;Última&quot;,
nextText: &quot;&#187;&quot;,
prevText: &quot;&#171;&quot;
}
</script>
<script src=’https://xkaroline.github.io/followyourdreams/paginacaonumerada.js’ type=’text/javascript’/> <div class=’clear’/>
</div>
</b:includable>     

O número 5 do código acima é o número de posts que aparece por página. Ele deve ser o mesmo número que está configurado na aba Layout, caso contrário alguns posts do seu blog vão se perder entre as “passadas” de páginas:

BloggerPaginacaoNumerada1
BloggerPaginacaoNumerada2

3 – Agora pesquise pelo trecho:
<b:include name=’nextprev’/> 

E substitua-o pelo seguinte código:
<b:if cond=’data:blog.pageType == &quot;index&quot;’>
<b:include name=’page-navi’/>
<b:else/>
<b:if cond=’data:blog.pageType == &quot;archive&quot;’>
<b:include name=’page-navi’/>
</b:if>
<b:else/>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<b:include name=’nextprev’/>
</b:if>
</b:if> 
4 – Por fim, pesquise pelo trecho ]]></b:skin> e logo acima dele cole o código do modelo escolhido, depois é só salvar.

Modelos
Modelo 1
BloggerPaginacaoNumeradaModelo1
/*— Paginacao numerada — */
.pagenavi .pages {display: none;}
#blog-pager, .pagenavi {padding: 8px 10px;
clear: both;
text-align: center;
margin: 30px auto 15px;
}
#blog-pager a, .pagenavi span, .pagenavi a {
padding: 5px 10px;
text-decoration: none;
font-family: arial;
color: #fff;
margin: 2px;
background: #e9a7bd;
background-position: bottom;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
border-radius: 30px;
font-size: 20px;
}
#blog-pager a:hover, .pagenavi a:hover {
background: #dc6f93;
}
#blog-pager-older-link, #blog-pager-newer-link {
float: none;}
.pagenavi .current {
background: #dc6f93;
} 
Modelo 2
BloggerPaginacaoNumeradaModelo2
/*— Paginacao numerada — */
.pagenavi .pages {display: none;}
#blog-pager, .pagenavi {padding: 8px 10px;
clear: both;
text-align: center;
margin: 30px auto 15px;
}
#blog-pager a, .pagenavi span, .pagenavi a {
padding: 5px 10px;
text-decoration: none;
font-family: arial;
color: #fff;
margin: 2px;
background: #99b8d3;
background-position: bottom;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
border-radius: 30px;
font-size: 20px;
}
#blog-pager a:hover, .pagenavi a:hover {
background: #adadad;
}
#blog-pager-older-link, #blog-pager-newer-link {
float: none;}
.pagenavi .current {
background: #adadad;
} 

Modelo 3
BloggerPaginacaoNumeradaModelo3
/*— Paginacao numerada — */
.pagenavi .pages {display: none;}
#blog-pager,
.pagenavi {padding: 6px 10px;
clear: both;
text-align: center;
margin: 30px auto 10px;
}
#blog-pager a,
.pagenavi span,
.pagenavi a {
text-decoration: none;
color: #333;
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
background-color: #ecdff2;
padding: 5px 10px;
border: 1px solid #b794c7;
font-size: 16px;
vertical-align: middle;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
margin: 2px 2px;
-webkit-transition: .0s ease-in!important;
-moz-transition: .0s ease-in!important;
-ms-transition: .0s ease-in!important;
-o-transition: .0s ease-in!important;
transition: .0s ease-in!important;
}
#blog-pager a:hover,
.pagenavi a:hover {
border-color: #b794c7;
background:#dfc6ea;
}
#blog-pager-older-link,
#blog-pager-newer-link { float: none }
.pagenavi .current {
border-color: #b794c7;
background-color: #dfc6ea;
background-image: none;
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
}
.pagenavi a:active {
border-color: #b794c7;
background-color: #dfc6ea;
background-image: none;
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
} 
Modelo 4
BloggerPaginacaoNumeradaModelo4
5.Adicione
/*— Paginacao numerada — */
.pagenavi .pages {display: none;}
#blog-pager,
.pagenavi {padding: 6px 10px;
clear: both;
text-align: center;
margin: 30px auto 10px;
}
#blog-pager a,
.pagenavi span,
.pagenavi a {
text-decoration: none;
color: #fff;
background-color: #a5a5a5;
padding: 5px 10px;
border: 1px solid #868686;
font-size: 16px;
vertical-align: middle;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
margin: 2px 2px;
-webkit-transition: .0s ease-in!important;
-moz-transition: .0s ease-in!important;
-ms-transition: .0s ease-in!important;
-o-transition: .0s ease-in!important;
transition: .0s ease-in!important;
}
#blog-pager a:hover,
.pagenavi a:hover {
border-color: #868686;
background:#a5a5a5;
}
#blog-pager-older-link,
#blog-pager-newer-link { float: none }
.pagenavi .current {
border-color: #a5a5a5;
background-color: #868686;
background-image: none;
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
}
.pagenavi a:active {
border-color: #a5a5a5;
background-color: #868686;
background-image: none;
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
} 
Modelo 5
BloggerPaginacaoNumeradaModelo5
/*— Paginacao numerada — */
.pagenavi .pages {display: none;}
#blog-pager,
.pagenavi {padding: 6px 10px;
clear: both;
text-align: center;
margin: 30px auto 10px;
}
#blog-pager a,
.pagenavi span,
.pagenavi a {
text-decoration: none;
color: #582e2e;
background-color: #f6dada;
padding: 5px 10px;
border: 1px solid #b7a6a6;
font-size: 16px;
vertical-align: middle;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
margin: 2px 2px;
-webkit-transition: .0s ease-in!important;
-moz-transition: .0s ease-in!important;
-ms-transition: .0s ease-in!important;
-o-transition: .0s ease-in!important;
transition: .0s ease-in!important;
}
#blog-pager a:hover,
.pagenavi a:hover {
border-color: #b7a6a6;
background:#fcb2b2;
}
#blog-pager-older-link,
#blog-pager-newer-link { float: none }
.pagenavi .current {
border-color: #b7a6a6;
background-color: #fcb2b2;
background-image: none;
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
}
.pagenavi a:active {
border-color: #b7a6a6;
background-color: #fcb2b2;
background-image: none;
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
} 
Modelo 6
BloggerPaginacaoNumeradaModelo6
/*— Paginacao numerada — */
.pagenavi .pages {display: none;}
#blog-pager,
.pagenavi {padding: 6px 10px;
clear: both;
text-align: center;
margin: 30px auto 10px;
}
#blog-pager a,
.pagenavi span,
.pagenavi a {
text-decoration: none;
color: #505050;
background-color: #fff;
padding: 5px 10px;
border: 1px solid #a6a6a6;
font-size: 16px;
vertical-align: middle;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
margin: 2px 2px;
-webkit-transition: .0s ease-in!important;
-moz-transition: .0s ease-in!important;
-ms-transition: .0s ease-in!important;
-o-transition: .0s ease-in!important;
transition: .0s ease-in!important;
}
#blog-pager a:hover,
.pagenavi a:hover {
border-color: #5b5b5b;
background:#dfdfdf;
}
#blog-pager-older-link,
#blog-pager-newer-link { float: none }
.pagenavi .current {
border-color: #a6a6a6;
background-color: #dfdfdf;
background-image: none;
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
}
.pagenavi a:active {
border-color: #a6a6a6;
background-color: #dfdfdf;
background-image: none;
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
} 
Modelo 7
BloggerPaginacaoNumeradaModelo7
/*— Paginacao numerada — */
.pagenavi .pages {display: none;}
#blog-pager,
.pagenavi {padding: 6px 10px;
clear: both;
text-align: center;
margin: 30px auto 10px;
}
#blog-pager a,
.pagenavi span,
.pagenavi a {
text-decoration: none;
color: #000;
background-color: #fff;
padding: 8px 12px;
border: 1px solid #a0a0a0;
font-size: 16px;
vertical-align: middle;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
margin: 4px 4px;
-webkit-transition: .0s ease-in!important;
-moz-transition: .0s ease-in!important;
-ms-transition: .0s ease-in!important;
-o-transition: .0s ease-in!important;
transition: .0s ease-in!important;
}
#blog-pager a:hover,
.pagenavi a:hover {
border-color: #a0a0a0;
background:#dfdfdf;
}
#blog-pager-older-link,
#blog-pager-newer-link { float: none }
.pagenavi .current {
border-color: #a0a0a0;
background-color: #dfdfdf;
background-image: none;
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
}
.pagenavi a:active {
border-color: #a0a0a0;
background-color: #dfdfdf;
background-image: none;
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
} 
Modelo 8
BloggerPaginacaoNumeradaModelo8
/*— Paginacao numerada — */
.pagenavi .pages {display: none;}
#blog-pager,
.pagenavi {padding: 6px 10px;
clear: both;
text-align: center;
margin: 30px auto 10px;
}
#blog-pager a,
.pagenavi span,
.pagenavi a {
text-decoration: none;
color: #000;
background-color: #fff;
padding: 8px 12px;
border: 2px dotted #a0a0a0;
font-size: 16px;
vertical-align: middle;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
margin: 4px 4px;
-webkit-transition: .0s ease-in!important;
-moz-transition: .0s ease-in!important;
-ms-transition: .0s ease-in!important;
-o-transition: .0s ease-in!important;
transition: .0s ease-in!important;
}
#blog-pager a:hover,
.pagenavi a:hover {
border-color: #a0a0a0;
background:#dfdfdf;
}
#blog-pager-older-link,
#blog-pager-newer-link { float: none }
.pagenavi .current {
border-color: #a0a0a0;
background-color: #dfdfdf;
background-image: none;
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
}
.pagenavi a:active {
border-color: #a0a0a0;
background-color: #dfdfdf;
background-image: none;
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
} 
Não deu certo?
Esse código só funciona em blogs públicos. Se o seu blog estiver fechado só para o autor ou leitores selecionados a paginação numerada não vai aparecer. 




Marcadores:

Postagens Relacionadas