quinta-feira, 23 de maio de 2013
Como deixar o blog adaptável a qualquer tamanho de monitor.
Olá galera blz !
Hoje eu venho com esse tutorial e confesso que passei meses tentando descobrir como fazer para que o blog tivesse o mesmo efeito dos sites convencionais (Que se adaptassem automaticamente a qualquer resolução de tela)
Não achei essa explicação na internet pois muitos sites e blogs falavam e eu não entendia nada.
Então fui tentando modificar o HTML e acabei conseguindo encontrar o código que da esse efeito maneiro.
O blog da opção de você ajustar a largura mais dependendo do monitor do PC que acessar seu blog na internet pode ficar totalmente desorganizado.
Veja os exemplos abaixo:
 |
| Blog sem auto ajuste Click na imagem para ampliar |
As setas vermelhas estão mostrando a falta de organização no blogger e isso provavelmente não ira agradar os leitores de seu blog
 |
| Blog com auto ajuste Click na imagem para ampliar |
Veja como o blog aparece inteiro sem ter que utilizar aquelas barras deslizantes.
Vamos ao código HTML para que você possa dar esse efeito ao seu blog:
1° Passo: Vá em Layout de seu blog e em seguida click em Modelo
2° Passo: Click em Editar HTML
3° Passo: De um click com o botão esquerdo do mouse dentro da área de código do seu blog e em seguida aperte "Ctrl F"
4° Passo: Pesquise por:
960
ou
<b:variable default='960px' name='content.width:
O objetivo é você encontrar a linha 960 e seguindo a palavra WIDTH:
Logo após a palavra que está em vermelho você deve dar um espaço e digitar 100%
Simples né !
5° Passo: Click em salvar
Explicação:
Você devera encontrar o código assim:
<b:template-skin>
<b:variable default='960px' name='content.width' type='length'/>
<b:variable default='0' name='main.column.left.width' type='length'/>
<b:variable default='310px' name='main.column.right.width' type='length'/>
<b:variable default='960px' name='content.width' type='length'/>
<b:variable default='0' name='main.column.left.width' type='length'/>
<b:variable default='310px' name='main.column.right.width' type='length'/>
E ele deverá ficar assim:
<b:template-skin>
<b:variable default='960px' name='content.width 100%' type='length'/>
<b:variable default='0' name='main.column.left.width' type='length'/>
<b:variable default='310px' name='main.column.right.width' type='length'/>
<b:variable default='960px' name='content.width 100%' type='length'/>
<b:variable default='0' name='main.column.left.width' type='length'/>
<b:variable default='310px' name='main.column.right.width' type='length'/>
Assinar:
Postar comentários (Atom)
Muito bom mano ajudou pra caramba
ResponderExcluirEsse realmente foi muito simples e muito procurado...muito obrigado http://downloadsprado.blogspot.com.br/
ResponderExcluirSHOW, SHOW ,SHOW!!!!!!!!!!!!!!!!!!!!!!!!!!
ResponderExcluirObrigada! ♥
ResponderExcluirvlw
ResponderExcluirMuito bom!!!
ResponderExcluirEste comentário foi removido pelo autor.
ResponderExcluirNa versão mobile não está ajustando...
ResponderExcluir