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:      
.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!

Leave a Reply

☾ Sim, fui eu que criei o layout. Este é precisamente um blog de testes.

☾ Aceito afiliações.

☾ Até faria templates, mas não sei disponibilizar.

☾ Posso te divulgar, porém só se te achar digna de nota ou uma boa pessoa.

☾ Quanto a comentários:
♥ Os pedidos são aceites nos comentários.
♥ Não aceito xingações nem ofensas, gostos não se discutem e cada um é como é. Se quiser uma crítica, que seja construtiva.
♥ “Seguindo, segue de volta?”, só serão aceites como erro no caso de blogs principiantes – e eu irei confirmar ao blog. Caso contrário será ignorado.
♥ Deixe o link do seu blog no fim do comentário e eu faço questão de pelo menos visitar e comentar.

Subscribe to Posts | Subscribe to Comments

Related Posts Plugin for WordPress, Blogger...

- Copyright © 2013 Layout SAO - Adaptado por Anilyan - Powered by Blogger - Base by Johanes Djogan -