sábado, 19 de maio de 2012

Como centralizar o título do blog, o título das postagens, o título dos gadgets e os gadgets de seu blog

Atualizado em 01 de Fevereiro de 2013

Não é nada fácil procurar por uma dica específica para tornar o blog mais atraente e não a encontrar. Principalmente se você for um blogueiro amador em HTML e gostaria de algumas dicas para tornar o seu blog mais charmant. Uma das coisas mais inconvenientes da plataforma Blogger é o não alinhamento do título do blog e das postagens, do título dos gadgets e outras coisas. Mas isto pode ser contornado. Vou postar aqui minha experiência com meu template. Antes de qualquer modificação sugiro que você faça backup do HTML do seu blog. Se algo de errado ocorrer é só voltar com o anterior sem nenhum ônus (ou bônus - menos da Tim-ganarô!!). Bem, agora que você fez o backup de seu blog vamos a primeira dica. Vale lembrar que a localização de certos trechos do HTML muda de template para template. Digite Ctrl+F para localizar os trechos.


1. Centralizando o título do blog

Existem duas maneiras para tal procedimento. Vamos à primeira.

1.1. Para realizar tal façanha vá em Modelo/Editar HTML. Marque Expandir modelos de widgets. Aperte Ctrl+F e procure por ".Header h1 {". Após o a chave digite "text-align: center;". Visualize. Gostou? Salve as alterações.

1.2. O outro requer apenas que vá em Layout. Lá procure o título do blog e adicione a tag "< center >" no início do título e depois "< / center >" ao final. Esta dica funciona muito bem em alguns templates dinâmicos. No meu funcionou perfeitamente. Mas caso não dê certo terá que recorrer às modificações no HTML.


2. Centralize o título das postagens

Da mesma forma há duas formas de realizar tal procedimento. O primeiro será automático. Já o segundo deverá ser executado todas as vezes em que fores postar. Escolha o que for melhor.

2.1. Procure por "h3.post-title {". Após a chave digite "text-align: center;". Visualize. Veja figura abaixo. Ficou bom? Salve as alterações.



2.2. Quando for iniciar a postagem, insira as tags "< center >"antes e "< /center>" depois do título do post. É mais rápido. Veja a figura abaixo:


3. Centralizando o título dos gadgets

Este é um dos melhores. Quando se insere algum gadget ou código HTML, estes ficam à esquerda juntamente com o título. Fica um tanto bagunçado e desagradável. Para contornar este problema procure por "/* Headings".  Logo abaixo de Headings há este trecho "h2 {". Após a chave digite "text-align: center;". Está satisfeito? Salve.


Atualização 1: Este tópico se refere ao título dos gadgets do blog, ou seja, Postagens Populares, data, enfim, todos os gadgets que o Blogger oferece. Caso queira testar, irá verificar que todos ficam centralizados. Mas a data fica centralizada.


4. Centralize os gadgets HTML

Estes são  os piores. Às vezes inserimos um banner ele fica à direita do blog, apresentando um aspecto um tanto bagunçado. Para driblar este problema adicione uma tag no início e no fim do código. Para centralizar  digite "< center >" antes e "< / center >" depois do código. Caso queira a esquerda utilize "< left > " ou "< rigth >" para a direita.


Bem, é isto aí. Sem problema e sem frescura. Até a próxima!

79 comentários:

  1. AMEI!
    Muito Obrigada pelas dicas. Adoro o Blogger, mas ele tem umas configurações difíceis para os leigos fazerem. Muito Obrigada mesmo!

    ResponderExcluir
  2. De nada e obrigado pela visita. O Blogger tem configurações mais fáceis que o Word Express, mas mesmo assim ele é difícil.

    ResponderExcluir
  3. Muito bom... Testei varios e o unico qe consegui foi o seu

    ResponderExcluir
  4. muito ótimo! consegui facilmente fazer, obrigada!

    ResponderExcluir
    Respostas
    1. Muito obrigado, Sophia_LS! Espero ter ajudado!

      Excluir
  5. Muito obrigada!!! Ajudou muito! estava mesmo procurando como centrar os titulos!!!

    ResponderExcluir
    Respostas
    1. Muito obrigado pela visita! Em breve vou postar mais dicas de SEO para o Blogger.

      Excluir
  6. tem uma maneira de centralizar todos os gadgets de uma vez, como você ensinou com os títulos?

    ResponderExcluir
    Respostas
    1. Bom dia! Obrigado por visitar o blog. Tem sim. É pelo html do blog. É fácil. Como vc pode observar, minha aba de títulos não é centralizada. Eu vou procurar o código e postar até sábado.

      Excluir
    2. valeu cara, vou ficar esperando, pois preciso melhorar o layout do meu blog...

      Excluir
    3. Diego Trilha, recebi tua mensagem. Eu veifiquei no blog e descobri que dá, só que de uma única forma. Se for, por exemplo, na minha aba da direita, todos os gadgets serão centralizados. Mas, em postagens populares, ou o nome que queira dar, os textos com as visualizações ficam alinhados tb. Estou verificando se é possível alinhar os títulos dos gadgets, mas sem alinhar os textos.

      Excluir
    4. Boa tarde, Diego Trilha. Bem, devido as muitas dúvidas que estão chegando, eu estou colhendo todas e testando os meios de resolver os problemas. Eu havia dito que iria publicar no dia 05 de Setembro, mas as dúvidas serão atendidas. Já tenho o teu problema resolvido. Vou postar com data certa para o dia 13 deste mês. Obrigado pela visita!

      Excluir
  7. Simplesmente perfeito!
    Sempre pesquiso para tirar minhas dúvidas, e realmente nunca encontro em especifico o que quero. Mas aqui encontrei.
    Parabéns!

    ResponderExcluir
    Respostas
    1. Boa noite! Obrigado por visitar. Estou procurando outra forma de deixar ainda mais didático. Por enquanto estou testando estas formas. Assim que conseguir, atualizarei um texto ainda mais didático e com mais dicas.

      Excluir
  8. Oi Samuel,tudo bom?
    Olha,no meu caso,eu não consegui,mas não sei se é porque meu blog entrou na categoria do Novo blogger...o meu é diferente. Eu preciso centralizar aquela imagem do cabeçalho onde tem meu nome.A tag q vc mostrou eu não encontrei : "Header h1 {". Foi uma pena,pois sua explicação está tão fácil de se entender... Enfim,se vc puder me ajudar,te agradeço!
    Meu blog: www.anailustra.blogspot.com.
    Abraços e obrigada!
    Ana

    ResponderExcluir
    Respostas
    1. Boa tarde, Anna Monteiro. Bem, o código "Header h1 {1" faz parte de todo o blog. Você marcou a caixa Expandir modelos de widgets? Se não, tente e procure apenas a linha "Header h1". Quanto ao título do blog, por ser imagem, pode ser mais fácil. Pode ser alinhado no próprio código. Como estão surgindo muitas dúvidas, estou colhendo todas para atualizar este post. Quanto ao teu blog, a categoria Novo, pode ser que o teu modelo seja um daqueles dinâmicos. Em todo o caso, toda mudança é possível no blogspot. Falta apenas alguns testes para eu começar a atualizar este post e as tuas dúvidas serão acrescentadas. Eu agradeço a visita e bom final de semana

      Excluir
    2. Oi Samuel,

      Essa opção "expandir modelo de Widgets" tbem não aparece no meu blogger,desculpe por não ter falado antes.Deve ser porque eu optei há muito tempo pelo modelo atualizado do blogspot.Quando vou em Modelo,aparece direto a caixa onde mostra todo o código-fonte.

      Quanto ao código header h1, essas 2 tags aparecem separadas (uma tag numa linha e a outra,em outra linha diferente,porém dentro do mesmo contexto.

      Já tentei colocar o "top center no repeat" antes,depois desse código, mas tbem não adiantou,infelizmente.

      Será que isso está acontecendo porque eu personalizei a aparência do blog?
      Aguardo sua resposta.
      Muito obrigada,mais uma vez.
      Abraços!

      Excluir
  9. Valeu pela dica amigo, realmente ajudou bastante, abraços, parabéns pelo blog.

    ResponderExcluir
  10. Respostas
    1. Boa noite Aline! Sou grato pela visito e gosto de saber que estou ajudando muitos blogueiros com estas dicas. Obrigado pela visita!

      Excluir
  11. Adorei a sua explicação, rápida e prática. Sabe como tirar tirar "Assinar: Postagem (Atom)" Blog? Obrigada!

    ResponderExcluir
    Respostas
    1. Bom dia Katia Borges! Obrigado pela visita. Vou verificar como retirar e em breve posto esta solução.

      Excluir
  12. Que "nadismo" que nada, seu blog é muito útil para leigos em HTML como eu. Obrigada por sua boa vontade em dar explicações de fácil compreensão. Parabéns.

    ResponderExcluir
    Respostas
    1. Muito obrigado pela visita, cara blogueira. Publiquei este post para ajudar pessoas iguais a nós, leigos no HTML. Existem muitos bons blog ensinando como fazer estes procedimentos, mas alguns estão rebuscados de termos técnicos, o que atrapalha a nossa compreensão. Obrigado pela visita e boa sorte no blo.

      Excluir
  13. Há algum tempo estava procurando essa dica pra aplicar no meu blog numa próxima mudança de layout.
    Estou mudando meu layout agora e apliquei seus códigos no meu modelo para centralizar os titulos das postagens.
    Meu modelo é "Awesome" - o Espetacular , "laranja - e não tinha h3.post-title {
    Então colei depois de
    /* Posts
    ----------------------------------------------- */
    Colei:
    h3.post-title {text-align: center;}
    E não precisou fazer o passo 2.2. inserir as tags "< center >< /center>" depois do título do post. Todas as novas postagens já estão alinhadas , o titulo.
    Obrigada pela dica
    Abraços
    Super fácil essa dica! Adorei!

    ResponderExcluir
    Respostas
    1. Bom dia Isabella Twifan! O código pode ser colocado após a chave "{", quando não há "h3.post-title". Mas como o código é do blogger, funciona perfeitamente. Obrigado pela visita!

      Excluir
  14. Respostas
    1. Obrigado também por visitar o blog! É bom saber que este post é útil.

      Excluir
  15. Muito bom seu post. Estou querendo colocar o titulo do meu blogger em forma horizontal preenchendo a parte superior de um lado para o outro, tipo o titulo do seu blogger, você poderia me ajudar?
    Att: Ademar

    ResponderExcluir
  16. Muito bom seu post. Estou querendo colocar o titulo do meu blogger em forma horizontal preenchendo a parte superior de um lado para o outro, tipo o titulo do seu blogger, você poderia me ajudar?
    Att: Ademar

    ResponderExcluir
    Respostas
    1. Bom dia! Infelizmente não tenho como ajudar. Talvez uma das maneiras seja por imagem. Sugiro o caminho da imagem. Obrigado pela visista!

      Excluir
  17. Tentei vários tutorias o seu foi o único que funcionou, muito obrigada.

    ResponderExcluir
  18. Olá Samuel, eu mudei de layout e agora as imagens nas postagens não centralizam, elas sempre permanecem a esquerda por mais que eu as centralize. Não alterei código nenhum, apenas editei os widgets do layout. Você poderia me ajudar? http://yeshuasalvador.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Bom dia! Vejo que está usando o hack "Leia mais". Pode ser que tenha colocado no lugar errado ou mexido em algum código. A centralização de figuras não é parte dos widgets ou gadgets. Eu vi que os gadgets padrão não foram alterados. Portanto pode ser um erro do hack "Leia mais". Sugiro retirar o hack e ver como ficam as imagens.

      Excluir
  19. olá! Eu ainda gostava de saber como é que centralizo as páginas no blogger! Obrigada!

    ResponderExcluir
    Respostas
    1. Bom dia! Quais páginas você se refere? As estáticas?

      Excluir
    2. já não é preciso, mas obrigada na mesma :) eram as páginas do genero: inicial e depois outras que fazemos. vá ao meu blog e veja. sao as 3 primeiras depois do titulo "Lions Heart" http://theotherprincess.blogspot.pt/

      Excluir
    3. Obrigado, Maria! As páginas em questão as estáticas. Muito bom o teu blog. Agradeço a visita!

      Excluir
  20. valeu muito bom !
    ajudou muito .

    http://consertodetelhado.net/

    ResponderExcluir
  21. Por favor me ajuda, eu centralizei o gadget, porem o titulo das postagens eu nao queria centralizar e centralizou. Agora eu nao quero nem o do gadget e nem das postagens centralizados, quero normal como estava mais nao estou conseguindo fazer. Como faço? Me ajuda pls! Obrigada!!!

    ResponderExcluir
    Respostas
    1. Boa noite,

      Faz da seguinte maneira:

      1 - Procure pelo código da postagem conforme o item 1. Então veja se o código se encontra igual ao do item 1. Senão copie e deixa como a figura.

      2 - No item 3, procure o que foi modificado e apague.

      3 - Caso tenha feito o backup do blog, restaure o mesmo com o arquivo de backup baixado.

      Boa sorte!

      Excluir
  22. Ótimo tutorial, fácil... Obrigada!

    http://fernandanattalia.blogspot.com.br/

    ResponderExcluir
  23. Olá parceiro, gostei do tutorial e como foi facil fazer uma coisa que tava dando dor de cabeça. coisa que é básica do HTML mas parece que o emburrecimento acontece por agente sempre buscar muitos outros códigos. Obrigado e será que você pode me dar uma outra ajuda como é que agente consegue deixar duas imagens bem encostadas sem aquele espaço que tem entre dois gadgets, sabe como se faz ficarei grato pela juda, um abraço.

    ResponderExcluir
    Respostas
    1. Boa tarde! Obrigado pela visita meu caro. Bem, eu também tentei fazer esta divisão nas imagens mas deu erro. Segundo o suporte do blogger é porque ainda não tem uma liberação. Mas na próxima atualização eles irão liberar, o que eu acho não está longe.

      Excluir
  24. ola amigo voce tem ideia do que preciso fazer para meu blog aparecer o Titulo la em cima (como é normalmnte)?? veja :http://novidadestvpaga.blogspot.com.br/ ...... fica tudo la em baixo , o que fço??

    ResponderExcluir
    Respostas
    1. Olá boa noite! Vá em Layout. Procure a guia Cabeçalho e clique em Editar. Na janela que se abriu coloque o nome em Título. Apague o que tiver na descrição.

      Excluir
  25. Senhor Samuel Ambrosio:Se o vírus do nadismo for espalhado nos poderes da república, certamente viríamos a navegar por verdes mares, pois o senhor contaminado com ele, é eficiente. Suas explicações acima, funcionaram, o que agradeço. Parece-me que pensamos de forma coerente, pois percebi um paralelismo no que acredita (pelo que escreve), assim convido-o a visitar os portais: Grupo Guararapes, Alerta Total, Portal Militar, Ternuma, A Verdade Sufocada, e inclusive uns blogs meus de nome GRIFAO, ACORDA TAPUIA e A MANHA OU ALMANHAQUE. Cordialmente a. JOSÉ

    ResponderExcluir
  26. Como faz diferença uma coisa ensinada diretamente sem muitas delongas!! haha
    Tantas vezes quis saber fazer isso, e onde achava, quase que contavam a história da criação do html!!
    Simples, objetivo, demonstrativo! Nunca mexí no html com tanta segurança! Obrigada Samuel!
    Estou construindo meu blog ainda, nunca pensei que ia ser tão complicado assim! abç!

    ResponderExcluir
    Respostas
    1. olá Beth! Boa noite. Agradeço a visita! Sim, eu também procurava por meios rápidos, mas só novela... Enfim, tá aí minha experiência!

      Excluir
  27. Na maioria dos post que achei, estavam explicando errado, segui sua dica e funcionou perfeitamente.
    Obrigado
    www.desenhos2de3d.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Boa tarde, Celso! Agradeço a visita e muito obrigado. Também peço teu voto para o meu blog no Prêmio Top Blog. Agradecido!!

      Excluir
  28. Estava procurando como centralizar o título do blog e o seu funcionou incrivelmente bem! Muuuuito simples.
    Obrigada!

    ResponderExcluir
    Respostas
    1. Obrigado Bia! É sempre um prazer alguém visitar este post e eu saber que de fato tem ajudado.

      Excluir
  29. cara não consigo colocar o titulo da postagem centralizado no blogger quando vou procurar o código que vc disse aparece a busca nada zero (0) de busca oque eu fasso se alguem souber me ajude aew por favor

    ResponderExcluir
    Respostas
    1. Boa noite. A plataforma blogger mudou a visualização do html. No caso, vc deverá procurar linha por linha. Este post foi escrito quando a visualização era antiga. No caso, muitos blogueiros já sabem como procurar no novo perfil. Mas como este não é um metablog, sugiro procurar nos metablogs ou manualmente.

      Excluir
  30. Procurei muito estes tutoriais, está de parabéns!!!

    ResponderExcluir
  31. Muito obrigada, mesmo! Ainda hoje continua aplicável! Parabéns!

    ResponderExcluir
  32. Maravilhoso! me ajudou muito.

    Obrigada!

    ResponderExcluir
  33. Olá Samuel, muito obrigada pelas dicas. Eu fiz tanta loucura no meu html, seguindo conselho de diversos blogueiros, que sequer conseguir achar o código. Porém, da outra forma que vc ensinou resolveu meu problema!!!!

    ResponderExcluir
  34. Olá Samuel, muito obrigada pelas dicas. Eu fiz tanta loucura no meu html, seguindo conselho de diversos blogueiros, que sequer conseguir achar o código. Porém, da outra forma que vc ensinou resolveu meu problema!!!!

    ResponderExcluir
  35. Olá! Como disseste sem problema e sem frescura. A maioria faz do HTML um bicho de sete cabeças, mas você simplificou e consegui fazer certinho. Parabéns!!!!!

    ResponderExcluir
  36. Olá! Como disseste sem problema e sem frescura. A maioria faz do HTML um bicho de sete cabeças, mas você simplificou e consegui fazer certinho. Parabéns!!!!!

    ResponderExcluir
  37. MUITO OBRIGADA VC EXPLICA SEM COMPLICAÇÃO.

    ResponderExcluir
  38. Olá! Nossa me ajudou demais, muito bem explicado!

    ResponderExcluir
  39. você simplesmente me salvou!!!!!! muito obrigada!!! ja usei!
    aamigabrasileira.blogspot.co.uk

    ResponderExcluir
  40. Show,estudei isso no meu curso de informática mas não sabia que seguia da mesma forma aqui!

    ResponderExcluir
  41. Consegui, também a descrição! Que é a mesma coisa, que um pouco abaixo está escrito: description, daí é só você colocar o mesmo código que o do título.

    ResponderExcluir
  42. Muito Obrigado! Visite-me: http://mochilaeviagem.blogspot.com.br

    ResponderExcluir

Os comentários aqui postados não refletem necessariamente a posição deste blog. Desaconselho o uso de caixa alta. Ao blog reserva-se o direito de não publicar comentários de anônimos. Peço gentilmente àqueles que não tem conta no Google que deixem o nome após o comentário, caso não queiram se enquadrar na categoria Anônimo. Desde já agradeço os comentários.

Related Posts Plugin for WordPress, Blogger...