Páginas numeradas para blogs


Páginas numeradas para blogs
Hoje vamos aprender a colocar as páginas do blog numeradas. Ela é um recurso bastante útil, pois facilita a navegação do seu blog ao visitante. Além de um design simples, bonito e não ocupa muito espaço.

Para quem não sabe do que estou falando, ela fica no lugar de inicio, postagens mais antigas e postagens recentes do blog (no rodapé).


  TUTORIAL


1. Procure o código

 <b:includable id='mobile-index-post' var='post'> 

2. Cole o código do botão "Acesse", logo ACIMA do código encontrado


Eu já fiz algumas alterações no código, mais você poderá mudar:

• perPage: 5, → Significa quantos posts serão exibidos por página.
• numPages: 5, → São quantos números de páginas serão exibidos na página de navegação.
• &quot;Primeira página&quot;, →Altere Primeira página, pelo nome que desejar.
• &quot;Última página&quot;, → Altere Última página, pelo nome que desejar.
• nextText:&quot;&#187;&quot;, → Corresponde ao símbolo " » " altere por outro símbolo, se quiser.
•prevText: &quot;&#171;&quot; → Corresponde ao símbolo " « " altere por outro símbolo, se desejar.

3. Agora procure pela linha:

 <b:include name='nextprev'/>
 

4. Ao encontrá-la, substitua  pelo código abaixo:



5. Agora procure pela linha:

 <b:includable id='nextprev'>
 

6. Agora procure por:

 ]]></b:skin> 
 

7. Escolha um dos modelos abaixo e cole acima de ]]></b:skin>

Páginas numeradas para blogs

#blog-pager, .pagenavi{
    padding: 6px 10px;
    clear: both;
    text-align: center;
    margin: 20px auto 10px;
}
#blog-pager a,
.pagenavi span,
.pagenavi a {
    margin: 0 6px;
    display: inline-block;
    font-weight: 400;
    line-height: 1.2em;
    text-decoration: none;
    background-color: #295874;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color: #FFFFFF;
    padding: 5px 8px;
}
#blog-pager a:hover,
.pagenavi a:hover,
.pagenavi span.current{
    background-color: #3180AE;
    text-align: center;
}
#blog-pager-older-link,
#blog-pager-newer-link { float: none }  




Páginas numeradas para blogs

/*---Page-Navigation---*/
#blog-pager, .pagenavi { padding: 5px 10px;
     clear: both;
     text-align: center;
     margin: 30px auto 10px;
}
#blog-pager a, .pagenavi span, .pagenavi a {
border: 1px solid #D2136F;/*Cor da Borda Rosa*/                
padding: 5px 10px;                 
text-decoration: none;                 
font-family: arial;                 
color:#fff;                 
margin: 2px;                 
background-image: url('http://4.bp.blogspot.com/-qif9KRu_IBo/UfBrsXlprOI/AAAAAAAAADU/3U1HiFHE1Mw/s1600/menubg1.PNG');/*Imagem de Fundo*/
background-position: left;            
-webkit-transition: all 0.7s ease-in-out;               
-moz-transition: all 0.7s ease-in-out;                 
-o-transition: all 0.7s ease-in-out;  
}
#blog-pager a:hover, .pagenavi a:hover {
background-position:right; 
}
#blog-pager-older-link, #blog-pager-newer-link {
     float: none;
}
.pagenavi .current {
background-position:right; 
}




Páginas numeradas para blogs

/*---Page-Navigation--- */
#blog-pager, .pagenavi{
    padding: 6px 10px;
    clear: both;
    text-align: center;
    margin: 20px auto 10px;
}
.pagenavi span.current{color: #999999;}
#blog-pager a,.pagenavi a, .pagenavi span{background: #FFFFFF;border-radius: 30px 30px 30px 30px;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);color: #AE2525;margin: 0 6px;display: inline-block; font-weight: 400;line-height: 1.2em;text-decoration: none;padding: 10px 12px;}
#blog-pager a:hover, .pagenavi a:hover {background: #eaeaea; color:#EA1C5D; border:1px none #ccc; -webkit-transition-duration: .90s;}
#blog-pager-older-link,
#blog-pager-newer-link { float: none }  



Páginas numeradas para blogs

/*---Page-Navigation--- */
.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: white;
margin: 2px;
background: black;
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: orange;
}
#blog-pager-older-link, #blog-pager-newer-link {
     float: none;}
.pagenavi .current {
background: orange;}  




8 . Apos escolher o modelo, altere as cores para combinar com seu blog

Beijinhos


Créditos de estilos e imagem: templates para você
COMPARTILHE :  

Comentários
7 Comentários

7 comentários

avatar
admin
segunda-feira, 26 outubro, 2015 ×

Bia, sua linda!!! muito obrigada por ter atendido o meu pedido <3 coloquei no meu blog e ficou uma graça, você sempre arrasa nos tutoriais. Já te indiquei para várias amigas blogueiras

Resposta
avatar
admin
terça-feira, 27 outubro, 2015 ×

Ótimo ter ajudado e gostado e muito obrigada por me indicar as suas amigas =D

Resposta
avatar
admin
quarta-feira, 04 novembro, 2015 ×

Bia, olha eu perturbando de novo! hoje tentei personalizar a caixa de comentários e não deu certo, exclui as modificações mas quando percebi as páginas numeradas haviam desaparecido, eu tinha feito o backup então restaurei mas mesmo assim não apareceu, o engraçado é que esse código ainda estava lá, tive que excluir todo o código e só assim voltou para a paginação normal do blogger. Agora não consigo mais colocar o modelo que estava, saberia me dizer se alguma coisa entrou em conflito? ou o porque de eu não conseguir mais colocar? se não tiver como saber assim sem olhar, acha que seria possível se você mexesse? se sim, entro em contato por email para fazermos o orçamento. Obrigada

Resposta
avatar
admin
quarta-feira, 04 novembro, 2015 ×

Oi Bia.
Bom falando assim, não dá pra saber exatamente do que se trata. Agora pelo que li, você fez alterações na caixa de comentários e paginação mais ambas não entram em conflito. Saiba que as paginações do blog só serão aparecer com o blog publicado, então verifique se você o colocou privado.
Se mesmo assim, não der certo, entre em contato comigo pelo e-mail: contatosbiabarros@hotmail.com
Para ver e saber melhor sobre seu problema.
Beijinhos ♥

Resposta
avatar
admin
domingo, 23 outubro, 2016 ×

Tchê você merece um beijo funcionou 100000000000000000000000000000000000%

Resposta
avatar
admin
segunda-feira, 24 outubro, 2016 ×

Muito agradecida por seu beijo =D
Beijinhos pra você!

Resposta


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço por seu comentário e por sua presença!

Apenas peço que leia:

1 - Devido a falta de tempo, não prometo responder a todos os comentários. Mais farei o possível.

2 - Educação sempre! Comentários com palavras de baixo calão, não serão publicados ou respondidos.

3 - Comentários não relacionados ao titulo, não serão publicados.

4 - Comente a vontade, deixe sua opinião, crítique, esclareça suas dúvidas e dê suas sugestões ou dicas sobre o assunto referente à postagem.


Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

Obrigada por seu comentário! Ele é muito importante para mim.

É proibida a reprodução total ou parcial dos artigos deste blog sem autorização|Somente terá o direito de republicar os códigos publicados dando os devidos créditos.