Aumentar a largura do template sem destruir o blog!

em 30 de dezembro de 2009

Muitas pessoas morrem de medo de mexer no código-fonte do blog.
Peraí Elaine: o que é código-fonte?

Código-fonte é o código html do seu blog. Você localiza assim: clique em Layout, e em seguida clique na aba Editar html.  Pronto, este é o código do seu blog; tudo o que contém o seu template está expresso neste código-fonte, em linguagem de computador, ou seja, HTML.

Então, como ia dizendo, muita gente morre de medo de mexer e apagar tudo e destruir o blog. Mas isso não acontecerá se você tomar o cuidado de fazer backup do seu blog antes de mexer nele.
Para fazer backup é simples:

Clique aqui e veja como fazer backup completo do blog
Pronto! Agora você tem seu blog salvo em seu pc e se nas mexidas algo der errado é só colocar de volta e tudo será como antes.

Agora vou contar como fazer para alargar a coluna onde você posta seus textos e também a sidebar, que é a coluna lateral.

Faz assim:
No código-fonte do seu blog procure este trecho (use Ctrl+f dentro da caixa de código; vai abrir uma barra de pesquisa onde você cola o trecho que está procurando):

 #outer-wrapper {

Ele se refere à largura total do seu template. No caso do template Mínima (mais comum usado no Blogspot) este valor é 660px.

Para aumentar a largura da coluna do post e/ou da sidebar considere que a soma de ambas as colunas não pode ser maior que esta largura total, certo?
Agora que encontrou, mude o valor para a largura desejada, por exemplo 800px. Assim temos agora um template com 800px de largura total.

Agora procure por este trecho:

 #main-wrapper {

Ele é que define a largura da coluna do post. Mude para a largura desejada, por exemplo 510px. Visualize.

Agora vamos aumentar a largura da sidebar. Procure este trecho:

 #sidebar-wrapper {

Altere aí o valor da sua sidebar; seguindo o exemplo que estou usando aumente para 260px.
Então, somando temos: 510+260=770.
Mas o template não tem 800px de largura total?
Sim, mas não é correto usar toda a extensão da largura senão os posts e os elementos da sidebar ficariam muito grudados.

Também é preciso alterar o valor do header, ou seja, do cabeçalho pois senão fica descentralizado. Para fazer isso encontre este trecho:

 #header-wrapper {

Altere o valor que está aí pelo valor total do template,que no meu exemplo é 800px.
Visualize e se estiver tudo certo, salve as modificações.

Uma dica importante é não ter nem medo nem preguiça. Vá mexendo, mudando até ficar do seu gosto e só clique em Salvar quando tudo estiver pronto.

Parece complicado mas é muito fácil e gostoso de fazer, pode crer em mim.

E se você usa um dos novos modelos do Design de modelo do Blogger essa alteração de largura pode ser feita via painel do blog, clicando em Design/Design de modelo/Ajustar Larguras.

bee-separator

Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

47 comentários , comente também!

  1. ELAINE..
    tem gente sim...to aqui , mas daqui a pouco estou indo para a praia, faço um bate e volta, acho que amanha a noite to de volta..ou quinta...
    vou por em prática todos seus ensinamentos e os selinhos quando voltar..
    ano novo blog renovado..
    to aqui esperando o tempo passar..
    tenha uma boa noite querida..
    que Deus esteja com vcs.
    um bjuivo no coração.
    obrigada pelas dicas...vc é um baratão!!!
    carinhos.
    loba.

    ResponderExcluir
  2. UEBAAAA!!!!!!!
    Assim que voltar de viagem vou fuçar como se não houvesse amanhã!! Qualquer coisa, grito por socorro.

    Beijas e ótima festa de reveillon.

    ResponderExcluir
  3. Elaine,

    Moça de grandezas....grandezas nas palavras, na doação, nos ensinamentos...moça de sabedorias que sabe distribuir sem ter soberba...deixo uma msg p ti, com muito carinho:

    Desse ano vou levar muita coisa...
    abraços apertados, comentários engraçados e inteligentes...beijos gostosos e desejos alucinados de tudo de bom..
    mais sins do que nãos...
    Estou feliz...e essa felicidade desejo em dobro a você.
    E um dos maiores desejos meu é que fique comigo em 2010.
    Feliz 2010

    bjusss

    ResponderExcluir
  4. A D O R E I as explicações... mas, como vc falou, morro de medo de mexer em alguma coisa! hehehe. Até tenho um blog de teste, mas, fico morrendo de medo de fazer uma caca daquelas sem conserto!

    Mas, que suas explicações estão claras, ah! isso estão. Quem sabe agora eu não perca o medo????


    Bjs

    ResponderExcluir
  5. Mas essa mulher é d+.
    Obrigada, passa lá e vê se ficou bom...brincadeira.
    Sabe o quanto já te enchi e sempre você me ajudou.
    Feliz Feliz Feliz ano Novo.
    Bjo grande.
    Olívia

    ResponderExcluir
  6. Elaine, eu salvo todas as suas aulas em um arquivo word. Ainda não testei algumas coisas que quero, como por exemplo fazer um destaque no texto com aquelas linhas pontilhadas que vc ensinou fazer... são coisas até simples, mas que valorizam o post. Mas a verdade é que sou super medrosa e tenho medo de fazer uma M&%)@!!!
    Bjs

    ResponderExcluir
  7. Boom diaaa!!!

    Eu sou uma dessas que morre de medo, mas vou tentar, principamente lá no artes.

    beijão e um 2010 maravilhoso!!!

    ResponderExcluir
  8. Tu explicas tudo muito bem em sempre ótimas e claras dicas.beijos e lindo 2010!chica

    ResponderExcluir
  9. "Lá bem no alto do décimo segundo andar do Ano
    Vive uma louca chamada Esperança
    E ela pensa que quando todas as sirenas
    Todas as buzinas
    Todos os reco-recos tocarem
    Atira-se
    E
    — ó delicioso vôo!
    Ela será encontrada miraculosamente incólume na calçada,
    Outra vez criança...
    E em torno dela indagará o povo:
    — Como é teu nome, meninazinha de olhos verdes?
    E ela lhes dirá
    (É preciso dizer-lhes tudo de novo!)
    Ela lhes dirá bem devagarinho, para que não esqueçam:
    — O meu nome é ES-PE-RAN-ÇA..."
    ( Mário Quintana)
    FOI DESSE JEITO QUE EU OUVI DIZER... está aqui para desejar para você um ano de 2010 de muita LUZ. Que nele você consiga realizar alguns de seus mais importantes propósitos.
    E que DEUS ÑANDE RU continue nos anemçoando COM A SUA ETERNA GRAÇA pelo resto de nossas vidas. Agradeço sua presença em meu blog durante o ano de 2009 com seus comentários sempre muito carinhosos e relevantes. E como já é tradição em nossa cultura trago algimas simpatias para entrar o ano de bem com ele. BOA SORTE.
    QUE SEJAMOS FELIZES.
    FELIZ ANO NOVO !
    Saudações Florestais !
    http://www.silnunesprof.blogspot.com

    ResponderExcluir
  10. Ai....pra mim não deu nada certo...faz tempo que eu quero aumentar a largura do meu blog, mas não consigo....
    No meu, após as palavras código que você citou não aparece o número de px.
    Beijos.

    ResponderExcluir
  11. Tenho medo de mexer em qualquer coisa, acredita?
    Vou fazer um blog teste...ano q vem..rsrs

    Amiga, que Deus abençoe sua vida cada dia mais! te adoorooo tantão!!

    Obrigada por tudo, pela diferença me minha vida esse ano, obrigada por permitir q conheçamos sua história, obrigada por ter indicado meu blog em um dos seus posts e por todas as palavras que colocou direcionada a mim, obrigada por conta a minha love história em seu blog..

    Te adoro de verdade!

    ResponderExcluir
  12. Que 2010 seja repleto de luz, paz, amor e mutia esperança para ti e aos seus!
    Beijos!
    Rô!

    ResponderExcluir
  13. Queridona

    Desejo que 2010 seja MUITO generoso contigo.

    Mil beijos.

    ResponderExcluir
  14. Olá minha linda o seu blog. está muito bonito e você é uma pessoa 5 estrelas.
    Algumas pessoas que eu conheço são muito invejosas só querem a sabedoria para elas são incapazes de ensinar alguma coisa a alguém mas você é uma querida sempre se preocupa.
    Desejo para você um feliz 2010, beijinhos de luz em seu coração

    ResponderExcluir
  15. oi anjo eu nao tenho plavras obrigada vou tentar!!! oi voce encata beijo bom ano
    obrigada beijao

    ResponderExcluir
  16. OI Elaine, Feliz 2010 pra vc e toda família, e preciso mudar meu blog, vai completar um ano e ainda tá com a mesma cara... bjusss

    ResponderExcluir
  17. Passando pra lhe desejar um 2010 inesquecível repleto de sucesso..bjs

    ResponderExcluir
  18. Puxa, que aula! Parabéns. Eu sou da turma das que têm medo de mexer, mas qualquer hora tento. Ainda não estou satisfeita com a troca do template, mas vou devagar.
    Boas entradas em 2010, com muita saúde, paz e amor: o trio perfeito.
    Já falei? Se falei, repito: muito prazer em ter lhe conhecido! Beijos.

    ResponderExcluir
  19. Muito útil, obrigada!!!
    Quando estiver sóbria, vou fazer. Acabei de tomar umas tacinhas de espumante, então não vai dar certo, hehe.

    Bjs!

    ResponderExcluir
  20. Adorei teu cantinho, tem uns diferenciais que não vemos por ai, precisa ensinar...beijocas

    ResponderExcluir
  21. Bom dia, Elaine!

    essas suas dicas são excelentes e muito úteis. Eu fiz o backup do meu blog como você indicou e salvei o "template" no meu PC. Ele veio em formato .xml (eu uso Mac).

    No entanto, eu gostaria de saber, no caso que o meu blog seja eliminado, como devo fazer para repor esse template? devo criar um novo blog, ainda virgem, e inserir o meu antigo blog em HTML que está no template, ou seja, abrir o template, copiá-lo e colá-lo no "editar HTML" do novo blog?

    Muito obrigado com antecedência pela resposta e um grande abraço.

    André

    ResponderExcluir
  22. Elaine

    Parece bem legal suas dicas, mas como bem falou pinta uma insegurança.

    Obrigado.

    Sergio Nunes

    ResponderExcluir
  23. Ampliei a largura do meu baseada na sua orientação. Deu certo! Obrigada profa! rsrsrs

    ResponderExcluir
  24. Mulher...não tive medo e fiz...ficou ótimo, muito obrigado!
    Bjks
    Marília

    ResponderExcluir
  25. 1° muiiito obrigada pela dica nossa ajudou demaiiiis!!
    2° quero te convidar a visitar meu blog e trazer meu link pro seu cantinho... o seu ja ta la rsrsrsrs

    brigadin bjin
    cilinhaartes.blogspot.com

    ResponderExcluir
  26. Pocha, muitíssimo obrigado. Coloquei um template personalizado e não tinha com ajustar larguras no painel do blogger por ser personalizado. Aí com essa forma por HTML que vcê explicou foi minha salvação, pois estava quase retirando o template por ser muito estreito. Ficou perfeito. Visite lá http://noticiasautozone.blogspot.com/

    ResponderExcluir
  27. Elaine, que Deus te abençoe, pq vc salvou a minha vida!
    Mil bjos

    ResponderExcluir
  28. Cheguei aqui agora. Vou ler direitinho e tentar fazer. Meu Blog Regiao Oceanica é dos antigos e estreito demais.
    Juntar coragem e fazer. Depois conto o que aconteceu. Obrigada pela ajuda. Beijos.

    ResponderExcluir
  29. Amei esse post seu, muito bom, é o que eu procurava, obrigada, já to te seguindo. bjossss

    ResponderExcluir
  30. Muito obrigada flor amei seu blog e seu post.. Meu blog tava muito feio antes pois a coluna tava muito pequena e as letras estavam invandindo o post de uma maneira que ficavam por cima e junto ficavam aquela bagunça. Muito bem explicado seu post parabéns você conseguiu deixar uma coisa difícil de uma maneira bem simples! Resolvi meu problema! Valeu :)

    ResponderExcluir
  31. Não consegui encontrar este trecho que se refere no meu HTML ! Beijos!
    sweetbulunga.blogspot.pt

    ResponderExcluir
  32. Ola Elaine,

    Sou blogueiro já faz um tempinho e tenho certo conhecimento em HTML, mas a gente nunca sabe tudo e estamos sempre aprendendo. Fiz as alterações em um blog de testes para tirar as duas laterais de um template customizado por mim, segui suas recomendações.
    O que está acontecendo é o seguinte: na minha tela as laterais de fato sumiram, e era isso mesmo que eu queria, ou seja, aumento um pouco a coluna dos posts, deixo a sidebar com 300 pixels. Porem nos computadores (Notbooks) onde pedi para amigos verificarem nada mudou, as laterais continuam.

    Obs: Minha tela tem 18,5

    O que será isso ?

    Parabéns pelo blog e um grande abraço.

    ResponderExcluir
  33. Nossa muito obrigada mesmo!!!! Não sabe o quanto me ajudou! Uma coisa que você disse que é importante é não ter medo e arriscar, mas com essa ajuda fiquei mais confiante hehe bjs www.canecaquente.com.br

    ResponderExcluir
  34. Elaine sua linda, amo teu blog , personalisei meu blog com um template base que uma blogueira deu na internet somente lendo o seu blog, todinho *--*
    Mas estou com um super problema, a minha barra de postagem estou achando pequena, e todas as fotos que eu coloco ficam pequenas, no template anterior eu podia colocar as fotos bem grandes que elas ficaram grandes porem somente dentro da area de postagem sem cortar as fotografias, agora fica tudo saindo da area de postagem e cobrindo o blog todo, e nao consigo encontrar essas #HEADER ai que tanto tem, porque acho que no meu template foi feito diferente ... por favor ajude :(
    MEU BLOG : www.bywilkersonaraujo.com QUERIA MUITO SUA AJUDA, TE ADOOR
    Meu facebook se quiser add : https://www.facebook.com/wilkersonaraujo

    BEIJOSSS

    ResponderExcluir
  35. Nao existe Blog como esse nao,Tudo explicado bem direito,so nao entende que nao ler direito Ameii,Deus Abençoe!!

    ResponderExcluir
  36. Oi Elaine gosto muito do seu blog, aprendi e estou aprendendo muito com as dicas que vc da sobre blog, mas tem coisa que ainda fico perdida, como nesta sua dica , eu coloquei tudo certinho como vc descreveu dei enter e não achei dentro dos meus codigos vc sabe me dizer porque?

    ResponderExcluir
    Respostas
    1. Magali, eu teria que ver seu blog pra saber, mas a forma de localizar os códigos, atualmente, é exatamente assim como descrevi.
      Caso realmente não encontre pode ser que seu template não os possua, e que seja um template nativo do Blogger.
      Qual seu blog?

      Excluir
  37. olá amada como vai? gostaria que vc ensinasse como mudar as cores da barra lateral do novo blog 2014?
    me ajude porfavor bjs aguardo resposta, muitas benção pra vc!

    ResponderExcluir
  38. E como alterar as dimensões das páginas? as minhas postagens ficam com o tamanho certo, mas as páginas ficam todas apertadas com o conteúdo a sair para fora dos limites

    ResponderExcluir
  39. Boa noite, não sei o que houve, mas os comandos não estão mais sendo encontrados. Não sei se é diferente ou o qual o motivo, porém, não consigo encontrar mais os códigos informados para modificações do html. Não é problema de busca, já que outros do próprio html são procurados e consegue achar

    ResponderExcluir
  40. Realmente foi o melhor post que achei ! Muito Obrigado !

    ResponderExcluir
  41. Parabéns, precisava muito de aumentar a sidebar do blog e estas foram as melhores explicações encontradas na web. Tudo perfeito. Obrigada

    ResponderExcluir
  42. E Bom Vc Deixar As Pessoas Selecionar o Texto Para Poder Copialo N bloquear dificultando mas ainda seus tutoriais ;)

    ResponderExcluir
  43. Post Perfeito. Tutorial 10! Fiz no meu blog de teste e depois no original!!!
    Muito Obrigada!!
    Ficou Lindo!

    ResponderExcluir

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…