25/08/2007

Largura do Blog

Mudar a largura do blog, do menu ou das postagens são coisas fáceis de fazer e muito úteis, pois nem sempre o formato padrão atende nossas necessidades, para fazer tais mudanças precisamos encontrar no html do blog o código “width:” do que desejamos mudar a largura,

Usarei como exemplo o blog Frases Curtas que foi alterado a partir do modelo padrão Son of Moto (Mean Green Blogging Machine variation).

Mudando a largura total do blog:

#outer-wrapper {
margin: 0 auto;
border: 0;
width: 750px;
text-align: left;
background: url(http://i55.photobucket.com/albums/g138/robertojd/corpo.jpg);
font: normal normal 100% tahoma, 'Trebuchet MS', lucida, helvetica, sans-serif;
}

Esta parte definirá a largura do blog para deixar do tamanho que você deseja mude o numero 750, mas lembre-se que a maioria das pessoas usa resolução de tela 800x600, portanto não é recomendável usar um tamanho maior de 780, dependendo do contador de visitas do seu blog é possível ver a resolução de tela dos seus visitantes (no caso do Sitemeter na pagina de estatística clique em resolução, na parte de baixo da pagina tem Web Browsers e embaixo disso tem Monitor Resolution clicando você saberá qual a resolução de tela que seus visitantes mais usam).

Largura das postagens e do menu:

#main {
width: 395px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar {
width: 255px;
float: right;
color: #000000;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

O procedimento é o mesmo, altere os valores 395px(postagem) e 255px(menu) para a largura desejada para as postagens e menu respectivamente. Outra coisa que podemos fazer aqui é trocar o lado que as postagens e o menu aparecem, para isso basta mudar onde está float: left; e float; right; simplesmente trocando as palavras left e right de lugar. O resultado disso será a troca de lado entre as postagens e o menu. Veja também:
Como altera o espaço entre as colunas do blog
Quando Desistir de um Blog? Trabalhar na Internet vale à pena?
Related Posts with Thumbnails

169 comentários:

  1. tudo bem Fabiano? gostei das tuas dicas,tava pesquisando algo,por acaso vim para tua página,vou ver se dou uma arrumada no meu blog,que fiz a uns dois meses,e tambem gostaria de fazer uma parceria com tigo,se for do teu interesse,passa lá no meu blog,qualquer coisa entra em contato comigo,abraços

    http://matematica-na-veia.blogspot.com/

    ResponderExcluir
  2. Meu caro...preciso da sua ajuda...acabei de criar um blog, quero torná-lo privado...qdo eu envio mail para convidar, esse amigo para além de ter de colocar o login e a password tem em cima o link do meu blog..basta clicar e tem acesso, ao meu blog, sem ter de fazer login...
    como posso resolver isto?

    ResponderExcluir
  3. Caco
    Já coloquei seu link neste blog, é sempre bom ter novos parceiros

    Gabriela
    Cadastro, login e senha precisa ter uma pagina somente para o login e ter banco de dados e os servidores de blog geralmente não dão suporte para tudo isso. Mas vou pesquisar mais um pouco e se encontrar algo que funcione, mandarei para você.

    ResponderExcluir
  4. cara adorei o seu blog.
    mas nao percebi como metes aquele "quadrado" com os códigos (de banners por exemplo) por favor contactame o meu mail é este:
    luisramalho_18@hotmail.com
    parabens pelo blog!!!

    ResponderExcluir
  5. o "quadrado" com códigos chama textarea.

    o código dela é
    <textarea cols='25' name='yourForm' onfocus='this.select()' onmouseover='this.focus()'
    rows='3'>
    </textarea>

    o numero 25 é a largura e 3 o numero de linhas

    veja essa postagem sobre como colocar mudar a cor, bordas e outras coisas na caixinha
    http://dicasparablogs.blogspot.com/2008/12/caixa-de-texto.html

    ResponderExcluir
  6. Fala meu brother!tenho uma dúvida aqui gostaria de uma ajudinha,tenho um blog de 3 colunas,queria colocar mais uma coluna do lado direito,p/ficar com 4 colunas/uma esquerda,uma principal e 2direta,será que vc poderia me ajudar?abração e sucesso!!o blog é show,informação nota 1000...continue assim sucesso!

    ResponderExcluir
  7. vou preparar um template de 4 colunas e logo colocarei aqui no blog a explicação de como fazer.

    ResponderExcluir
  8. Li o artigo como você sugeriu, mas não consigo resolver,pois o texto da coluna do meio continua colado com o texto da primeira [nova coluna]. Crie a largura do blog com 780px e as colunas: 300+200+180px. Diminuindo o tamanho da primera coluna, o texto da coluna do meio vem junto e vice-versa.

    ResponderExcluir
  9. Problema resolvido:

    #main-wrapper {
    width: 370px;
    float: $startSide;
    padding:10px;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    }
    ...acrescentei a linha: padding:10px e beleza!

    ResponderExcluir
  10. Não funcionu e agora meu blog está doido oque eu faço?

    ResponderExcluir
  11. Davi

    qual o link do blog que está mexendo?

    se você baixou o template de algum site provavelmente é um pouco diferente, mas as regras são as mesmas, o que você precisa é encontrar onde é a largura total do blog, das colunas e postagens

    ResponderExcluir
  12. Tudo bem?
    Eu tenho um blog (www.cienciainteressante.blogspot.com) e vc me ajudou muito a atualizá-lo.

    Gostaria de pedir um favor, se vc puder colocar o link do meu blog no seu eu agradeceria, pois gostaria de uma parceria, muito obrigado.

    ResponderExcluir
  13. Oi Fabiano, tudo bem?
    Muito boas dicas.
    Você poderia, por favor, me conceder duas ajudazinhas?
    1)Como faço para interagir (perguntas e respostas)com os leitores (visitantes) do meu blog?
    2)como compartilhar com várias pessoas, com um comunicado só, as novas postagens que faço?
    Pode responder aqui mesmo ou pelo meu email.
    Agradeço, desde já.
    Ézio

    ResponderExcluir
  14. Muito interresante seu blog tem tudo que precisamos meu blog está
    começando mas espero atingir aluns visitantes com o tempo

    http://www.comopersonalizaroblog.blogspot.com

    ResponderExcluir
  15. Fabiano,
    preciso de sua ajuda:fiz um blog há poucos dias e eu coloquei o meu blog com três colunas, mas as colunas estão meias desorganizadas não está dando pra ver e onde eu posto fica muito só pro canto esquerdo queria que fosse centralizado , gostaria que você desse uma olhada nele e me diser o que eu faço pra poder ajustá-lo.

    Muito Obrigado

    ResponderExcluir
  16. altere os valores de padding e margin para ajustar a posição da coluna central ou também é possivel acertar isso mudando a largura total das colunas ou do blog

    ResponderExcluir
  17. eu tentei mais não consegui ficou do mesmo jeito

    entra ai e ver o que tenho que fazer : http://carros-de-madeira.blogspot.com/

    ResponderExcluir
  18. se alterar os valores que estão na frente da palavra width vai mudar a largura das colunas e a distancia entre elas

    #outer-wrapper {
    width: 760px;
    margin:0 auto;
    padding:10px;
    text-align:left;
    font: normal normal 100% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif;
    }
    #main-wrapper {
    width: 440px;
    float: left;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    }
    #sidebar-wrapper {
    background-color: #00BFFF ;
    width: 150px;
    float: right;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    }
    #newsidebar-wrapper {
    background-color: #00BFFF ;
    width: 150px;
    float: left;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

    ResponderExcluir
  19. Carros de Madeira
    escreva para nosso email e vamos tentar resolver seu problema

    ResponderExcluir
  20. CADA VEZ MELHOR O SEU SITE. PARABÉNS E PARABÉNS E NÃO CANSO DE DAR PARABÉNS.
    GENIAL A FORMA COMO VOCÊ (E MAIS NINGUÉM NA REDE MUNDIAL DE COMPUTADORES) TIRA AS DÚVIDAS DE PESSOAS LEIGAS NO ASSUNTO.
    EU O SOU. ESPERO MANTER MAIS CONTATO COM VOCÊ, OU PELO MEU BLOG LITE´RÁRIO- www.omusicoeopoeta.blogspot.com OU PELO MEU E-MAIL gabrielnasciment.eagle@hotmail.com.
    ESPERO REALMENTE QUE FABIANO SEJA UM SER HUMANO!

    ResponderExcluir
  21. Oi Fabiano,
    Eu tentei no meu blog, a coluna do post esticou, só que o os posts não esticaram juntos, continuaram do mesmo tamanho, aí ficou um espaço em branco entre os posts e a coluna do menu, como é que faz para aumentar o post junto?

    ResponderExcluir
  22. essa postagem fala da largura das colunas o comprimento de cada uma é em outra parte do código, precisa remover o fundo das colunas e usar uma cor ou imagem de fundo no estilo #content-wrapper

    ResponderExcluir
  23. como eu faço para remover o fundo das colunas?

    ResponderExcluir
  24. como faço para retirar uma das colunas? a coluna da direita do meu blog não é utilizada e não axei no cod a parte onde eu excluo ela !
    obrigado

    ResponderExcluir
  25. Adriano Santos
    você pode usar essa postagem que mostra como colocar mais uma coluna no blog para retirar a sua
    http://www.dicasparablogs.com.br/2007/12/blog-com-3-colunas.html

    mas salve um cópia do modelo atual antes de começar pois isso é um pouco complicado de fazer e pode haver erros.

    ResponderExcluir
  26. Poque as minhas letras fikaram grandes??

    e porque naum tem + a linha quii separa os posts??

    ResponderExcluir
  27. Olá, Fabiano, como vai?! Voltei aqui, rs. Estou com uma cruel dúvida! Segui todos os passos, mas entre a coluna do meio e a coluna do canto fica um espaço branco terrível(principalmente em monitores maiores). Queria "centralizar" essa coluna do meio, para diminuir o espaço mas, quando faço isso, a outra desce. Você pode me ajudar?

    Obrigado desde já!

    ResponderExcluir
  28. veja se não tem padding ou margin junto com o código das colunas ou postagens isso faz um espaço vazio entre elas.

    outra coisa a coluna vai para o final do blog quando o espaço entre elas não é suficiente.

    ResponderExcluir
  29. Obrigado pela ajuda! Mudei as coisas, só não deu certo em monitores wide.

    ResponderExcluir
  30. é impossivel achar o template para todos os tipos de monitores.

    você pode usar as larguras em porcentagem, mas sinceramente não gosto porque altera demais a aparência do blog

    ResponderExcluir
  31. Fabiano, não sei como dizer de outra forma: tuas dicas são muito legais, mas um leigo continua boiando. Vc pede para "encontrar tal coisa no html". Como posso fazer isso? O único html que conheço no blog é o de postar mensagens, e esse não tem qualquer referência ao tal "width".

    A coluna onde posto meus textos no blogspot é muito estreita (acho até que devo ter cometido algum erro quando me registrei, porque meu irmão tb usa o blogspot e a coluna dele é maior) e gostaria de aumentá-la. Só o que posso fazer é te pedir um tutorial passo a passo. Porque me pedir para encontrar tal coisa e escrever tal coisa é impossível. Preciso saber onde está tudo e onde tenho que escrever, que botões apertar e assim por diante.

    Peço desculpas pelo incômodo, mas a vida dos anjos da net, como vc, é dura, mesmo. Se puder me ajudar, te agradeço.

    ResponderExcluir
  32. esse html é na pagina editar html que aparece numa aba junto com a pagina layout do blog

    ResponderExcluir
  33. Eu não sei o que há de errado com meu blog, pq, ao lado da sidebar, fica um espaço de uns 10cm até chegar na barra de rolagem.
    Como eu retiro isso? Tentei arrumar na largura, mas só afinou a sidebar, o espaço continua lá e o mesmo.
    A width em #header-wrapper tá 980px e em #outer-wrapper tá 990px.
    Tive que colocar esses valores pra dividir o cabeçalho em 2 e colocar o título do blog alinhado à direita.
    aaaaa, chega, rs, me ajuda por favor!!!

    ResponderExcluir
  34. é normal sobrar algum espaço nas laterais do blog, não dá para acertar para todas as resoluções de tela.

    se quiser pode trocar esses valores que citou por %, ou seja 100%, mas quando alguém com uma resolução muito baixa entrar no seu blog uma das colunas pode ir para o final da pagina

    ResponderExcluir
  35. Consegui colocar 3 colunas, mas como mudo as cores delas?
    E as cores de fundo? E essa linha no meio???

    ResponderExcluir
  36. fat212, coloque junto com o código de cada uma das colunas

    background-color: #F08080;

    claro que usando a cor que gostar mais

    http://www.dicasparablogs.com.br/2009/02/codigo-das-cores.html

    ResponderExcluir
  37. fat212, coloque junto com o código de cada uma das colunas

    background-color: #F08080;

    claro que usando a cor que gostar mais

    http://www.dicasparablogs.com.br/2009/02/codigo-das-cores.html

    ResponderExcluir
  38. Fala aí amigo, beleza??

    gostei muito do seu blog, vc é um fera no assunto ne?

    Eu sou novato faz tres semanas que criei meu blog para colocar meus textos la pois sou escritor e meu primeiro livro vem aí...

    eu gostaria de saber se tem como a gente incluir mais uma coluna no blog spot, pois só tenho duas, que sao as das postagens e a outra ao lado direito onde fica os assessorios...
    Queria uma do lado esquerdo tambem pra por uma foto, ou algo mais...

    Sera que tem jeito isso??

    obrigado!! bom 2010!!!

    Haroldo C de Souza

    ResponderExcluir
  39. Haroldo Escritor

    aqui mostra como colocar mais uma coluna no blog
    http://www.dicasparablogs.com.br/2009/11/colocar-mais-uma-coluna-no-blog.html

    ResponderExcluir
  40. Tenho um blog e hoje ao postar vi que a coluna lateral desceu ,ficou abaixo do post.Procurei por ajuda,li seus textos fui tentando...Resolvi criar outra coluna,vai que assim corrigia o erro.Tá bom,ficaram as duas colunas lá em baixo.Socorro,estou aprendendo na marra sobre esse bendito html,apanho mas vou tentando,mudei a largura da outer-wrapper,aumentei,da main-wrapper,fiz a sominha e não muda nada.Me ajude!!!!

    ResponderExcluir
  41. Prezado editor do blog,
    Peço que me ajude: o cabeçalho de minha página em monitor wide aparece normal, mas para CRT há um pulo da barra de links para baixo. Gostaria de saber como deixá-lo uniforme. Desde já agradeço pela atenção

    ResponderExcluir
  42. Prof. Monica Ramalho

    aumente um pouco mais a largura do #outer-wrapper {
    width: 730px;

    a soma das colunas mais a postagem está dando mais que 730, tente como 750.

    isso porque o padding 10px que está no código dá uma margem de 10 de cada lado. por isso sempre é bom deixar o valor da largura total sobrando um pouco


    Licitações Sustentáveis


    reduza um pouco a largura do cabeçalho ou aumente a largura do blog

    ResponderExcluir
  43. oi Fabiano,adoro seu blog,sempre dou uma olhadinha,estou montando o meu,na verdade estou engatinhando rsrs... por isso vou estar sempre contigo. parabéns Marcia pontosencantos.blogspot.com

    ResponderExcluir
  44. O meu não dar certo de jeito nenhum, o que pode estar acontecendo?

    ResponderExcluir
  45. Robson, na pagina editar html vai encontrar duas vezes width: 980px;

    isso é a largura do seu blog

    ResponderExcluir
  46. Bom dia! Primeiro gostaria de agradecer pelas dicas do seu blog! Estão me ajudando e muuuuito você nem imagina! Estou começando meu blog recentemente, e hoje postei o primeiro video do youtube nele (Também lendo sua dica de como postar videos do youtube), porem, quando visualizei a postagem, o video está ocupando espaço em cima do menu esquerdo =/ Eu ja escolhi o menor tamanho possivel la no youtube na hora de gerar o código, e mesmo assim ele ficou grande demais... ja tentei alterar o tamanho manualmente, digitnado outro valor sem ser esse predefinido pelo youtbe, e mesmo assim não deu... pode me ajudar por favor? Meu blog é: http://www.blogsimsvicio.blogspot.com/

    ResponderExcluir
  47. as larguras do video aparecem duas vezes no código

    veja aqui
    http://www.dicasparablogs.com.br/2008/05/ajustar-largura.html

    ResponderExcluir
  48. ok... como faço para aumentar a vertical das caixinhas de resumo do meu blog?
    o template, ao que parece, foi feito com base no Mínima White

    ResponderExcluir
  49. Henrique Gil, depende do tipo de caixa de resumo que instalou no seu blog, precisaria ver isso no tutorial que usou para colocar essa função no seu blog


    olhei seu html procure por
    summary_noimg = 500;
    summary_img = 350;
    img_thumb_height = 150;
    img_thumb_width = 150;

    e altere os valores esses 150 são os tamanhos das miniaturas e 500 e 350 são a quantidade de caracteres mostrados

    ResponderExcluir
  50. eu fis um site no webnode e escolhi um templante + queria alongar ele + ñ conciguo sera q vc poderia mim dizer onde eu alargo ele

    ResponderExcluir
  51. Anônimo, cada lugar usa as proprias tags, tem que entender um pouco de CSS para mexer nisto, não sei dizer exatamente onde é pois nunca usei esse site que falou.

    ResponderExcluir
  52. Nossa MUITOOOOO bom esse blog

    Parabens msm

    É muito bom saber que tem alguém disposto a ajudar o pessoal com os blogs sem cobrar nada.

    adorei de verdade e obrigado

    depois se quiser da uma olhada no meu blog
    http://musicanuncapara.blogspot.com

    ResponderExcluir
  53. Ahhhh.... depois q comentei e coloquei o link do meu blog q vi q nao podia... desculpa... se quiser pode repostar meu comentario sem o link e com o meu nome.

    ResponderExcluir
  54. Fabiano eu sei que não tem nada a ver mais eu queria saber como eu posso ter um dominio personalizado grátis !!!
    tipo www.fansrihanna.com.br
    em vez de blogspot.
    desde já obrigada pela ajuda.
    admiro muito o seu blog.
    me ajuda bastante.
    valeu !!!

    ResponderExcluir
  55. Fabiano...! venho visitando seu blog, mas ainda continuo com algumas duvidas!
    gostaria q observasse essa postagem:
    http://idanou-se.blogspot.com/2010/02/loira-vs-google.html
    infelismente a imagem q eu postei! ficou cortada!
    não posso diminuir-la ou não dará pra ler!
    o blog tem espaço pra imagem! mas ela fica cortada do mesmo jeito!
    já tentei aumentar os espaço entre as colunas e mesmo assim não consegui solucionar o problema!
    será q poderia me ajudar?

    ResponderExcluir
  56. Dan
    não tem como ajudar a resolver isso, a imagem será reduzida mesmo.

    acho que não vale a pena alterar a largura do blog por causa de uma postagem, isso você que decide, se quiser neste tutorial mostra como aumentar a largura do blog

    ResponderExcluir
  57. Muito obrigado, vocês me ajudam demais! Sempre dou uma passada por aqui para ver as novidades...
    Já utilizei várias dias no meu blog e pretendo usar muito mais!
    Muito obrigado.

    http://semgracas.blogspot.com/

    ResponderExcluir
  58. Como posso dizer você salvou a minha vida!!!! Muito obrigado seu blog é 10

    ResponderExcluir
  59. Como faço para deixar o meu blog: http://mlmarangon.blogspot.com/ da mesma largura deste que eu vi: http://nadyart.blogspot.com/
    Tem jeito? Você pode me ajudar? Eu não entendo nada de html, ok?

    ResponderExcluir
  60. Maria Lúcia Marangon, precisa alterar as larguras como mostramos nesta postagem

    ResponderExcluir
  61. Olá Fabiano, boa tarde,

    Estava navegando na internet e achei o seu site sem querer, mas que é legal pra caramba.
    Tenho um bloguizinho que fiz apenas como curtição, porém gostaria de dar uma melhorada nele. Não tenho muita habilidade
    Se possível gostaria que vc. me ajudasse. Estava tentando aumentar as mergens de ambos os lados, ´pois as colunas são bastante esteitas, gostaria de preencher mais a tela.
    vc. poderia me ajudar.
    Caso queira visitar o endereço é:
    www.blogalvinegrosdavila.blogspot.com. aceito sugestões também.
    Se quiser contato comigo peço que envie e-mail para: rogerio@rodrimar.com.br ou
    rfoliveira.1971@hotmail.com ou pelo próprio blog.

    agradeço antecipadamente pela atenção.

    Rogério Oliveira

    ResponderExcluir
  62. as larguras são nos trechos que falamos nesta postagem, se quiser ver sobre espaço entre as colunas aqui tem
    Espaço entre as colunas do blog

    ResponderExcluir
  63. eu gostaria de saber como ajustar a largura entre as imagens desse meu blog:

    http://esseblognaoeseu.blogspot.com/

    ResponderExcluir
  64. Tuma, qual largura, de quais imagens? não entendi sua pergunta

    ResponderExcluir
  65. a largura ENTRE as imagens das sidebars, fica sempre um expaço bem grande entre elas e eu nunca consigo colocar uma do lado da outra por menor que seje a imagem.

    http://esseblognaoeseu.blogspot.com/

    ResponderExcluir
  66. você precisaria diminuir a largura da coluna inteira, mas sinceramente acho melhor usar imagens maiores.

    ou colocar no código do #sidebar text-align:center;

    assim as imagens ficam centralizadas

    ResponderExcluir
  67. Não, acho que já descobri o erro mas não sei como arrumar.

    qualquer imagem com link que eu coloque no blog fica com o a área do link maior que a área da imagem (acho que é sepre 25px maior) dando um espaço maior entre elas.

    ResponderExcluir
  68. então deve ter alguma coisa usando padding ou margin no estilo da imagem.

    procure img{.... } no html do seu blog e veja se tem padding ou margin nele se tiver apague.

    ResponderExcluir
  69. CONSEGUI!
    valeu Fabiano!
    você e seu blog são demais!
    valeu, valeu mesmo!

    ResponderExcluir
  70. Tentei aumentar a coluna do meu blog (modelo Josh Peterson.) e diz que não existe a linha #outer-wrapper
    procurei também por #main-wrapper e diz que não existe.

    Como posso alterar uma coisa se dentro do html não existe?

    Dá uma luz ai Fabiano, por favor!

    Chico

    ResponderExcluir
  71. onde eu encontros aqueles codigos e essas palavras >> left; e float; right;

    ResponderExcluir
  72. na pagina editar html do seu blog encontrará esses códigos

    ResponderExcluir
  73. Fabiano! Eu criei aquele menu de marcadores em menu suspenso que você deu uma dica. Mas quando fui tirar o número de postagens não consegui, oque eu faço?

    ResponderExcluir
  74. Nossa adorei as dicas...
    Só tenho uma duvida: estou editando o meu template e pare isso eu precisava da largura das postagens, mas no meu template não tem #main nem #sidebar ...

    Desde já agradeço, tem me ajudado muito =D

    ResponderExcluir
  75. olá amigo gostaria de tirar uma dúvida, em meu blog la no editar HTML não tem #outer-wrapper {
    nem as outras opções como faço para ajustar a largura do meu blog pois gostaria de colcoar duas colunas uma na direita e outra na esqerda e uma no meio, só que o espaço para as postagens ficam pequenos, teria como você me ajudar a ajusta a largura do meu blog? agradeço des de já

    ResponderExcluir
  76. Heavy Metal Download
    os novos modelos tem opção de adicionar colunas só trocando o modelo de layout

    veja aqui: Designer de modelo - Layout e Configurações Avançadas

    ResponderExcluir
  77. opa! rs bom... obrigado por me responder só que é o seguinte, meu blog gostaria de usar ele com 3 colunas duas laterais e uma central no meio só que se eu for lá em Designer do modelo e selecionar lá um que tenha exatamente as 3 colunas sou obrigado a diminuir completamente uma das duas larguras não posso deixar elas iguais se não o espaço para a postagem no meio fica pequeno axo que menor que essa linha azul que passa aqui no seu | | fica assim +/-

    ResponderExcluir
  78. nas configurações tem como mudar o tamanho de cada coluna...

    se estiver fazendo pelo html é só mudar o trecho float:.....

    troque left por right ou vice e versa, dependendo de como queira organizar

    ResponderExcluir
  79. eu tenho blogspot e hoje quando entrei as laterais ficaram maiores, as postagens ficaram mais apertadas na tela, e as publicações laterais ficaram maiores, você tem ideia do que pode ter acontecido?
    aconteceu com todos meus blogs, mas um deles é esse http://profdefilosofia.blogspot.com/

    ResponderExcluir
  80. todos seus blogs mudaram de largura? se não alterou os códigos na pagina editar html isso não tem explicação


    não foi alguma configuração do navegador ou pc?

    resolução de tela, zoom ou algo parecido...

    ResponderExcluir
  81. Olá Fabiano.

    Gostaria de saber como centralizo gadeget dos comentários do facebook abaixo do meu blog.

    rafaineurope.blogspot.com

    Obrigado desde já,
    Rafael

    ResponderExcluir
  82. Rafa
    se for a caixa de comentário inteira pode usar esse código:
    <div style="width:400px;margin:auto; text-align:center">codigo aqui</div>

    claro colocando o código dos comentarios no lugar indicado e alterando o valor 400 para a largura da caixa.

    ResponderExcluir
  83. Boa noite,

    tenho o blog abaixo e gostaria de saber como diminuir os espaços entre o comentário do facebook (abaixo do post) e o post? e também entre o mapa eo gadget acima. obrigado

    http://rafaineurope.blogspot.com/

    ResponderExcluir
  84. o facebook trabalha com iframe... não tem como alterar os espaços dentro deles...

    pode mexer no codigo height mas isso pode gerar barra de rolagem dentro da pagina ou ocultar alguns comentarios

    ResponderExcluir
  85. tenho um blog há anos e já mexi nele até ficar como eu queria. Agora resolvi fazer outro (simples)e quero aumentar a área do texto/post. Esse é o 4º blog que visito, mas é impossível encontrar esse 'outer wrapper' e 'main wrapper'.Já expandi modelos de widget e voltei ao original. Não acho de jeito algum. As coisas devem ter mudado, pois esse #main e #sidebar não existem no html do blogger.

    ResponderExcluir

  86. você criou um novo blog... então ele deve usar os templates com a pagina design do modelo, veja aqui sobre as larguras:
    Designer de modelo - Layout e Configurações Avançadas

    ResponderExcluir
  87. Fabiano... como saber, qual a resolução de tela do meu pc?

    ResponderExcluir
  88. Natália
    clique com o botão direito na area de trabalho do windows depois em propriedades e configurações, isso se usar o windows xp, no vista ou 7 é diferente, mas basicamente é nas configurações de tela ou video.

    mas se quiser saber isso por causa do blog é melhor ver no google analytics qual a resolução da maioria dos seus visitantes e fazer o blog pensando neles e não na sua tela.

    ResponderExcluir
  89. Então me diga qual a largura do seu Blog, pois ele se encaixa certinho no meu monitor... Não seria uma boa solução eu ajustar o meu apartir do seu?

    ResponderExcluir
  90. o melhor é saber qual a resolução das pessoas que visitam sua pagina....

    atualmente a maior parte de nossos visitantes tem monitor 1024x768 (ou mais) por isso usamos neste blog 990px de largura

    ResponderExcluir
  91. Ok...
    Segui o que vc me disse e constatei que o meu monitor é de 1024x768 e o meu blog está com 1000.
    Tenho que mexer na sua largura?

    ResponderExcluir
  92. não precisa mexer na largura... apenas se aparecer a barra de rolagem na parte inferior da tela

    ResponderExcluir
  93. Fabiano quero parabenizálo pelo seu blog e sua paciência! Agradeço muito avocê porque foi no Dicas para blog que aprendi tudo que sei sobre blogs. Comecei a blogar em fevereiro desse ano, não sabia nada!!! Hoje já sei tanta coisa, e foi graças a seu blog(e a minha curiosidade) que aprendi a personalizar templates! Hoje tenho meu blog de templates personalizados e vou começar a ganhar dinheiro com isso. Sou muito grata a você por seus tutoriais super explicadinho e a vc que tem muita paciencia.
    Parabéns! Sucesso sempre!

    http://valaraujodesign.blogspot.com/
    http://cantinhotudoaver.blogspot.com/

    ResponderExcluir
  94. como faz pra botar as postagens mais pro lado?

    ResponderExcluir
  95. anonimo, isso depende de qual é o seu template... você pode diminuir o valor de padding ou margin no seu template, mas os códigos variam muito conforme o modelo

    ou pode até mesmo ser necessário alterar a largura do blog.

    ResponderExcluir
  96. Fabiano, tem como aumentar ou diminuir só um gadget inves de todos ? Espero resposta. Obrigado

    ResponderExcluir
  97. kako

    veja aqui Personalizar gadgets do Blog

    mas o que está querendo fazer? por exemplo você pode diminuir a largura dele, mas não pode aumentar senão o espaço da coluna onde está o gadget será insuficiente...

    ResponderExcluir
  98. Tenho uma duvida !
    È o seguinte estou querendo aumentar o espaço do meu blog sidebar post e tal, mas quando alguem tiver um monitor com resolução menor ??? O que faria para ficar dentro ???

    ResponderExcluir
  99. William
    o melhor a fazer é ajustar a largura do blog em pixels (px) que é uma medida exata, assim ele aparece igual em todas as telas...

    se o monitor de quem acessar o blog for menor aparece a barra de rolagem no final da pagina(horizontal) igual quando você não usa a janela maximizada.

    sei que pode parecer pouco caso com as pessoas que usam uma resolução de tela menor, mas você tem que pensar no seu para a maioria dos visitantes

    ResponderExcluir
  100. Fabiano;
    Estou com dois problemas:
    1° Não consigo 'balancear' o tamanho dos videos de forma que fiquem com o tamanho padrão(sempre ficam pequenos).
    2°Quero trocar o 'retangulo' em branco por um banner.

    Fiz o blog hj,e já aprendi mt coisa com vc,se possivel me ajuda ae :D.

    http://panemental.blogspot.com

    ResponderExcluir
  101. no proprio youtube tem o lugar para colocar o tamanho que deseja para exibir o video

    ResponderExcluir
  102. @Fabiano Roberto

    Não Fabiano,eu falo tamanho pra colocar no blog,quando copio o endereço do youtube no compartilhar,nao tem opçao de tamanho pra colocar no blog.

    As opçoes sao 'começar em' e 'link longo'.

    ResponderExcluir
  103. clique em compartilhar e depois no botão incorporar, lá tem a opção de tamanho

    ResponderExcluir
  104. Como faço pra mudar a largura da barra lateral? estou perdendo muito espaço com o fundo... gostaria de aumentar a barra lateral das propagandas.

    Desde já agradeço.

    ResponderExcluir
  105. se o seu template for dos novos modelos é só entrar na pagina layout do desiner e alterar a largura

    ResponderExcluir
  106. o link do blog ai: http://edfisicaalagoas.blogspot.com/

    Não tem a opção... pq n é modelo da blogspot

    ResponderExcluir
  107. Oi Fabiabo...
    Estou com um probleminha no meu blog que quando coloco uuma imagem no cabeçalho do meu blog ela fica cortada no meio me ajuda por favor...
    vou deixar o link do blog de testes pra voce ver como fica a imagem quando eu coloco.
    http://jogolanielandiatestes.blogspot.com/
    obrigado pela atenção...

    ResponderExcluir
  108. @Daniel Fiedler entrei no seu blog e a imagem apareceu completa

    ResponderExcluir
  109. vlw é que eu mandei ontem de madrugada ai hj eu consegui mas vlw pela atençao...

    ResponderExcluir
  110. cara to querendo aumentar meu cabeçalho nao consigo de jeito nenhum so falta isso pra eu add um banner de 1000px, quando coloco o de 1000px ele reduz automatico o que faço?

    http://hotbikesemlimites.blogspot.com/

    ResponderExcluir
  111. na hora de mandar a imagem para o cabeçalho do blogger tem a opção reduzir a imagem, então desmarque

    mas claro vai depender da largura do seu template

    ResponderExcluir
  112. Fabiano,
    Mudei o template do meu blog recentemente e fui editando pelo html tudo.
    Agora, na minha conclusão descobri que a sidebar esta MUITO pequena, fazendo com que a maioria dos gagets ficassem com problema.
    Bom, fui ali e alterei a largura da sidebar e sabe o que aconteceu? nada. Ela não se move.

    Pensei então que fosse por causa do tamanho do blog, mas quando procurei por #outer-wrapper (cntrl+f) NADA apareceu, sendo que o expandir modelos de widget estava selecionada.

    Então não sei como resolver meu problema. Pode ajudar?
    Obrigado. Alexandre

    ResponderExcluir
  113. Alexandre
    alguns templates são mais complicados de mexer.

    em alguns casos se tiver erros é mais facil trocar o template.

    veja se tem float: right; e float: left no seu html como mostramos na postagem

    ResponderExcluir
  114. Olá Fabiana tudo joinha??
    Meu querido gostaria de sua ajuda,como eu posso deixar o nome do meu blog no meio do banner?
    Consegui cetralizar pelo html mas ele ficou em cima do banner..
    Poderia me ajudar??
    Aqui está o link do meu blog:
    http://drikabello.blogspot.com/

    PS:Tentei achar algo relacionado aqui mas não achei..
    Beziquinhos docess...

    ResponderExcluir
  115. DrikaBello
    no caso de imagem no lugar do titulo do blog é melhor entrar na pagina layout e clicar para editar o cabeçalho e escolha a opção para usar a imagem em vez do titulo.

    mas claro você precisa fazer a imagem já com o nome do seu blog nela. só precisa de um programa para editar imagens

    ResponderExcluir
  116. Ai Fabiano me desculpe ter te chamado de Fabiana :(..
    Nossa eu nem imaginava que era simples assim...rsrsr..Obrigada mais uma vez adoro seu blog aprendo muito aqui..
    Já fiz dá uma olhada:
    http://drikabello.blogspot.com/
    Obrigadin mais uma vez pela atenção..
    Beziquinhos docess..

    ResponderExcluir
  117. Como eu faço para editar o tamanho de uma borda ?

    ResponderExcluir
  118. Estou testando uns modelos de templates, mas em um que gostei muito fica sobrando um espaço em branco na lateral direita mesmo com o tamanho de 980px de largura. Como resolver?

    ResponderExcluir
  119. deve ter algum outro código errado ou faltando algum detalhe que está gerando esse espaço do lado.

    mas é bem dificil achar, tente ver o nosso tutorial sobre Achar e Resolver Problemas com Códigos HTML no Blog

    ResponderExcluir
  120. Fabiano, veja o que acontece com o template: http://ljdealmeida01.blogspot.com.br/

    ResponderExcluir
  121. Olá, boa tarde.
    Eu consegui fazer isso, porém as demais páginas não se alteram. Meu blog tem o resumo das postagens na página inicial e ao clicar em “leia mais” nada novo acontece, como se minhas alterações só funcionassem para a página principal.
    Você sabe me dizer o que estou fazendo errado ou o que está faltando para que todas as páginas funcionem igual?

    Obrigada!

    ResponderExcluir
  122. mas o leia mais só aparece na pagina inicial ou pagina dos marcadores do blog é normal isso

    ResponderExcluir
  123. Fabiano, meu problema não é com o leia mais, é com a largura do post. Só usei o "leia mais" como uma referência: na página inicial onde os posts estão resumidos, a largura que eu alterei fica certa. Mas quando a pessoa clica em "leia mais", que abre outra página, o post está com largura pequena, como se eu não tivesse alterado. Entendeu?

    Mas obrigada mesmo assim...

    ResponderExcluir
  124. isso deve ser algum outro erro no html

    depende de como você colocou o código para mostrar o resumo.

    ResponderExcluir
  125. Fabiano, procurei na internet e em seu blog e não achei a resposta para um problema que estou passando em um outro blog que estou criando para um projeto cultural, baixei um template e pra falar a verdade é de um site que na minha opinião cria otimos templates porem muito difícil de se fazer alterações, mais nada que eu não tenha resolvido "ate hoje", mais vamos ao meu problema: eu sempre tiro o cabeçalho do blog e personalizo o banner com o nome do blog e uma imagem referente ao assunto do mesmo, so que agora eu precisava de mais espaço nessa nessa area para esse blog q estou criando, ou seja, precisava colocar mais pra baixo o menu, as duas sidebar e a area de postagem, o template que quero utilizar eh esse http://www.deluxetemplates.net/2012/07/stylishblack-blogger-template.html/demo/
    se vc puder observar, tem um menu, uma caixa de pesquisa e as tres colunas, eu precisava mover tudo isso um pouco mais pra baixo.

    me desculpe o incomodo e vlw pela atenção.

    ResponderExcluir
  126. Bruno Santos a pagina design do modelo funciona neste template que baixou? lá é possivel mudar a largura do blog

    senão terá que achar no html o código da largura.

    deve ser width:980px ou algo parecido com valor alto.

    ResponderExcluir
  127. porém se esse template usar imagens (deve usar) precisará refazer as imagens para modificar o template então talvez seja mais facil mudar o tal banner que está fazendo.

    ResponderExcluir
  128. Olá meu blog de um dia para o outro ficou bagunçado,a coluna ficou no final do blog a baixo já tentei arrumar com seu tutorial mais não consigo,não sei se exclui alguma coisa do html dele estou desesperada,será que poderia me dar uma ajuda meu blog é https://photoshop-fashion.blogspot.com/

    ResponderExcluir
  129. lucineia da silva infelizmente se apagou algo por engano e não tiver feito um backup do template não tem como recuperar.

    ResponderExcluir
  130. Estou de volta para agradecer o conteúdo de seu blog, pois me deu a maior força; me condicionando a resolver, o problema que estava tentando solucionar. Muito obrigado, e que Jesus te abençoe!

    ResponderExcluir
  131. eu queria sabe como mudar o tamanho das letra do blog, tanto no menu quanto no tamanho das letras das postagens

    ResponderExcluir
  132. walter entre na pagina editar html e crie o estilo

    .post {font-size:12pt}

    e ajuste o tamanho, veja aqui mais sobre fontes do blog:
    Como Formatar o Texto do Blog

    ResponderExcluir
  133. Fiz um templatem mais ele tá grande demais pra tela. Tem algo que eu possa fazer para diminuir ele?
    Link do template: http://brogtrolol.blogspot.com.br/

    ResponderExcluir
  134. Coelho no seu blog tem dois gadgets quadrados escrito

    teste
    teste
    teste


    apague o da direita para ver se resolve. Tem um código dentro dele.

    ResponderExcluir
  135. Fabiano, meu blog tem um cabeçalho em toda a largura do blog, mas depois que eu coloquei um slide no cabeçalho, uma grande parte do topo ficou transparente. Eu queria que, mesmo com slide, o meu cabeçalho continuasse atravessando toda a largura do blog, sabe?

    ResponderExcluir
  136. talvez você tenha apagado ou modificado alguma parte do código sem perceber...

    infelizmente se não tiver um backup do template não tem como desfazer.


    pode tentar retirar os slides para testar e depois tentar colocar o código em um gadget ou em outra parte do html só que desta vez mais para baixo.

    ResponderExcluir
  137. Olá Fabiano, estou com um problema no Template que estou editando, ai vim aqui pedir um socorro.

    "Eu não consigo diminuir o espaço entre o 'CABEÇALHO' e o 'MENU',dessa forma a minha imagem de cabeçalho não encosta encosta no 'MENU'deixando um espaço deselegante entre eles"
    Como faço pra resolver Probleminha

    ResponderExcluir
  138. Caso queira visualizar o problema segue o link:
    http://weebtest.blogspot.com.br/

    ResponderExcluir
  139. Jó Souza procure esse trecho do html e faça alguns testes. Troque os valores de padding ou margin por 0. Desta forma

    apague margin:25px 30px 25px 0px e coloque margin:0px no lugar


    #header-right{float:right;margin:25px 30px 25px 0px}


    #Header1 img{padding:25px 0px 10px}


    #outer-wrapper{background:#fff;font-family:Segoe UI,Arial;font-size:100%;font-size-adjust:none;font-stretch:normal;font-style:normal;font-variant:normal;font-weight:normal;line-height:normal;margin:0 auto;padding:30px 15px 0;text-align:left;width:1050px;border-top:0px solid #ddd }

    ResponderExcluir
  140. Fabiano, espetacular sua orientação deu certo, muito obrigador por me da essa força

    ResponderExcluir
  141. Fabiano tá eu aqui mais uma vez solicitanto uma dica.
    minha coluna esquerda de colocar os gadget, está cortando o gadget "MINHA LISTA DE BLOGS" fazendo com que ele não apareça por completo, como centralizo isso de modo que vem aparecer por completo?
    http://weebtest.blogspot.com.br/

    ResponderExcluir
  142. no seu html encontrei
    #sidebar-wrapper{float:right;margin-top:-3px;margin-left:29px;.....


    essa margem negativa margin-left:29px;

    pode fazer os gadgets ficarem escondidos (por baixo) de outra parte do layout.

    tente apagar o código margin-left:29px;

    ResponderExcluir
  143. Apaguei mais continuou a mesma coisa

    ResponderExcluir
  144. Fabiano conseguir resolver esse problema,

    #sidebar-wrapper{float:right;margin-top:-3px;margin-left:29px; overflow:hidden;width:300px;word-wrap:break-word}

    Do código acima retirei essa parte:

    margin-left:29px; overflow:hidden

    ai deu certo, obrigado pelo help

    ResponderExcluir
  145. Olá Fabiano,
    Meu templates e de 3 colunas, mas a coluna do meio e a direta estão com problemas não consigo deixa-las alinhadas a coluna da direita sempre fica muito abaixo como poderia resolver esse problema desde já agradeço

    ResponderExcluir
    Respostas
    1. tente usar o inspecionar elemento do firefox ou chrome para achar o que está gerando o desalinhamento, provavelmente é alguma margem no inicio das colunas (padding ou margin)

      Excluir
  146. Fabiano tentei de todos as formas redimensionar a coluna do meio mas não tive sucesso, passei horas tentando resolver esse problema e nada de conseguir da uma forcinha ai?
    http://adkjovem.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Desculpe mas nós não fazemos serviços para outros blogs.

      se baixou o template de algum site talvez seja melhor trocar por outro porque é bem difícil corrigir erros pois as tags, nomes de id variam muito

      Excluir
    2. uai sem recebi dicas aqui, o que mudou nesse site?

      Excluir
    3. a questão não é receber dicas ... neste caso não tem como explicar como fazer só fazendo testes no html para achar o erro.

      tem que usar o inspecionar elemento ou olhar o html para ver o que gera o espaço no topo das colunas .

      achei uma margem de 20 pixels no estilo #main-wrapper e #featuretop, mas só fazendo o teste para ter certeza

      Excluir
    4. Olá Fabiano, fiz os testes no html e achei os erros, não sabia usar essa ferramenta do próprio navegador, obrigado
      Só achei sua resposta um pouco áspera
      Obrigado

      Excluir
    5. não tive essa intenção, mas como falei templates modificados são complicados de mexer

      Excluir
    6. Tudo na beleza

      Excluir
  147. Olá Fabiano blz?
    Bom estou com uma dúvida aqui a respeito do meu template MOBILE do blogger. (http://www.megawhatsapp.com/?m=1)
    Estou tentando adaptar meu template para o modo PERSONALIZADO para celulares...
    Eu estava fazendo as alterações e conferindo o resultado no próprio navegador DESKTOP, até chegar onde queria, porém quando fui visualizar no meu celular, não está do mesmo jeito...
    O template não se adapta, para visualizar ele precisa dar zoom.
    Nos codigos de largura (width) estava usando no lugar de px usava 100% para adpatar.
    EX: no codigo do template tinha assim:

    #wrapper {
    background:$(wrapper.background.color);
    width:996px;
    margin:0 auto;
    padding:0px 20px;
    }

    eu fiz uma copia do wrapper e colei depois com alteração, só que colocando antes .mobile

    ficando assim

    .mobile #wrapper {
    background:$(wrapper.background.color);
    width:100%;
    margin:0px;
    padding:0px;
    }

    fiz varias alterações em todos template sempre usando a tag (.MOBILE)

    Bom, sei que ficou um pouco confuso a explicação, mais é isso ae.

    Att; Rui Carlos

    ResponderExcluir
    Respostas
    1. veja neste link
      Como Adicionar Gadgets na Versão para Celular do Blogger

      mexer já fiz uns testes mexendo diretamente no html (mobile) e não tive bons resultados, mas no link acima mostra como colocar outros gadgets.

      se quiser continuar fazendo testes não esqueça de fazer um backup do seu template para não correr o risco de estragar o template e não poder voltar ao seu modelo atual.

      Excluir
  148. Eu quero mudar de apenas um widget e não a barra toda

    ResponderExcluir
    Respostas
    1. não tem como alterar a largura de um gadget somente.

      o mais fácil é mudar a posição deste gadget você pode colocar no inicio ou final do blog então ele ficará com a largura total do blog

      Excluir
  149. Oi Fabiano!!
    Tenho uma dúvida, eu não consigo tirar o espaço entre o menu do blogger e meu header, fica um espaço pequeno, mas gostaria de eliminá-lo!
    E o menu quando adiciono cor ao fundo, fica muito maior do que meu header, já aumentei o header, mas ficou péssimo, prefiro meu header com 1099px, como posso reduzir a diferença do comprimento do menu? O widget que usei é do próprio blogger.

    ResponderExcluir
    Respostas
    1. estes problemas são alguns códigos CSS com valores de margem ou largura diferentes do que deveriam ser.

      veja aqui:
      Como Usar o Inspecionar Elemento do Chrome ou Firefox

      com o inspecionar elemento é fácil achar o nome do código que causa o problema e depois alterar no html do seu blog.

      Excluir
  150. Fabiano, Tudo Bem? vim mais uma vez te pedi uma ajuda: eu fiz o procedimento de aumentar a área de postagem, mas na verdade aumentou apenas a coluna de postagem e não área de postagem, as bordas continuam no mesmo lugar, ela aumentou, mas, somente a coluna. Sabe me dizer o problema? fico grato. caso queira ver: www.candeiasbahia.net

    ResponderExcluir
    Respostas
    1. este tutorial é antigo...

      agora é mais fácil alterar a largura pela pagina modelo > personalizar, veja aqui:
      http://www.dicasparablogs.com.br/2014/01/mudar-aumentar-larguras-blog.html

      Excluir