Páginas

Imagem no lugar dos links de navegação

Tumblr_lyk9du5cdd1qjywbko1_500_large
Sabe aqueles links que aparecem no rodapé das postagens, que permitem ao visitante ver as postagens anteriores, ou voltar para o início? Se você não sabe do que estou falando, são esses links aqui:

Neste tutorial você vai aprender como colocar uma imagem no lugar deles, mais ou menos assim:
Imagem do blog Attitude Included

Eu já postei um tutorial ensinando isso, mas aquele método está dando erro depois da atualização do blogger, então resolvi postar uma maneira nova (e muito mais fácil) de fazer isso.
Vamos lá! Antes de tudo, crie as três imagens que você vai usar, ou escolha umas das que eu fiz que estão no fim desse post. Hospede as imagens em algum servidor.

Abra o painel do blogger, clique no nome do seu blog, depois, clique em "Modelo" no menu vertical que aparece no lado esquerdo da tela. Clique no botão "Editar HTML" que fica em baixo da miniatura do seu blog, e clique em prosseguir no aviso que aparecer.
Marque a opção "Expandir modelos de widgets"







Substituindo o link "Início"
 Aperte Ctrl+F e procure por: <data:homeMsg/> Esse código vai aparecer em dois lugares, mas você só vai mexer no primeiro que aparecer.
 Substitua esse código pelo código abaixo:
<img src="url_da_imagem"/>


Substituindo o link "Postagens mais antigas"
 Aperte Ctrl+F e procure por: <data:olderPageTitle/>
 Substitua esse código pelo código abaixo:
<img src="url_da_imagem"/>


Substituindo o link "Postagens mais recentes"
 Aperte Ctrl+F e procure por: <data:newerPageTitle/>
 Substitua esse código pelo código abaixo:
<img src="url_da_imagem"/>


Agora é só visualizar. Se estiver tudo nos conformes, salve. Abaixo tem algumas imagens que eu fiz para vocês usarem neste tutorial. Não esqueçam de colocar créditos ok?

    
  


Amanhã a maratona de tutoriais continua! Kissus

99 comentários:

  1. elisa bastos martins de olivei1/2/12 18:09

    Oi Liah! Amo seu blog!!! Eu tinha visto esse tuto uma vez e sempre uso ele nos lays que faço! Liah se puder me ajudar gostaria de saber como você fez esse menu vertical lindo que fica ao lado dos posts. Beijos,

    voandolalonge.blogspot.com

    ResponderExcluir
  2. Anna C. Potter1/2/12 20:52

    Eu estava precisando deste tuto Liah *-*
    Obrigada por postar as imagens tbm, que são onde tenho a maior dúvida =/

    madrugadasdeverao.blogspot.com

    ResponderExcluir
  3. pode postar mais styles pra photoshop?
    amooo o seu blog é o mais lindo e com mais conteúdo que já vi 
    bjo
    bjo
    bjo
    vi

    ResponderExcluir
  4. Juhh Rabelo2/2/12 09:54

    Liah, ensina o tutorial do seu menu. Por favor.

    http://blogclubeteen.blogspot.com/

    ResponderExcluir
  5. precisava justamente disso, obrigada

    ResponderExcluir
  6. Liah, gostaria de entrevistar vc para o meu blog! Sou muito fã do Cherry Bomb e queria fazer algumas perguntinhas pra vc sobre o blog e sobre os artistas que vc curte, nada muito pessoal!
    Espero que tope fazer a entrevista!
    Bjs

    http://garotaespeerta.blogspot.com/ 

    ResponderExcluir
  7. olá liah,tudo bom?Olhe como sei que seus tutoriais são muito úteis,sempre funcionam e talz eu queria te fazer um pedido,acontece que eu baixei vários styles para ps cs3 e aí quando vou la naquela setinha clico em  carregar styles,nunca aparece os que eu baixei,ou melhor,não aparece quase nenhum dowload,ai se vc puder me ajudar eu ficaria muito grata,mas se não tudo bem,eu entendo,espeo que tire minha dúvida,beijjos,carol.
    http://blogmeaningless.blogspot.com/

    ResponderExcluir
  8. BlogBoladeChiclete2/2/12 16:42

    Adorei! Bem mais simples, acho que vou trocar o meu por um desses! Se eu colocar um desses te aviso. Queria pedir para você postar mais brushes, PNGs e outros desse tipo. Beijinho!

    blog-bola-de-chiclete.blogspot.com

    ResponderExcluir
  9. Gabiluckmann2/2/12 16:42

    OOI, fiz um Top 5 blogs de atitude e seu blog ficou em 2º lugar! Olha lá
    http://blog-abcteen.blogspot.com/2012/02/top-5-blogs-de-atitude.html

    ResponderExcluir
  10. AAh,que legaal! 
    Estranho dar erro,eu uso o novo Blogger e deu tudo certinho com esse mesmo tutorial...=*
    Mas enfim,ajudou muuita gente postando ele de novo amore..rsrs

    Beeijo!
    http://blogmymemories.tk

    ResponderExcluir
  11. Amei ! Obrigada pelo tuto! e pode deichar eu te darei os devidos créditos ! Beijos
    http://girlsperfeita.blogspot.com

    ResponderExcluir
  12. Joseane-023/2/12 14:50

    O meu ficou estranho como eu tiro?

    ResponderExcluir
  13. olha só, meu blog ta com os botoes escondidos atrás dos posts, sabe como eu ponho eles la pra baixo? me add italo_ys@hotmai.com

    ResponderExcluir
  14. Larissa Gama4/2/12 14:28

    Eu tentei fazer isso uma vez,mas não deu certo,vou tentar denovo! hahahaha

    http://girlsrepublic-s2.blogspot.com/

    ResponderExcluir
  15. LizzieMnuniz6/2/12 18:03

    Procurei tag mas não aparece =/

    ResponderExcluir
  16. ME AJUDOU BASTANTE!
    Obrigada.

    placeforgirlsblog.blogspot.com

    ResponderExcluir
  17. Fofa o meu modelo é o "viagem" tentei fazer nele e não deu, mas nos outros deu normalmente sera que no "viagem" esse cod. não da certo??

    Bjs...

    ResponderExcluir
  18. seu blog é otimo,demais!!!Tutoriais todos que eu fiz funciona,ameeeei o blog!

    ResponderExcluir
  19. Useei as imagens de anterior inicio e proxima a 4ª
    Bjs
    http://noisconectados.blogspot.com.br

    ResponderExcluir
  20. adoreeei! consegui arrumar direitinho no meu, thanks

    acreditaremserfeliz.co.cc

    ResponderExcluir
  21. Gostei, amei esse post! Já ate fiz no meu!

    eternosonhooficial.blogspot.com

    ResponderExcluir
  22. Oiie. adorei a postagem usei a 4º opção de proxima anterior...
    http://teen-girl-luuh.blogspot.com.br/

    ResponderExcluir
  23. Oiie! Adorei a postagem e ameii seu blog!
    Tô seguindo=D
    Beijocas!
    http://blogoficialfriendsforever.blogspot.com.br/

    ResponderExcluir
  24. Eu tentei fazer, só que peguei as imagens de outro blog. Quando eu fiz, desapareceu, agora n da pra mudar de página.

    ResponderExcluir
  25. adorei esse ainda não sabia desse amei muitoo

    ResponderExcluir
  26. Amore, eu não achei no meu coódigo =/ Ajuda aqui ?

    http://cafe-vermelho.blogspot.com

    ResponderExcluir
  27. Tambem, não achei no meu code ajuda eu ? c;

    http://http://garotasdebigodes.blogspot.com

    ResponderExcluir
  28. Putz, tentei fazer, um Deu Certo, quando fui fazer o Resto fiz um Desastre com HTML ¬¬'
    Mas amei o Tutorial.
    BeijOs

    ResponderExcluir
  29. Ajudou muito.. Obrigadaa!
    Lindo seu blog viiu?
    garotasdeat.blogspot.com

    ResponderExcluir
  30. Quando entro no seu blog dá vontade de GRITAR! (:
    Consegui fazer e amei a explicação.
    Obrigado floor ;**

    ResponderExcluir
  31. Anônimo6/6/12 19:13

    Que legal, usei no meu blog.

    ResponderExcluir
  32. fiz uma com sua imagem, mas tipo, como q eu vou dar os créditos? kk

    ResponderExcluir
  33. Hoy Liah, eu não queria incomodar mesmo! Mas estou com um probleminha, eu coloco o codigo no Ctrl+F e aparece 0 de 0!

    Oque eu faço?

    Um beijo, desculpa mesmo! Laah

    http://famadelouca.blogspot.com.br/

    ResponderExcluir
  34. Meu deeeeus Liaah! Desculpa mesmo incomodar (again) é só pra avisar que eu tinha apenas esquecio de selecionar aquela caixinha! Pode até deletar esses comentarios, viu?

    Ai como sou tonta! hahaha
    Um beijo,

    http://famadelouca.blogspot.com.br/

    ResponderExcluir
  35. Adorei!! Mto mais simples *-*

    ResponderExcluir
  36. tutoriais ótimos >< sem dúvidas um dos melhores blogs *--*

    ResponderExcluir
  37. Anônimo2/7/12 21:14

    ameiiiiiiiiiii,muito obrigadaa!

    http://docemor.blogspot.com.br/

    ResponderExcluir
  38. Anônimo7/7/12 12:07

    Meu blog está ficando incrível graças as suas dicas, obrigada
    *----*

    ResponderExcluir
  39. Quando se passa o mouse aparece escrito "Postagens mais antigas" ou "Postagens mais recentes"... É possível mudar esse título?
    Brigadiinha <3

    ResponderExcluir
  40. Oi lia,tudo bem?
    Adorei o blog!
    www.sweet-girls2.blogspot.com

    ResponderExcluir
  41. Adorei o tutorial, estou usando! Parabéns pelo blog, adoro aqui.

    http://meeninadeallstar.blogspot.com.br/

    ResponderExcluir
  42. Amei, tipo, tava precisando muiiiiiito disso !!!

    http://www.mitchietorres.tk/

    ResponderExcluir
  43. e agora? como colocar a foto que eu quero ?

    ResponderExcluir
  44. veeeeeei do ceu , não consegui arrumar! bagunçou tudo! como faz pra voltar ao normal ?

    ResponderExcluir
  45. OMG, me ajudou muito (como sempre haha), muito obrigada, tutorial muito simples. Os creditos por isso estão no meu blog, na pagina tutorial.
    Xoxo
    http://sabrinacamposc.blogspot.com.br/

    ResponderExcluir
  46. Amei o tutorial,eu peguei a primeira imagem tá bom ?
    Beijos

    glitterofparadise.blogspot.com

    ResponderExcluir
  47. aiiiii deu ruim a seta ficou pro lado errado me ajudaaaaaaaaaaa não consigo tirar socorro!

    ResponderExcluir
  48. Olá preciso da sua ajuda, se fosse possível.
    Tenho seguido seus tutoriais. Então um dia resolvi colocar em prática este tutorial!
    Só que esquecime de fazer a cópia do template antes de por em pratica o tutorial! Quando terminei cliquei em salvar mas deu erro pois quando carrego para ir para a proxima página que tem como imagem"Anterior" não sei porque, aparece um link por cima do home e não era assim que devia ficar! Não consiguo fazer alteração nenhuma! Será que você me pode ajudar

    http://www.tutoriaisdeblogger.blogspot.com

    ResponderExcluir
  49. Obrigado! Mas já resolvi sozinho o meu problema com o erro que estava a dar com as setas mas obrigado na mesma !

    Visitem: http://tutoriaisdeblogger.blogspot.pt/

    ResponderExcluir
  50. muito bom... ajuda muito os tutoiais que vc faz.. porem não tenho muita paciencia pra fazer
    qualquer dia vou tentar de tanto ler e ver esse seu blog lindo kk da ate uma ''invejinha'' de tão lindo...
    por que eu ja uso pronto

    http://bikinedebolinhas.blogspot.com
    http://benichel.blogspot.com

    ResponderExcluir
  51. Oi,
    Eu segui o seu tutorial e deu certo, porém as imagens ficaram uma no lugar da outra: Posts Recentes ficou no lugar de Posts Antigos e vice versa. Como faço para inverter?
    Obrigada.
    bjbj

    ResponderExcluir
  52. Oiee aqui eu tentei colocar mas so consegui o inicio :( Agora minhas postagens recentes e antigas desapareceram!!! O que devo fazer????????? Pf ajuda

    ResponderExcluir
  53. Adoreeei !
    Ja coloquei no meu, beijos.
    Meu blog é de maquiagem , caso se interesse dá uma olhadinha, quando tiver um tempinho *-*
    beijão

    ResponderExcluir
  54. Seu blog é perfeito, seus tutoriais super completos e de facil compreensão, você está me ajudando muito!

    Obrigada

    ResponderExcluir
  55. Estou fazendo meu layout ' e peguei o ultimo ' otimo tuto *-*

    ResponderExcluir
  56. Liah se eu quiser colocar apenas 'próxima' e 'anterior' sem o 'inicio' como faço, apago o código do inicio mesmo assim e deixo em branco ou tem outra coisa?
    Vou tentar esse tutorial pq eu já tentei várias vezes aquele outro e nunca deu certo e esse código só serve se estiver usando a nova versão do painel do blog ou não interfere em nada pq eu uso a interface antiga.
    BjooO!

    ResponderExcluir
  57. Anônimo3/9/12 21:52

    APARECEU NÃO ENCONTRADO ESTE TEXTO. PRQ?

    ResponderExcluir
  58. Toda quarta eu procuro algumas dicas para ajeitar meu blog, e hoje já é a 5° vez que aparece seu blog como resposta, muito obrigada!
    As dicas são ótimas, o blog é lindo e tá de parabéns!
    Entrem lá no meu blog sei que vão gostar> amantesdemoda.blogspot.com.br

    ResponderExcluir
  59. eu nao achei isso:
    amei seu blog, é 1° vez que vejo e ja estou seguindo!

    ResponderExcluir
  60. ops.: nao saio no meu comentario anterior o que eu nao consegui ver:

    ResponderExcluir
  61. Realmente muito fácil! Gostei muito desde blog, estou montando um novo, com tutoriais deste. Podem deixar que não vou esquecer dos créditos!

    Meu blog>> http://www.youinsupernatural.com

    ResponderExcluir
  62. Estava nescecitando desse tutorial

    ResponderExcluir
  63. Nossa amo o seu blog , amei esse tutorial faz um efeito bem bonito no blog.. eu peguei os botões azuis . OBRIGADA!! (:

    ResponderExcluir
  64. amei http://checkgaga.blogspot.com.br/ OBG ♥♥♥'

    ResponderExcluir
  65. ADOREI O TUTORIAL, ESTAVA TENTANDO POR ISSO FAZ TEMPO, MUITO OBRIGADA, FICOU ÓTIMO NO BLOG ^^
    http://dama--de--ferro.blogspot.com.br/

    ResponderExcluir
  66. Adorei o tutorial , só que o meu ta dando erro tentei mais de 5 vezes .
    Do mesmo jeito ta demais !
    Como se tira ???
    Obrigada , amo o seu blog !

    ResponderExcluir
  67. no meu blog não acho quando aperto ctrl f e o unico que acho que com data é o titulo.

    ResponderExcluir
  68. super obrigado...o Cherry Bomb é demais *-*

    ResponderExcluir
  69. Não consegui quando vou visualizar aparece somente anterior e inicio...

    ResponderExcluir
  70. Não consigo nunca colocar nenhuma das coisas que você coloca aqui, sou super fã do blog, mais nunca consigo fazer nada, coloco, leio de novo faço de tudo, e quase nenhuma das postagens serve, aqui eu hospedo a imagem no Tinypic, será por isso que ela não funciona ?

    ResponderExcluir
  71. Bom estou fazendo um blog novo e estou amando suas dicas ..
    parabéns e estou usando as barrinhas ^_^

    ResponderExcluir
  72. Estou usando as suas imagens e o tutorial foi muito útil, dei os créditos no blog!

    Obrigada,
    www.vitima-fashion.blogspot.com/

    ResponderExcluir
  73. fiz e ficou ótimo brigada floor
    http://dicasdamilaebia.blogspot.com.br/

    ResponderExcluir
  74. Ficou ótimo!Adorei!

    http://princesadopanico.blogspot.com.br

    ResponderExcluir
  75. Anônimo1/2/13 12:30

    Ficou lindo!Amei amei amei,peguei as ultimas imagens de inicio,anterior e próximo,kissus :)
    http://apenasumameninafashion.blogspot.com.br/

    ResponderExcluir
  76. Amei ! Usei no meu blog ( acabei de criar ) e ficou lindo ! Beijos
    http://crazycherry-sa.blogspot.com.br/

    ResponderExcluir
  77. amei amei amei!! usando :)
    http://demilovatof.blogspot.com.br/

    ResponderExcluir
  78. Oi eu amei o tutu parabéns :)
    http://sendooadolescente.blogspot.com.br/

    ResponderExcluir
  79. Flor um blog te plagiou ! pego sua matéria como se fosse dele ... Olha só : http://meninapopss.blogspot.com.br/2013/03/11mudar-post-antigas-post-recentes-e.html

    ResponderExcluir
  80. peguei as imagens rosas tá! beijos

    ResponderExcluir
  81. Este comentário foi removido pelo autor.

    ResponderExcluir
  82. Pode atualizar com a nova "interface" do blog? q.q

    ResponderExcluir
  83. Consegui tudo direitinho, menos o botão início, acredita? Morri!
    www.tamirissindice.blogspot.com

    ResponderExcluir
  84. Caraca, meu vcs são feras!

    ResponderExcluir
  85. Oi , então eu não achei o "expandir modelos de widget" , poderia me ajudar? Obrigada desde já!

    ResponderExcluir
  86. Adorei o tuto ! :) Já fiz no meu, mais com outras imagens! Linda :) Que pena que abandonou o blog :(

    ResponderExcluir
  87. Hoy amei o tuto brigadinha sempre visito esse blog e sempre me alegro!

    ResponderExcluir
  88. Obrigada,ficou otimo no meu Blog.Beijocas!

    ResponderExcluir
  89. usei aquele com contorno rosa

    ResponderExcluir