Ajustar Largura

Uma coisa que atrapalha muita gente são as larguras do blog e dos objetos que colocamos nele. E algumas vezes nem percebemos que o problema é este, por exemplo: se você colocar um player (musica) ou vídeo no seu blog e aparece somente uma parte da imagem ou não aparece o botão play para você iniciar a musica, provavelmente o problema não está no código nem no site que fornece o serviço. Mas é tudo uma questão de espaço, ou melhor, dizendo falta de espaço.

Vamos dar um exemplo pratico: se a sidebar (coluna do menu, links, etc..) tiver uma largura de 200 px (width=200px) e você tentar colocar musica do MP3 tube provavelmente não irá aparecer o botão play, pois a largura do player é 260, então somente uma parte será visível, pois esses arquivos são no formato flash (.swf) e a mesma explicação vale também para vídeos.

Mas tem um jeito de resolver isso, alias vários jeitos, o correto seria aumentar a largura da coluna através da página editar html, encontrando a linha #sidebar{width=200px;......}que em nosso exemplo deveria ser alterado para 270px para deixar algum espaço sobrando, porque entre os navegadores existem algumas diferenças quando a interpretação dos estilos CSS por essa razão sugeri o valor 270 e não 260 que seria a medida exata do player.

Contudo nem sempre estamos dispostos a mudar nosso layout inteiro somente por causa de uma musica ou vídeo, então existe outro modo, em vez de aumentar a coluna vamos diminuir o objeto que vamos colocar nela, mas precisamos ter cuidado para não distorcer a imagem. Quando você pega um código de musica, vídeo ou alguma outra coisa em flash, usarei como exemplo um dos avisos de férias do site Cidade Web, podemos alterar seu tamanho mudando essas partes do código:

width="300"
height="225"

Existem dois detalhes fundamentais aqui: primeiro esses dois valores (width e height) aparecem duas vezes no código, portanto altere os dois senão terá problema com a visualização do conteúdo; em segundo lugar quando alterar esses valores faça de maneira proporcional, ou seja, diminua os dois valores width (300) e height (225) de tal forma que a imagem não fique distorcida, nunca transforme uma imagem retangular em quadrada ou vice e versa, pois ficará horrível. No caso acima você poderia usar os seguintes valores sem causar distorção de imagem: 250x188, 200x150, 150x113 e outros. Um lembrete final é que isso faz mudar somente o tamanho de visualização e não o tamanho do arquivo então ele irá demorar o mesmo que o arquivo no tamanho original para carregar e aparecer. Portanto fazer esse tipo de mudança pensando que irá parecer mais rapido é totalmente inútil, pois não altera em nada o tamanho do arquivo.

39 comentários :

  1. oi
    é impressão minha ou voce mudou o leiaute???/

    é meu maior problema, sabe as pessoas que fazem templates deviam pensar um pouco nisso, a gente ver lindos templates, mas com colunas muito pouco espaçosas, as minhas tem 240 px, mas a maioria das playlists que gosto tem 360 px de largura e quando eu modifico a largura delas ficam quebradas dentro da coluna.

    ResponderExcluir
  2. Olá,fabiano
    Seu Blog é dez....copei seu relógio..adorei!
    Vou linkar seu Blog.
    sabe,eu gostaria de poder fazer um banner para meu blog com as tags de htlm....já tentei e nada.....meu Blog se chama Bonequinha de Luxo e creio que ficaria bonitinho..Vc pode me ajudar?

    bjs

    ResponderExcluir
  3. Muito bom o seu Blog. parabéns!

    Eu tive um problema com a auteração da coluna porque o meu blog tem uma especie da pano de fundo e quando altero o tamanho da coluna parte fica sem o pano de fundo pq esse pano que é do proprio blogspot só tem 700px de largura. O que eu posso fazer nesse caso?

    ResponderExcluir
  4. Fabiano, valeu por responder!

    Outra pergunta.
    Tem algum lugar onde eu possa postar uma imagem com o tamanho que eu preciso e mudar o link para funcionar.
    Outra coisa... tem como diminuir as margens? como posso diminui-las?

    Tem alguma postagem em seu blog ensinando a mudar a imagem de fundo?

    O fato é que preciso de alguma forma aumentar a coluna principal de forma que mantenha aquela aparencia pergaminho no fundo.

    abraçÃO

    ResponderExcluir
  5. Anderson

    no menu ao lado em marcadores tem imagem de fundo, lá você encotra varias coisas a respeito disso

    ResponderExcluir
  6. Ajudou muito essa dica. Muito obrigado.

    ResponderExcluir
  7. EU PRESISO ENTENDER ISTO AQUI, EU NÃO ACHEI A LINHA...

    SOCOOOORRO!!!

    ResponderExcluir
  8. muito boa a dica eu achei a resolução 400x325 boa pro meu blog
    vlw!

    ResponderExcluir
  9. Usei e ainda uso bastante o seu blog para aprender e ajustar o meu, mas tem uma coisa que não consifo resolver, e já procurei e não achei nada que me ajude. A situação é seguinte: o meu blog no meu monitor "widwscreen" possui uma visualização perfeita, porém quando avro em um monitor convencional e destrambelha todo, principalmente em um cujo navegador seja o IE6. Na parte inferior da página existe uma barra de rolagem que não consigo retirar de maneira nenhuma. Já alterei os valore width do main-wrapper, outer-wrapper e content-wrapper, mas nada adiantou (aliás, não entendi a diferença do "content" para o "outer"), bem... se puder me ajudar eu agradeço.

    (o template do meu blog é um tem,plate que eu baixei e modifiquei.)

    ResponderExcluir
  10. DM2 Projetos
    não conseguirá ajustar seu blog para todos os navegadores, então use um contador de visitas para saber qual é a resolução de tela da maioria e faça o blog principalmente para eles.

    mas nas alterações que fez no seu template tem mesmo alguma falha pois na minha tela está aparecendo a barra de rolagem embaixo e uso 1440x900.

    note também que no topo da sua pagina aparece /*****************************************/ /* ESCONDER SIDE BAR */ /*****************************************/

    infelizmente corrigir esses erros é bem complicado, precisaria desfazer as alterações que fez no template ou começar com um modelo padrão novamente.

    ResponderExcluir
  11. Fabiano, estou com dois pequenos problemas no meu blog, poderia me ajudar?

    http://o-tuma.blogspot.com/

    o primeiro problema é com o "Leia Mais", ele está repetindo duas vezes no final das postagens e eu gostaria de alterar de "Mais informações »" para "Continue Lendo »".

    o segundo problema, que está relacionado com ajuste de tamanho, é nas imagens das postagens, elas não ficam do tamanho que eu quero, sempre ficam em miniatura.

    poderia me ajudar?
    agradeço. seu blog é o melhor (:

    ResponderExcluir
  12. desculpe o transtorno Fabiano, mas já consegui resolver os problemas sem sua ajuda (: ou melhor, com ela, pois tudo que sei sobre blog devo a você e seu blog.

    ResponderExcluir
  13. cara valeu as dicas, deu para melhorar e muito meu blog, seu blog e 10!!

    ResponderExcluir
  14. No meu caso , ele do jeito que baixei ele não veio com a caixa de postagem no lugar certo... dentro dos limites, não consigo acerta-la... consegue me ajudar? ( blog: www.gtasalvadormods.blogspot.com / msn: mister_for_juninho@hotmail.com )

    Obrigado desde jpa !

    ResponderExcluir
  15. GTA Salvador Mods tente falar com o site de onde baixou o template para ajustar os erros que vieram nele, certamente eles saberam consertar o template que criaram

    ResponderExcluir
  16. valeu amigão essa dica apareceu bem na hora sucesso.

    ResponderExcluir
  17. Por favor, me ajude... O hack "leia mais" aparece duas vezes no final das postagens.... o Tuma conseguiu solucionar isso mas eu não, rsrsrs.

    ResponderExcluir
  18. Nanda
    atualmente conheço dois códigos para fazer o resumo da postagem:
    Mostrar resumo da postagem

    Postagem expansível com miniatura da imagem

    você precisa ver qual deles seu blog usa e ver as instruções sobre o link leia mais dele, assim poderá achar o que está fazendo aparecer duas vezes a mesma coisa.

    entre na pagina editar html, clique para expandir o modelo e procure pelo texto que deseja apagar. Se os dois textos forem iguais, quando achar altere alguma palavra em um deles e salve, assim poderá ter a certeza que está apagando o certo

    ResponderExcluir
  19. Nandoleitte
    não publiquei seu comentário para não divulgar o link do plagiador...

    mas obrigado por avisar e já fiz a denuncia... alias estou olhando o resto do site dele agora rsrs

    abraços e obrigado

    ResponderExcluir
  20. oiiii poderia me dar uma ajudinha? eu tentei mas queria aumentar a area de postagem, ela esta nessa largura do seu blog, queria ela mais larga e aparecer menos o fundo que é o que esta mais aparecendo e meu blgo fica meio estranho, poderia me ajudar? ja tentei colocar coluna nos 2 lados mas o meio continua pequeno :( obriagda

    ResponderExcluir
  21. Mi Godoi
    alterar a largura pode ser um problema se usar imagens de fundo...

    infelizmente o unicio jeito é refazer a imagem que está dando problema

    ResponderExcluir
  22. Olá! No meu blog está sobrando um espaço considerável acima da imagem do cabeçalho. Mas não é ela, pois mesmo se eu colocar um gadget acima da imagem, o espaço continua sempre sobrando. Como posso resolver isso?

    Blog: www.oprofetadiario.com

    Desde já agradeço pela atenção e gostaria de dizer que sempre visito o Dicas para Blogs, muita coisa aprendi - e aprendo - aqui!

    ResponderExcluir
  23. @Hiago Freitas

    entre na pagina editar html, procure e apague:

    .content-inner {
    padding: 100px;
    }


    e também esse trecho

    < style type="text/css" >
    #navbar-iframe { display:block }
    < / style >

    ResponderExcluir
  24. Eu apaguei o primeiro trecho, mas ainda fazendo algumas alterações na busca e o espaço ficou menor! Quanto ao segundo trecho, não o achei. Tentei buscar por partes separadas do código, mas também não tive resultados.

    Se souber o outro código que pode ser, agradeço se puder dizer. Abraço.

    ResponderExcluir
  25. o espaço diminuiu um pouco mas ainda está um pouco distante

    tente procurar e apagar

    .main-inner {
    padding-top: 30px;
    margin-bottom: 30px;
    }

    tirar espaços destes novos templates é complicado o código não aparece exatamente igual no blogger e quando visita a pagina

    ResponderExcluir
  26. Não encontrei nada, então fiz como anteriormente e dá na mesma... não sai, e também não altera nada no template em si... ;(

    ResponderExcluir
  27. retirar todo o espaço não é possivel, ou melhor dizendo é dificil de achar e teria que fazer testes no html do seu blog

    mas reduziu um pouco a distancia 30pixels do código padding-top: 30px;

    ResponderExcluir
  28. Ah... Bem, vou tentar pesquisar mais, vejo se encontro alguma forma. Obrigado pela atenção e continue sempre atencioso desse jeito ;)

    ResponderExcluir
  29. como ajustar o banner do meu blog
    http://linewebnet.blogspot.com/

    ResponderExcluir
  30. Anônimo
    se o seu blog não tiver esses códigos provavelmente usa o design do modelo, então é só entrar na pagina e alterar a largura, veja aqui: Designer de modelo - Layout e Configurações Avançadas

    ResponderExcluir
  31. Aumentei a largura da área do post, e quando visualizo pela Home está tudo perfeito. Mas quando clico em “ler mais” para visualizar um post completo, a largura anterior (menor) continua, cortando as imagens que de acordo com a largura que eu estabeleci deveriam caber. Você sabe como posso arrumar isso? Desde já, muito obrigada.

    ResponderExcluir
  32. Carla
    seu template deve ser personalizado e ter muitas alterações.


    normalmente é para a pagina inicial ser igual a das postagens.

    infelizmente em alguns casos é melhor trocar o template do que corrigir o erro.

    ResponderExcluir
  33. alguem sabe como alterar a largura da area de postagem de um template baixado da internet?
    porque eu ja tentei em main-wrapper mas não da,tentei num tal de post-body da pra ajustar mais ai some as imagens que compõem a caixa de postagem

    fico grato se me responderem(mesmo que nao funcione hehe)

    ResponderExcluir
  34. anonimo o problema de templates prontos é que o desenvolvedor troca as tags por nomes que ele quiser, por exemplo o main-wrapper se eu trocar esse nome de estilo por qualquer outro que eu imaginar em todas as partes do html o template continua funcionando igual.

    mas veja aqui Achar e Resolver Problemas com Códigos HTML no Blog

    isso pode ajudar a encontrar os códigos

    ResponderExcluir
  35. oie não to conseguindo usar esses códigos está dando erro! Vocês podem me ajudar? ninamaluc@hotmail.com

    ResponderExcluir
  36. Amigo, meu blog está ok, mas quando clico no linkbar para abrir outra página, esta fica muito mais larga que a original, oq devo fazer?

    ResponderExcluir
  37. não sei qual codigo está usando mas target=_blank (código para abrir links em nova janela) não atrapalha em nada o layout

    ResponderExcluir