Páginas numeradas para blogs | Quero Dicas | Tutoriais para seu blogs


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é).
Então, vamos logo aprender?

Esta postagem é um pedido a seguidora e visitante Beatriz Andrade.

  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

Espero que eu tenha ajudado. Beijinhos

Me Contrate!


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

7 comentários

Clique e deixe seu comentários
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
avatar
admin


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço por sua colaboração.

Comente. Mais peço que leia antes:

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 xingamentos entre outros, não serão publicados ou respondidos.

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

4 - Comentários somente URLs de terceiros, não serão publicados.

♥ - Caso queira divulgar seu blog gratuitamente, Acesse, Galeria de Blogs
♥ - Eu terei o maior prazer em colocar o link ou seu banner nesta galeria.

Muito obrigada por seu comentário e por sua vista.
Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

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