Esse código é para quem quer mudar os “posts antigos”, “página principal” e “posts recentes”, por ícones de navegação. A fonte desse post está no blog do Hoctro (eu apenas traduzi para o português). Faça o download do código e explicações.
Vá ao painel de controle, e, em Edit Html, clique em ‘expandir widgets’, então procure e ache essa parte do código:
<b:includable id=’nextprev’>
E troque tudo desde <b:includable id=’nextprev’> a </b:includable> (ambos incluidos) pelo código abaixo:
<b:includable id=’nextprev’>
<div id=’blog-pager’>
<b:if cond=’data:newerPageUrl’>
<a expr:href=’data:newerPageUrl’ expr:title=’data:newerPageTitle’ id=’blog-pager-newer-link’>
<img src=’http://photos1.blogger.com/blogger2/3880/707811929476148/1600/lef t.gif’/></a>
</b:if><b:if cond=’data:olderPageUrl’>
<a expr:href=’data:olderPageUrl’ expr:title=’data:olderPageTitle’ id=’blog-pager-older-link’>
<img src=’http://photos1.blogger.com/blogger2/3880/707811929476148/1600/rig ht.gif’/></a>
</b:if>
<a class=’home-link’ expr:href=’data:blog.homepageUrl’>
<img src=’http://photos1.blogger.com/blogger2/3880/707811929476148/1600/hom e.gif’/></a>
</div>
<div class=’clear’/>
</b:includable>
* Se quiser colocar os icones na parte de cima da página, procure no template (com expandir widgets clicado), essa parte de código e adicone abaixo da parte do código em negrito, essa nova linha em uva.
<b:includable id=’main’ var=’top’>
<div id=’blog-posts’>
<b:include name=’nextprev’/>
Resultado e visualização: Blog do Hoctro
* Os ícones que aparecerão no seu blog usando esse código, estão em cinza, no blog do Hoctro tem em azul, azul claro e laranja. Se quiser usar outros que não sejam esses, procure na web por eles, e troque a url/endereço das imagens de acordo com a imagem que você usar.
Importante, alguns templates de blogs onde o truque é adicionado, os icones são vistos os 3 juntos, isso se deve ao motivo que de falta o código do CSS que faz com sejam vistos corretamente, quais sejam:
#blog-pager-older-link {
float: right;
}
#blog-pager-newer-link {
float: left;
}
#blog-pager {
text-align: center;
}
Então, se seu tema não tem o CSS assim, troque por esse e arrume os icones.
11 Responses for "Adicione ícones de navegação no blog do Blogger"
Ah Claudinha, que felicidade menina, vontade de dar um beijo na ponta do seu nariz.
Vim aqui buscar seu banner para colocar no meu blog, e dei de cara com essa dica. Tudo que eu queria. Já revirei a folha de estilo do meu blog, taquei ícone pra tudo quanto é lugar e não achava onde ia o raio destas setinhas, rsrrsrsr.
Muito obrigada fofa, linda, maravilhosa, necessária, vitaminada, importante…
Beijos
Que bom! Esse post já me foi pedido algumas vezes, mas, queria achar a fonte do mesmo. Bjos. prá vc. amiga.
Valeu a dica, acho que vou colocr lá no memórias.
ihhhhhhhhhh claudyaaaaaaaa este então é um arraso!!! tenho que voltar aqui e ficar 1 mes todo estudando tudo rsrsrs
adorei a dica!
agora vou tentar fazer isso :S
deu certo, consegui fazer… super simples, valeu!!
bjs
Brigado pela dica, valeu mesmo, to vendo umas coisas e usei o lance da letras maior no post, só não vi que pega por que ainda vou postar, mas assim que postar venho auqi dizendo, parabens pelo conteudo.
No meu não deu certo.
Cristiano, dá certo sim, eu testei em um dos meus blogs e está ok. Faça do jeito que está aí que não tem erro.
Queria saber como faço para adicionar ícones a cada um dos elementos de uma widget, como por exemplo vc fez aqui no seu template com as estrelinhas rosas que precedem os nomes dos marcadores e das postagens do arquivo.
Se puder ajudar agradeço.
David, pedido anotado ok! Logo logo tuto sobre isso.
Leave a reply