Resenhas

A minha opinião sobre os mais variados produtos, de beleza a decoração.

Leia mais

Como Me Visto

O meu estilo pessoal e como me gosto de vestir.

Leia mais

Receitas

Receitas simples e fáceis, que dão certo!

Leia mais

12 de maio de 2013

Como centralizar a imagem do cabeçalho do blog - CSS para Blogueiras! (#1)


O post de hoje é um pouco fora da linha do que é habitual aqui no blogue. Decidi começar a fazer pequenos tutoriais para vocês com maneiras de como melhorar o vosso blogue através de pequenos e simples truques que, quando aplicados, fazem toda a diferença.
Irei-vos mostrar como podem centralizar a imagem (ou título, caso não utilizem imagem) do vosso blogue já que o Blogger, por defeito, coloca a imagem sempre à esquerda. O truque é muito simples e consiste apenas em meia dúzia de linhas de código CSS que é só copiarem e colarem no sítio certo.

Este é o código CSS:
#header-inner img {
margin-left: auto;
margin-right: auto;
}
.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}


Agora vamos ao passo-a-passo que temos de realizar para colar este código no sítio correto (é só clicar pela ordem que está numerada nas imagens seguintes):


1 - Mais opções
2 - Modelo 
3 - Personalizar

4 - Avançadas
5 - Adicionar CSS
6 - Colar o código dado
7 - Aplicar ao blogue
Assim que colam o código, se clicarem com o rato na zona onde vos mostra o preview do blogue, já podem ver como irá ficar o cabeçalho centralizado.

Espero que tenham achado o tutorial fácil!

Outros CSS para Blogueiras:
#2 Como remover a moldura branca das imagens do blog
#3 Como excluir a Navbar
#4 Como centralizar o título e data dos posts  

52 comentários:

  1. Boa dica! Eu sempre sofro com os html's e afins kkkkkkkk.

    Beijo!

    ResponderEliminar
  2. Dica muito util, Obrigada !


    Se puderes depois passa no meu novo blog:
    http://theprettylittlelipstick.blogspot.pt

    beijinhos*

    ResponderEliminar
  3. Parabéns pela simplicidade e utilidade nas suas dicas. Por indicações colhidas no google eu estava a quase uma hora tentando centralizar a imagem no cabeçalho do meu blog.Estava desistindo, muito complicado. Voltei ao google e te achei, segui suas dicas e em menos de 5 minutos minha imagem ficou centralizada. Obrigada!

    ResponderEliminar
    Respostas
    1. Ai Marcia, fiquei muito feliz com o seu comentário! Ainda bem que ajudei! :D
      Mil beijinhos!

      Eliminar
  4. Respostas
    1. Usei este mesmo código no meu blog e a Marcia, que pode encontrar nos comentários acima, também usou e funcionou. Tente novamente, quem sabe não fez alguma coisa mal...
      Beijinhos

      Eliminar
  5. Deu certinho no meu blog!!! obrigado pela dica super fácil e eficiente!!!!

    ResponderEliminar
  6. Eu procurei em mil lugares e só consegui fazer o daqui! amei! obrigada :)

    ResponderEliminar
  7. Simplesmente adoro seu blog, gostaria da sua ajuda, eu quero centralizar o titulo e data dos posts acima das postagens no meu blog: http://www.vogueandcats.com/ o meu layout é no meio, so que o titulo e data estao mais pro lado esquerdo, como posso colocar eles no meio? muito obrigada, e parabens pelo o maravilhoso blog! xxxx

    ResponderEliminar
    Respostas
    1. Olá querida!

      Hoje publiquei o 4º post de CSS para Blogueiras onde ensino a fazer o que me perguntaste! Podes ver aqui http://thefashionistapretender.blogspot.pt/2014/02/como-centralizar-o-titulo-e-data-dos.html

      Obrigada pelos elogios!
      Mil beijinhos!

      Eliminar
  8. Sua dica foi a melhor de todas, finalmente consegui centralizar a minha imagem em poucos segundos. Obrigada. Vlw

    ResponderEliminar
  9. tinta tentando de mil maneiras centralizar, sua explicação foi útil e simples. amei :-D
    visite meu blog depois.
    bellemaria.blogspot.com.br

    ResponderEliminar
  10. Respostas
    1. Olá Júlia,
      Faz upload normalmente da imagem no Blogger, não é preciso a url para nada.
      Beijinhos!

      Eliminar
  11. Sensacional... a melhor dica e a melhor explicação... e que funciona! parabéns! amei

    ResponderEliminar
  12. Eu também não consegui!!
    Aff. parece tão fácil!!
    :(

    ResponderEliminar
    Respostas
    1. Joyce, no fim do código, experimente carregar no return para dar mais uma linha. Normalmente assim funciona certinho.

      Beijo!

      Eliminar
  13. Parabens! Até quem fim alguém conseguiu me ajudar. Obrigado

    ResponderEliminar
  14. Ameeei a dica, super me ajudou com o meu blog.
    Sucesso linda !
    Um mega beijo

    http://www.moniquecarvalho.com/

    ResponderEliminar
  15. Obrigada por postar esta dica!
    Esta super explicadinho o passo a passo. Eu consegui fazer sem esforço algum.
    Super beijos!
    Conheça meu Blog:
    http://almeidacriacoesbaby.blogspot.com.br/

    ResponderEliminar
  16. Deu super certo, e ainda de quebra centralizou a barra de menus que há tempos eu vinha tentando!

    Gratidão!

    http://doulamadrinha.blogspot.com.br

    ResponderEliminar
  17. Respostas
    1. Olá Madalena,

      Experimente depois de copiar e colar o código carregar na tecla enter para mudar de linha. Às vezes o Blogger não assume o código mas se fizer isso já assume.

      Beijinhos,
      Patrícia Salomé

      Eliminar
  18. Muito obrigada pela ajuda! Segue o meu blog pra você dar uma olhada se quiser ;)
    Grande beijo!
    http://wordskindom.blogspot.com.br/

    ResponderEliminar
  19. Patricia eu estou tentando mas nao funciona comigo eu estou fazendo tudo certo mas nao vai mesmo :(

    ResponderEliminar
    Respostas
    1. Olá Camilla,
      Já experimentou colar o código e a seguir carregar no enter para mudar de linha? Às vezes só funciona quando fazemos isso.
      Beijos!

      Eliminar
  20. Muito obrigada, fiquei horas tentando centralizar, tenteí de todos os jeitos mas não conseguia, e agora finalmente consegui graças a você! Obrigada mesmo.

    ResponderEliminar
  21. Fiquei horas tentando centralizar a imagem, mas nunca conseguia, agora finalmente consegui e de uma maneira muito simples graças a você. Muito obrigada pela ajuda fico muito grata!!!!

    ResponderEliminar
  22. nossa deu super certo...adorei. obrigado :*

    ResponderEliminar
  23. TOP, a maioria me ensinava usando HTML e eu nunca conseguia, aqui foi rápido e simples! E ficou PERFEITO! Parabéns ótima dica!

    ResponderEliminar
  24. VALEU CONSEGUI VI VARIOS VIDEOS MAIS NÃO ACHEI NADA QUE PRESTE , AGR NO SEU SITE SIM OBR.

    ResponderEliminar
  25. ola , to fazendo meu blog, obrigada pela ajuda

    ResponderEliminar
  26. Eu tava quebrando a cabeça com isso!
    Muito, muito obrigada pelo tutorial.
    Deu certinho!

    Beijos,
    Duas Leitoras

    ResponderEliminar
  27. Espectáculo!! Andava há tanto tempo para saber como se fazia isso! Muito obrigado pela dica! :)

    ResponderEliminar
  28. muito obrigada, como será que vocês descobrem essas coisas?

    ResponderEliminar
  29. Muito obrigada, Patrícia.
    De todos os códigos que eu achei e testei o seu foi o único que funcionou!

    http://costurandosemagulha.blogspot.com.br

    ResponderEliminar
  30. Ora bem...só comigo não funcionou!!! Não dá de forma alguma e sigo passo a passo...

    ResponderEliminar
  31. Depois de 500 tentativas consegui...ufa!! Obrigada

    ResponderEliminar
  32. Muito bom, só uma dica caso você coloque o código e a imagem não ficar centralizada basta colocar um valor numero na linha que ta escrito margin-left: auto; tem que fica assim : margin-left: 80px; ou qualquer outro valor que centralize no seu blog

    ResponderEliminar
    Respostas
    1. Diego, não aconselho esse método porque além de ser um pouco atrapalhado, basta mexer nas configurações do tamanho horizontal do blog para que dê problemas e deixe de estar centralizado.

      Eliminar
  33. dica fantástica, mas como tenho imagem no meu título só funcionou alterando text para image.align
    obrigado!!!

    ResponderEliminar