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:
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:

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
- Como criar um blog: criação da conta Google e criação do blog
- Trocar o plano de fundo do blog e alterar largura e disposição das colunas;
- Centralizar o nome do blog, os títulos dos posts e dos elementos de página (gadgets);
- Alterar cores e fontes dos títulos e do texto (fontes especiais, manuscritas, etc);
- Criar um menu com abas abaixo do cabeçalho e inserir links nele;
- Adicionar botões de compartilhamento;
- Inserir assinatura personalizada;
- Colocar Voltar ao topo com efeito deslizante;
- Personalizar os comentários do blog (numerar, separar, incluir opção Responder, etc)
- Data dos posts em formato calendário
- Número de comentários dentro de um balão
Vou te esperar.
Você vem?
Olá Elaine, consegui centralizar o título do blog, mas o título da postagem não deu certo.
ResponderExcluirAo 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.
Majoli, tente colocar o comando abaixo de h3.post-title a {
Excluirdevendo ficar assim:
h3.post-title a {
text-align: center;
Espero que ajude.
beijos
Elaine, voltei, consegui.
ResponderExcluirTirei a letra a e deu certo.
Obrigada da mesma forma.
Abraços.
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
ResponderExcluirBeijos.
Olpa Elaine
ResponderExcluirBom 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
oi Elaine, fiz tudinho como vc explicou, só espero que tenha feito certo.
ResponderExcluirPS. Não esqueceu de mim não, né?
bjk
Karine, esqueci não!!!
ExcluirTe mandei email hoje, tá?
beijos
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.
ResponderExcluirMas 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
Oi!
ResponderExcluirQuanto tempo não te visitava!
Adorei as dicas!
Tenha um ótimo dia!
Bjos
Oi Elaine, bom dia!
ResponderExcluirExcelentes 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
sileni, pra diminuir a largura da imagem é preciso redimensioná-la em um editor de imagens.
ExcluirLeia este post:http://www.elainegaspareto.com/2012/10/colocando-marca-d-em-suas-fotos.html
Certinho?
beijosssss
Oi Elaine, apanhei um pouco, mas consegui fazer! Hahahahaha!
ExcluirO 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
Obrigada por tudo! Seu blog é tudo que eu preciso!!
ResponderExcluirAgora estou aqui na expectativa pra tentar configurar minhas abas de outra maneira, mudar tamanho e formato!
Bjos!!
OI QUERIDA QUE BLOG LEGAL!
ResponderExcluirSUAS 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/
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.
ResponderExcluirFazia tempo que tentava centralizar os titulos do gagedts. ^^ Valeu mesmo.
ResponderExcluirSó não consegui o titulo dos posts.não tem o codigo :/
bjs
o meu nao deu certo continua no canto
ResponderExcluir]
tentei mas nao consegui
ResponderExcluiralguem me ajude
Minha colega no html de meu blog não tem essa linha como fazer
ResponderExcluirola Elaine, como eu posso ter pareceria com anuncios de empresas, como vc tem no seu?
ResponderExcluiraguardo
Ola Elaine e ola a todos!
ResponderExcluirOutra 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!
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????
ResponderExcluirAguardo retorno, um abraço virtual.
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.
ResponderExcluirOba!!!!!!!
ResponderExcluirDeu 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
Adorei passar em sua página .......... AMEI
ResponderExcluiramigo(a) quando se usar códigos, é viável que seja permitido a função copiar, :s
ResponderExcluirObrigada, ajudou bastante
ResponderExcluirhttp://diveinthis.blogspot.com
Elaine como eu centralizo o menu (as paginas estáticas) do blogger, já tentei de tudo e nada :/
ResponderExcluirYane, em geral o menu nativo é comandado pela tag Tabs.
ExcluirExperimente mexer lá, eu nunca fiz mas pode dar certo...
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 ???
ResponderExcluirEdwaldo, caso seu template seja modificado será preciso que você localize os códios referentes ao trecho que deseja editar.
ExcluirInfelizmente não tenho como ajudar em templates cujos códigos sejam externos ao Blogger...
Oiê, eu n achei h3.post-title {
ResponderExcluirElaine não consegui fazer , será que é por causa do blogspot , não sei ....
ResponderExcluirGeovanna, meu blog e os que personalizo também são Blogger.
ExcluirTodo template do Blogger tem esses códigos.
Tem certeza que não está fazendo nada errado?
bjsss
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!
ResponderExcluirAdriana, em postagens mais recentes (de quase 1 ano pra cá) o Synthax foi substituído por um botão que leva ao código.
Excluirbeijosss
Elaine eu não achei h3.post-title{ O que faço?
ResponderExcluirOi 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.
ResponderExcluirNo meu não deu certo, o meu layout é free será que é por isso?
ResponderExcluirDenise, seu template é nativo do Blogger.
ExcluirPrecisa 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...