Centralizar o nome do blog, os títulos dos posts e dos elementos de página - * Blog Elaine Gaspareto *

Centralizar o nome do blog, os títulos dos posts e dos elementos de página

Publicado em 05/12/2012 by

Tempo de leitura:


Oi, gente!
Esta é a 2ª postagem da série Personalizar o blog. Hoje vamos aprender como centralizar os títulos do blog: centralizar o título do blog, o título das postagens e os títulos dos gadgets. E como bônus vou te ensinar como centralizar imagens na sidebar.

Para começar vamos centralizar o título do blog:
Clique aqui:

Como centralizar o título do blog

Leia atentamente, com calma.
Lembre-se que para centralizar título e imagem é preciso que sua imagem tenha a largura exata de seu header.

Centralizar o título das postagens

Estando logado acesse o painel administrativo de seu blog e clique na aba Modelo. Selecione Editar html. Caso apareça uma mensagem de alerta clique em Prosseguir. Na página que abrir marque a caixinha Expandir modelos de widgets. Agora, usando as teclas F3(no Chrome e no Firefox) ou Ctrl+f (no Explorer) encontre este trecho:

 h3.post-title {

Abaixo dele coloque este comando:

text-align: center;

Clique em Visualizar e se estiver ok clique em Salvar modelo.

Centralizar títulos dos gadgets

Na mesma página que estamos agora localize este trecho:

h2 {

E abaixo dele coloque o comando para centralizar:

text-align: center;

Visualize e se estiver ok, salve o modelo. Caso queira alinhar o título à direita troque center por right.

Bônus extra:
Quando colocamos uma imagem na sidebar ela, por padrão, fica alinhada à esquerda. Mas tem jeito de centralizar. O truque é não usar o gadget Imagem e sim o gadget HTML/JAVASCRIPT. Faça assim:

Crie uma postagem rascunho em seu blog. Encontre a imagem que deseja colocar na sidebar. Vamos supor que seja o nosso livro resultante do Concurso Literário 2012, este:
Depois de inserir a imagem clique sobre ela e deixando-a selecionada clique em Link, ali no alto do editor de texto.
Agora coloque o editor de texto em modo html. Copie o código gerado.
Abra o painel do seu blog, clique na aba Layout e selecione Adicionar um gadget. Escolha a opção HTML/JAVASCRIPT e na janela que abrir cole o código. Salve. Arraste pra onde deseja que apareça e clique em Salvar organização.

Conheça a web-série Como personalizar o blog

  1. Como criar um blog: criação da conta Google e criação do blog
  2. Trocar o plano de fundo do blog e alterar largura e disposição das colunas; 
  3. Centralizar o nome do blog, os títulos dos posts e dos elementos de página (gadgets);
  4. Alterar cores e fontes dos títulos e do texto (fontes especiais, manuscritas, etc);
  5. Criar um menu com abas abaixo do cabeçalho e inserir links nele;
  6. Adicionar botões de compartilhamento;
  7. Inserir assinatura personalizada;
  8. Colocar Voltar ao topo com efeito deslizante;
  9. Personalizar os comentários do blog (numerar, separar, incluir opção Responder, etc)
  10. Data dos posts em formato calendário
  11. Número de comentários dentro de um balão 

 Vou te esperar.
 Você vem?




Compartilhe
Compartilhe
Linkedin
Salvar

Este post está arquivado em ,
40 comentários via Blogger
comentários via Facebook

40 comentários:

  1. Olá Elaine, consegui centralizar o título do blog, mas o título da postagem não deu certo.
    Ao procurar por: h3.post-title {
    no HTML do meu blog foram encontrados três, mas todos eles estão assim: hh3.post-title a {
    tem esse "a" antes da chave.
    Tentei nos três e visualizava, não deu certo.

    Sempre estou aqui vendo suas dicas, são ótimas.
    Obrigada.
    Abraços.

    ResponderExcluir
    Respostas

    1. Majoli, tente colocar o comando abaixo de h3.post-title a {
      devendo ficar assim:
      h3.post-title a {
      text-align: center;

      Espero que ajude.
      beijos

      Excluir

  2. Elaine, voltei, consegui.
    Tirei a letra a e deu certo.
    Obrigada da mesma forma.
    Abraços.

    ResponderExcluir

  3. Adoro ler essas maravilhas que você ensina .......... mas não me encoragei ainda em fazer. Quem sabe mais tarde, com mais tempo e paciência rsrs
    Beijos.

    ResponderExcluir

  4. Olpa Elaine

    Bom dia mais uma vez. Acabei deixando comentário no post que explica como centralizar o título do blog que já tinha estado por lá, mas é sempre bom rever seus posts.

    Agora vou fazer uns testes para ver como fica. E quanto aos meus backup's tudo em dia viu teacher.

    Beijos

    ResponderExcluir

  5. oi Elaine, fiz tudinho como vc explicou, só espero que tenha feito certo.
    PS. Não esqueceu de mim não, né?
    bjk

    ResponderExcluir
    Respostas

    1. Karine, esqueci não!!!
      Te mandei email hoje, tá?
      beijos

      Excluir

  6. Oi Elaine, é a Vi, sabe que fiz um curso no telecentro para fazer sites? a muito tempo atras, até que me sai bem, mas depois baixou uma preguiça em mim e não tenho menor vontade de mexer com essas coisas.
    Mas para quem quer mexer é essencial encontrar pessoas com boa vontade de ensinar.
    Também acho super legal os videos tutoriais colocados no Youtube, não sei se você faz, mas acho que é mais fácil de memorizar e acompanhar os passos.
    Pena que não vai dar para a gente se conhecer pessoalmente, mas quando tudo se resolver por ai, você vem aqui, combinado?
    Beijos,Vi

    ResponderExcluir

  7. Oi!
    Quanto tempo não te visitava!

    Adorei as dicas!

    Tenha um ótimo dia!

    Bjos

    ResponderExcluir

  8. Oi Elaine, bom dia!
    Excelentes dicas, principalmente a do bônus extra, mas fiquei com uma dúvida: como diminuir o tamanho da imagem? Mts vezes ela sai da margem da sidebar!
    Obrigada! :))
    Lindo dia pra vc!
    Bjsss
    Sileni
    www.viveraprendendo.com

    ResponderExcluir
    Respostas

    1. sileni, pra diminuir a largura da imagem é preciso redimensioná-la em um editor de imagens.
      Leia este post:http://www.elainegaspareto.com/2012/10/colocando-marca-d-em-suas-fotos.html
      Certinho?
      beijosssss

      Excluir

    2. Oi Elaine, apanhei um pouco, mas consegui fazer! Hahahahaha!
      O chato foi descobrir qual o tamanho que eu deveria reduzir a imagem para caber na minha sidebar, mas descobri, afff!
      Por isso que prefiro contratar os seus serviços, rsrs.
      Obrigada Elaine, valeu mesmo! Aprendi mais uma com vc! :))
      Bjsss
      Sileni
      www.viveraprendendo.com

      Excluir

  9. Obrigada por tudo! Seu blog é tudo que eu preciso!!
    Agora estou aqui na expectativa pra tentar configurar minhas abas de outra maneira, mudar tamanho e formato!
    Bjos!!

    ResponderExcluir

  10. OI QUERIDA QUE BLOG LEGAL!
    SUAS DICAS SÃO MUITO BEM DETALHADAS,GOSTEI MESMO!
    SÓ NÃO ENCONTREI O QUE EU PROCURAVA...
    MEU BLOG ESTÁ COM AS POSTAGUEM REPETIDAS,VC PODE ME DIZER O QUE FAZER ?
    http://edyarts-eva.blogspot.com.br/

    ResponderExcluir

  11. Olá Elaine,graças a voc~es consegui centralizar o titulo,mas precisei fazer o mesmo que a Majoli...mesmo assim valeu a dica...bjs...e as coisas com estão...e as idas ao hospital...curiosa eu né?bjs fica na paz.

    ResponderExcluir

  12. Fazia tempo que tentava centralizar os titulos do gagedts. ^^ Valeu mesmo.
    Só não consegui o titulo dos posts.não tem o codigo :/
    bjs

    ResponderExcluir

  13. o meu nao deu certo continua no canto
    ]

    ResponderExcluir

  14. tentei mas nao consegui
    alguem me ajude

    ResponderExcluir

  15. Minha colega no html de meu blog não tem essa linha como fazer

    ResponderExcluir

  16. ola Elaine, como eu posso ter pareceria com anuncios de empresas, como vc tem no seu?
    aguardo

    ResponderExcluir

  17. Ola Elaine e ola a todos!

    Outra maneira de centralizar, é no momento de postar tudo que você quiser centralizar basta deixar entre "< center >"seu titulo, imagem, texto, etc..."< \center >" claro que sem as aspas e sem os espaços... Ai tudo ja sai centralizado. Assim fica mais fácil para quem tem medo de editar em HTML.

    Um abraço para você e a todos os seus leitores!

    ResponderExcluir

  18. Essa ultima dica me fez ter uma curiosidade, então todas esseas informações que estão em sua sidebar são gadgets com código html??? E o seu cabeçalho é uma imagem com fundo tranparente fazendo com que o plano de fundo visto seja o plano de fundo do template????
    Aguardo retorno, um abraço virtual.

    ResponderExcluir

  19. Dona Elaine Gaspareto:De quando em vez dou uma passadinha aqui, sempre aprendendo bastante. Esse negócio de centralizar os títulos por exemplo, mas estava difícil pois não conseguia encontrar os códigos HTML, e pior não conseguia abrir o CONTROL+F, e só depois de expandir os widgets é que consegui abrir o pesquisar e encontrei os códigos. Mas e o medão? Dá um baita medo errar, apesar de ter feito back up, e pior não dá para copiar daqui os códigos novos para inserção (resolvi isso encontrando em outro endereço os códigos para copiar http://samuelambrosio.blogspot.com.br/2012/05/como-centralizar-o-titulo-do-blog-o.html) e o sistema funcionou bem para o título do blog, porém para o título de texto não sei não, parece que não. Mas tentarei novamente. Agradeço seu empenho, trabalho, que são muito importante para alguns como eu bem crus nesse negócio de HTML. Sou um velhão de 73 anos, e nunca deixo de ficar surpreendido por essa maravilhosa criação de DEUS O SUPREMO ARQUITETO, as.....mulheres! Estudei Psicologia, assim observo bastante os comportamentos, e que diferença entre mulheres e homens, é um tal de 'fofa'...'beijão'....'doçura'....'querida'....; bacana isso. Às senhoras, meu respeito.

    ResponderExcluir

  20. Oba!!!!!!!
    Deu tudo certo de novo!
    Estou fazendo tudo num blog que criei só para estes testes, assim não dá medo de errar.
    Não tenho muita paciência para fazer backup toda hora rsrsrs
    Beijos, beijos, beijos.........
    Jana

    ResponderExcluir

  21. Adorei passar em sua página .......... AMEI

    ResponderExcluir

  22. amigo(a) quando se usar códigos, é viável que seja permitido a função copiar, :s

    ResponderExcluir

  23. Obrigada, ajudou bastante
    http://diveinthis.blogspot.com

    ResponderExcluir

  24. Elaine como eu centralizo o menu (as paginas estáticas) do blogger, já tentei de tudo e nada :/

    ResponderExcluir
    Respostas

    1. Yane, em geral o menu nativo é comandado pela tag Tabs.
      Experimente mexer lá, eu nunca fiz mas pode dar certo...

      Excluir

  25. gostei do seu blogger, tem muita coisa pra poder um iniciante pesquisar, só tenho uma duvida, centralizar o titulo, não consegui fazer, meus códigos HTML não são apresentados da forma que você postou, tem como você me auxiliar ???

    ResponderExcluir
    Respostas

    1. Edwaldo, caso seu template seja modificado será preciso que você localize os códios referentes ao trecho que deseja editar.
      Infelizmente não tenho como ajudar em templates cujos códigos sejam externos ao Blogger...

      Excluir

  27. Elaine não consegui fazer , será que é por causa do blogspot , não sei ....

    ResponderExcluir
    Respostas

    1. Geovanna, meu blog e os que personalizo também são Blogger.
      Todo template do Blogger tem esses códigos.
      Tem certeza que não está fazendo nada errado?
      bjsss

      Excluir

  28. Elaine, vc tem um blog delicioso e que adoro visitar e aprender tantas coisas novas e interessantes, porem, gostaria somente de fazer uma observação: demora demais para carregar os codigos que vc disponibiliza para podermos copiar e as vezes atè desisto. Não teria outra forma mais ràpida para podermos copiar esses codigos sem ter que esperar uma eternidade por isso? Obrigada e um super beijo!

    ResponderExcluir
    Respostas

    1. Adriana, em postagens mais recentes (de quase 1 ano pra cá) o Synthax foi substituído por um botão que leva ao código.
      beijosss

      Excluir

  29. Elaine eu não achei h3.post-title{ O que faço?

    ResponderExcluir

  30. Oi Elaine Boa noite. Então estou com problemas no meu blogger. Quando tento adicionar um gadget e depois clico em salvar organizações no meu layout do blogger aparece a mensagem : "ocorreu um erro.atualize e tente mais tarde". O que devo fazer? Já tentei várias coisas e continua o mesmo erro.

    ResponderExcluir

  31. No meu não deu certo, o meu layout é free será que é por isso?

    ResponderExcluir
    Respostas

    1. Denise, seu template é nativo do Blogger.
      Precisa só achar a área certa para modificar.
      Também pode tentar colocar o comando antes de fechar a folha de estilos. Tem que testar, cada template varia em relação aos outros...

      Excluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…

Assinar: Postar comentários (Atom)