10 de ago de 2008

Trocar texto "Postagens mais antigas" por imagens de navegação no Blogger

Para quem deseja substituir o texto que fica ao final das postagens no Blooger por imagens como este exemplo AQUI, siga a dica.

Pegue AQUI a imagem que quiser para colocar como botão de navegação.





Este hack vale para o velho e o novo Blogger, implementado em julho de 2010


Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.











Vá até o HTML do seu blog e clique em "Expandir modelos de widget"

Agora copie este código abaixo.
<div class='blog-pager' id='blog-pager'>

Agora clique na tecla "F3" de seu teclado, ao abrir uma janela, cole o código que você acabou de copiar. Viu que ficou selecionado ?


Agora substitua todo este trecho

<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<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>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<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>
</span>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>
</div>


Por este:


<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
       <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><img src='http://3.bp.blogspot.com/_fN8wBWylUn8/TQpkn1KmfyI/AAAAAAAACmo/WspK-_Fz7kI/s1600/arrow21.gif'/></a>
      </span>
    </b:if><b:if cond='data:blog.homepageUrl != data:blog.url'>
      <a class='home-link' expr:href='data:blog.homepageUrl'><img src='http://4.bp.blogspot.com/_fN8wBWylUn8/TQpkv4ijsEI/AAAAAAAACm0/nNsHcJJJ9ts/s1600/home8.png'/></a>
      <b:else/>
      <b:if cond='data:newerPageUrl'>
        <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
      </b:if>
    </b:if><b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><img src='http://2.bp.blogspot.com/_fN8wBWylUn8/TQpkmBeO8bI/AAAAAAAACmk/3cBZoDEtM_4/s1600/arrow20.gif'/></a>
      </span>
    </b:if>
 </div>
</b:if>



Agora basta colar o endereço de suas imagens nos locais grifados com cores.


LARANJA----------------------------seta para esquerda
AZUL----------------------------------casinha
VERMELHO--------------------------seta para direita


Para centralizar as imagens, copie o código abaixo e cole antes de:

]]></b:skin>


/*Blog pager------------------------------------*/ #blog-pager {width: 500px;clear: both;text-align: center;} #blog-pager-newer-link {float:left; padding: 10px 0 0 30px;} #blog-pager-older-link {float:right; padding: 10px 30px 0 0;} #blog-pager {text-align:center;padding: 10px 0 0 0;}

O código em rosa deverá ser modificado de acordo com a largura de seu "#main-wrapper"

26 comentários:

  1. Simplesmente Sensacional

    Passei tempo procurando por isso
    essa dica valeu mesmo

    Obrigado

    ResponderExcluir
  2. oi amigo tentei de todos os geitos fazer isso mas nao consegui..espero ki responda esse comentario o mais rapido ..quero muito por isso no meu blog..

    ResponderExcluir
  3. espero muito ke responda preciso muito disso valeu amigo esse foi o unico lugar onde encontrei isso..

    ResponderExcluir
  4. Valeu mesmo por essa dica, eu havia tentado com outros tutoriais por aí e não tinha dado certo, mas esse resolveu meu problema =D

    ResponderExcluir
  5. Galera, valeu ! Beijos e sejam bem vindos !

    ResponderExcluir
  6. Que legal!!!
    Meu blog ficou bem melhor depois que eu fiz isso =)
    E foi tão fácil de fazer =D

    ResponderExcluir
  7. Sarah, que bom. Seja bem vinda, beijos.

    ResponderExcluir
  8. o meu deu certo só qui quando clico em seguinte Uma Imagem fica masi Auta do que a Outra

    ResponderExcluir
  9. meu blog nao tem o codigo div class='blog-pager' id='blog-pager'

    ResponderExcluir
  10. Muito bom!
    Ficou ótimo no meu blog!
    Parabéns pro blog ae.. ta xow..
    muito conteúdo de qualidade.. recomendoo...

    abraços

    ResponderExcluir
  11. Não achei nenhum dos html acima citado no meu blog, o único que achei foi <div class=, uso um layout com menus.
    Agora o mistério que fica, onde está o html do meu layout, onde fica postangens antigas e novas?

    ResponderExcluir
  12. Opa! vlw msm, estava procurando isso a tempos e nao achava! obrigado msm, pq nao colocam umas imagens de sugestao para nós? com diversoso tipos?? fikdik


    vlw!

    ResponderExcluir
  13. CARA ESSE TUTO ME AJUDO PRA CARACA BRIGADÃO AEW =D!

    ResponderExcluir
  14. Bem feito são os seus né Jota ? Uma coleção de blogs mal feitos, sem falar em sua educação e ética.

    ResponderExcluir
  15. Tudo bem Elke?

    Estava procurando algumas soluções para o meu problema e cheguei por aqui mais uma vez.
    Consegui resolver o meu problema e como não trato exatamente sobre blog,
    vou deixar uma dica legal aqui para o pessoal que tá com problemas em templates tipo magazine. Deixo claro que encontrei a solução fuçando, pois não sei muita coisa de códigos.

    Quem quiser dar uma olhada no blog deixo o link aqui: A elke já conhece.
    http://matematica-na-veia.blogspot.com/

    Meu blog é estilo revista com teaser na página principal, mas eu queria dar um up na parte onde os visitantes quisessem escolher qual postagem mais antiga olhar.

    O que fiz? Coloquei um link "postagem mais antiga" em cada div da página principal dando um efeito legal e proporcionado mais uma alternativa para os visitantes.

    Deê uma olhada e veja como ficou.
    Se quiser o saber como dei esta driblada no código é só copiar a parte do código:
    " Como não dá para colocar html aqui vou deixar um link com o arquivo contendo parte do código que usei.
    http://filebeam.com/ff4da7a6b02ec0dbcfcceeb6e9d9de8e
    "

    E colar no final da div:
    "post hentry uncustomized-post-template"
    Eu coloquei antes dos back links

    Elke sinta-se a vontade para usar e criar algo com esta dica.
    Um abraço pra você e bom trabalho.

    ResponderExcluir
  16. WOW
    Muito obrigado!
    Era exatamente oq eu tava procurando
    eu fiz um template novo pro meu blog http://trinhas.blogspot.com/
    e tava tentando por os botes por outro tutorial
    porem nao axava no html
    ESSE TUTORIAL TA PERFEITO!

    ResponderExcluir
  17. Brigadoooooo pelo post me serviu bastante...
    visitem http://spacehard.blogspot.com pra keim gosta de um bom hard....
    OBRIGADOOO TEMPLATESACESSORIOS

    ResponderExcluir
  18. Valeu parceiro pela dica.Só tem um problema.
    Meus gifs ficaram desalinhado,um ficou um pouco mais pra baixo que os outros dois.
    Por que será.

    Valeu

    ResponderExcluir
  19. consegui, mais um pouco diferente do esperado!


    mais mesmo assim fico Grato ;D

    ResponderExcluir
  20. Sensacional ^^ Achei muito bom e funcionou perfeitamente no meu ^^

    Isso varia muito de template pra template ^^ Mas no meu foi sem problema \o/

    Parabéns!

    ResponderExcluir
  21. Isso me ajudou muitooooooooo. Muito obrigado

    ResponderExcluir
  22. Elke, por favor, me ajuda, eu não achei nenhum dos HTML citados acima, isso tem algo a ver com meu Blog ter um Template estranho, ou por eu ter modificado algo nele ?

    ResponderExcluir
  23. Caracas, eu testei em 2 Blogs, NÃO DEU CERTO em nenhum! Podes ajeitar ?

    ResponderExcluir
  24. uma duvida que vem na cabeça de muitos e poucos sabem é como mudar a frase quando passa o mouse sobre a imagem para proxima pagina ou seja postagem mais antigas e recentes como mudaria esse texo que aparece quando por cima é colocado o mouse ?

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube