Posted by : Anilyan
26/08/13
www |
Tadaima, minna-san, hoje trago um tutorial que nunca vi em lado nenhum e que na minha opinião deixa um blog extremamente original. É o tutorial de puxar o layout mais para o lado, para a esquerda ou para a direita - ficará algo assim (o print é de um fan-blog meu do ciclo da herança). Está a ver a sidebar quase colada à barra de rolagem? E ainda pode aproximar mais! Também funciona para o outro lado, claro.
1
Vá primeiro a Modelo» Personalizar» Ajustar larguras.
Escolha a largura da sua sidebar e a largura total do blog. É importante que a largura total do blog seja pequena, não mais de 800 ou 900px, porque ao fazer o resto do tutorial ela irá alargar para o lado que você puxou. Já a largura da sidebar, escolha a que quiser, essa não irá mudar.
2
Vá a Modelo» Editar HTML » Procure pela linha seguinte (com Ctrl + F dentro do HTML)
.main-inner .columns {
Abaixo dessa linha, acrescente:
se quiser mover para a direita:
margin-right: -150px; OU margin-left: 150px;
se quiser mover para a esquerda:
margin-left: -150px; OU margin-right: 150px;
É só isto, bem simples, não? O complicado foi eu descobrir a linha certa, porque de resto é só investir nos códigos e mover como quiser. Mas, ao contrário do que muita gente faz, eu não trarei o tutorial para um modelo só. Este tuto, sei que funciona no modelo travel, mas experimentei mais dois modelos:
1 - Modelo Janela desenhada
Procure por:
2- Modelo Simples
Procure por
Ja nee!
1 - Modelo Janela desenhada
Procure por:
.main-outer {Abaixo cole a linha conforme o que quiser mudar:
- Subir» margin-top: -100px;
- Descer» margin-top: 100px;
- Para a direita» margin-right: -100px;
- Para a esquerda» margin-left: -100px;
2- Modelo Simples
Procure por
body {Abaixo cole a linha conforme o que quiser mudar:
- Subir» margin-top: -100px;
- Descer» margin-top: 100px;
- Para a direita» margin-right: -100px;
- Para a esquerda» margin-left: -100px;
Ja nee!