A navegação dentro de um blog é fundamental para o leitor, mudar de uma postagem/página para outra é algo constante, e a função dos links de navegação, que se encontram no final das postagens/páginas é exatamente esta, fazer com que ele vá para outra página. Por padrão, os modelos do Blogger têm estes links estilizados conforme o tema escolhido e permite sua personalização. Menus/Links de navegação centralizados corretamente
Entretanto, em algumas páginas, o alinhamento destes links não certinhos, mudando de posição constantemente, conforme exemplos abaixo. Menus/Links de navegação centralizados incorretamente
O link "Ver versão para dispositivos móveis" aparece apenas quando visualizando o blog em um dispositivo móvel, mas com o modo desktop.
Para alterar este alinhamento, para que em todas as páginas o menu de "Página Inicial" esteja na mesma posição e não mais para a esquerda ou direita, é necessário fazer alguns pequenos ajustes. Aprenda a como fazê-los neste tutorial!
Estrutura
Inicialmente, vamos fazer algumas alterações na estrutura dos menus da nevagação.
1Vá em Modelo > Editar HTML > Clique na caixa de códigos > Aperte Ctrl + F ou F3> Procure por <div class='blog-pager' id='blog-pager'>, você deve achar alguns locais com este código, procure até encontrar o trecho semelhante ao abaixo:
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
[...]
</div>
<div class='clear'/>
</b:includable>
2 Agora, substitua tudo de <b:includable id='nextprev'> até </b:includable> pelo código abaixo:
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<span id='blog-pager-newer-link'>
<b:if cond='data:newerPageUrl'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'>
<data:newerPageTitle/>
</a>
</b:if>
</span>
<span id='blog-pager-home-link'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</span>
<span id='blog-pager-older-link'>
<b:if cond='data:olderPageUrl'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>
<data:olderPageTitle/>
</a>
</b:if>
</span>
<span id='blog-pager-mobile-link'>
<b:if cond='data:mobileLinkUrl'>
<div class='blog-mobile-link'>
<a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
</div>
</b:if>
</span>
</div>
<div class='clear'/>
</b:includable>
3 Salve.
Estilização
Agora, é necessário aplicar alguns ajutes no estilo destes menus.
1Vá em Modelo > Editar HTML > Clique na caixa de códigos > Aperte Ctrl + F ou F3> Procure por #blog-pager {, você deve achar algo parecido com isso:
#blog-pager {
font-size: 140%;
}
2 Substitua o trecho acima pelo código abaixo:
#blog-pager {
font-size: 140%;
display: flex;
flex-wrap: wrap;
margin: 0px auto;
}
#blog-pager span {
flex-basis: 100%;
flex: 1;
}
#blog-pager-newer-link {
text-align: left;
}
#blog-pager-older-link {
text-align: right;
}
#blog-pager-mobile-link {
flex-basis: 200% !important;
}
3 Salve.
Com estas alterações, o resultado que temos é o seguinte: Menus/Links de navegação centralizados corretamente em todas as páginas
warningAtenção!
Testado somente no modelo Travel do Blogger.
Eu >acho< que essa área no meu atual layout está alinhada. E sim, eu só acho mesmo... Tutorial super necessário!
(só apareci pra dizer 'oi' mesmo, não recebo atualizações do seu blog e quando vou ver tem 2 postagens novas, daí fico com vergonha de comentar muito tempo depois aaaa a partir de agora vou comentar mesmo que não seja um puta comentário interessante ;p)
será? 👀 eu já nem sei mais, as vezes *sempre* eu só ignoro coisas desalinhadas pra evitar estresse kkkkkk já me estressei demais tentando alinhar 'N' coisas, então agora estou na minha fase 'desconstruída.
O Alan e seus tutorais super necessários.. Dá até vergonha de postar tutorias achando que sabemos algo hahaha pois tu não arrasa, tu humilha :v
Tu acredita que nunca fiz esse teste? Pois não entro no blogger pelo celular, na verdade nem paro para pensar na possibilidade de entrar pelo celular hahaha, agora eu fiquei encucada e vou fazer o teste e se tive desalinhado, advinha qual tuto irei usar? u.u
Aié, eu só sigo um padrãozinho pros textos e faço o passo a passo huahushauhsa
Então, depois que eu percebi esse desalinhamento eu não consegui parar de olhar pra ele, fui obrigado a ajustar. Isso não acontece só quando visualiza por algum dispositivo móvel, mas pelo computador também. Fique à vontade pra usar o tuto :v
Olá, boa tarde! Fui realizar esse tutorial e não consegui, quando clico em visualizar, ele sobe um erro: "A solicitação tem um valor de entrada inválido. Atualize a página original e tente novamente. Error 400"... Sim, eu iniciei novamente meu processo de criar um layout. Haha. Já cansei de editar e criar... Mas, deixei o outro guardado, vai que um dia eu volte achar ele bonito, digo isso, pois já criei 2 layouts nesse meio tempo. Um completo na cor roxa e o outro em preto e branco, inclusive, o novo que estou fazendo é preto e branco também. Abraços e até.
Acredito que esta mensagem seja específica do Blogger, talvez fechar tudo e abrir de novo funcione, pois pode acontecer da sua sessão no navegador ter expirado e a visualização do template tenha ficado inválida também. Refiz este tutorial em um blog novo e não apresentei nenhum problema... Se isso voltar a acontecer após fazer este tutorial, me chama no e-mail que tentarei te ajudar mais de perto :)
Criar templates que nunca serão usados são quase um hobby pra mim, tenho algumas versões guardadas da época do We Heart HTML que provavelmente nunca verão a luz do dia, não excluo eles pois tem algumas coisas que usei neles que gostaria de reaproveitar no futuro. O importante é não esquecer deles xD
Gostei da ideia de usar as cores preto e branco, acho que um template mais neutro seja interessante, talvez ter pequenos destaques em alguma cor específica (roxo, por exemplo) traria detalhes legais pra ele.
Fique à vontade para interagir e tirar dúvidas. • Peça tutoriais em Contato • Você pode usar as tags negrito (<b>), itálico (<i>) e links (<a>) • Comente com o link do seu blog para que eu possa visitá-lo ♪(^∇^*)
Eu >acho< que essa área no meu atual layout está alinhada. E sim, eu só acho mesmo...
ResponderExcluirTutorial super necessário!
(só apareci pra dizer 'oi' mesmo, não recebo atualizações do seu blog e quando vou ver tem 2 postagens novas, daí fico com vergonha de comentar muito tempo depois aaaa a partir de agora vou comentar mesmo que não seja um puta comentário interessante ;p)
Hummmm, será mesmo 👀
Excluir(apareça sempre que quiser, você é mais que bem-vinda o(*^▽^*)┛)
será? 👀
Excluireu já nem sei mais, as vezes *sempre* eu só ignoro coisas desalinhadas pra evitar estresse kkkkkk já me estressei demais tentando alinhar 'N' coisas, então agora estou na minha fase 'desconstruída.
Não é desalinhamento, é conceito. E quem reclamar não entendeu :v
ExcluirOiee neném =3
ResponderExcluirO Alan e seus tutorais super necessários.. Dá até vergonha de postar tutorias achando que sabemos algo hahaha pois tu não arrasa, tu humilha :v
Tu acredita que nunca fiz esse teste? Pois não entro no blogger pelo celular, na verdade nem paro para pensar na possibilidade de entrar pelo celular hahaha, agora eu fiquei encucada e vou fazer o teste e se tive desalinhado, advinha qual tuto irei usar? u.u
Beijos xuxu >.<
Hallo =3
ExcluirAié, eu só sigo um padrãozinho pros textos e faço o passo a passo huahushauhsa
Então, depois que eu percebi esse desalinhamento eu não consegui parar de olhar pra ele, fui obrigado a ajustar. Isso não acontece só quando visualiza por algum dispositivo móvel, mas pelo computador também. Fique à vontade pra usar o tuto :v
Kissus~
Olá, boa tarde!
ResponderExcluirFui realizar esse tutorial e não consegui, quando clico em visualizar, ele sobe um erro: "A solicitação tem um valor de entrada inválido. Atualize a página original e tente novamente.
Error 400"...
Sim, eu iniciei novamente meu processo de criar um layout. Haha. Já cansei de editar e criar... Mas, deixei o outro guardado, vai que um dia eu volte achar ele bonito, digo isso, pois já criei 2 layouts nesse meio tempo. Um completo na cor roxa e o outro em preto e branco, inclusive, o novo que estou fazendo é preto e branco também.
Abraços e até.
Oie!
ExcluirAcredito que esta mensagem seja específica do Blogger, talvez fechar tudo e abrir de novo funcione, pois pode acontecer da sua sessão no navegador ter expirado e a visualização do template tenha ficado inválida também. Refiz este tutorial em um blog novo e não apresentei nenhum problema... Se isso voltar a acontecer após fazer este tutorial, me chama no e-mail que tentarei te ajudar mais de perto :)
Criar templates que nunca serão usados são quase um hobby pra mim, tenho algumas versões guardadas da época do We Heart HTML que provavelmente nunca verão a luz do dia, não excluo eles pois tem algumas coisas que usei neles que gostaria de reaproveitar no futuro. O importante é não esquecer deles xD
Gostei da ideia de usar as cores preto e branco, acho que um template mais neutro seja interessante, talvez ter pequenos destaques em alguma cor específica (roxo, por exemplo) traria detalhes legais pra ele.
See ya~