Páginas

01 fevereiro 2012

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 de fevereiro de 2012 às 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. 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. Liah, ensina o tutorial do seu menu. Por favor.

    http://blogclubeteen.blogspot.com/

    ResponderExcluir
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. Amei ! Obrigada pelo tuto! e pode deichar eu te darei os devidos créditos ! Beijos
    http://girlsperfeita.blogspot.com

    ResponderExcluir
  11. O meu ficou estranho como eu tiro?

    ResponderExcluir
  12. 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
  13. Eu tentei fazer isso uma vez,mas não deu certo,vou tentar denovo! hahahaha

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

    ResponderExcluir
  14. Procurei tag mas não aparece =/

    ResponderExcluir
  15. ME AJUDOU BASTANTE!
    Obrigada.

    placeforgirlsblog.blogspot.com

    ResponderExcluir
  16. 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
  17. seu blog é otimo,demais!!!Tutoriais todos que eu fiz funciona,ameeeei o blog!

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

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

    acreditaremserfeliz.co.cc

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

    eternosonhooficial.blogspot.com

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

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

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

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

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

    http://cafe-vermelho.blogspot.com

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

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

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

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

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

    ResponderExcluir
  30. Que legal, usei no meu blog.

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

    ResponderExcluir
  32. 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
  33. 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
  34. tutoriais ótimos >< sem dúvidas um dos melhores blogs *--*

    ResponderExcluir
  35. ameiiiiiiiiiii,muito obrigadaa!

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

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

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

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

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

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

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

    http://www.mitchietorres.tk/

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

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

    ResponderExcluir
  43. 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
  44. Amei o tutorial,eu peguei a primeira imagem tá bom ?
    Beijos

    glitterofparadise.blogspot.com

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

    ResponderExcluir
  46. 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
  47. 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
  48. 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
  49. 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
  50. Oiee aqui eu tentei colocar mas so consegui o inicio :( Agora minhas postagens recentes e antigas desapareceram!!! O que devo fazer????????? Pf ajuda

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

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

    Obrigada

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

    ResponderExcluir
  54. 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
  55. APARECEU NÃO ENCONTRADO ESTE TEXTO. PRQ?

    ResponderExcluir
  56. 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
  57. eu nao achei isso:
    amei seu blog, é 1° vez que vejo e ja estou seguindo!

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

    ResponderExcluir
  59. 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
  60. Nossa amo o seu blog , amei esse tutorial faz um efeito bem bonito no blog.. eu peguei os botões azuis . OBRIGADA!! (:

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

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

    ResponderExcluir
  63. 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
  64. no meu blog não acho quando aperto ctrl f e o unico que acho que com data é o titulo.

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

    ResponderExcluir
  66. 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
  67. Bom estou fazendo um blog novo e estou amando suas dicas ..
    parabéns e estou usando as barrinhas ^_^

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

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

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

    ResponderExcluir
  70. Ficou ótimo!Adorei!

    http://princesadopanico.blogspot.com.br

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

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

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

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

    ResponderExcluir
  75. 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
  76. Este comentário foi removido pelo autor.

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

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

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

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

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

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

    ResponderExcluir