31 agosto 2011

Tutorial: Duas colunas com fundo colorido

    Esse tutorial é super legal,e fácil de fazer,e também deixa seu blog com mais estilo,eu simplesmente ADORO esse tutorial ,então vamos ao que interessa:

          Vá em "Design", depois em "Designer do Modelo" e clique em "Layout" e escolha o modelo de 2 colunas,você pode escolher a do lado direito ou esquerdo,salve clicando em ''aplicar ao blog''.

         Vá em ajustar larguras,veja o tamanho da barra lateral,(direita ou esquerda) aqui no Magic eu uso tamanho de 400 pixels,então significa que cada coluna mede 200 pixels . Salve clicando em ''aplicar ao blog''
         
(Essa imagem acima acabou ficando muito grande é por isso que ela ta meia fora da area de post )

                      3° Agora edite uma imagem para usar como funda da sua coluna:


       Como sou boazinha, eu criei essa imagem de 400 pixels para vocês.Se quiserem usar sem editar,fiquem a vontade.Se a coluna de seu blog for de outro tamanho,edite uma imagem com o tamanho da coluna de seu blog,depois de editar hospede sua imagem no ImageShack ou em outro site que hospede imagens.

        4° Depois de ter feito isso,vá novamente em ''Desing'',clique em '' editar HTML'',dê Ctrl + f e pesquise por:
                            .main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
    Use código acima se você escolheu a coluna  do lado direito.

                   Ou se você escolheu a coluna esquerda,use esse código abaixo:

                            .main-inner .fauxcolumn-left-outer .fauxcolumn-inner {
.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
margin-right: $(content.padding);
background:$(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;
}

Substitua a parte destacada em roxo por esse código:
 
                                 background: url("URL DA IMAGEM") repeat;

Não tira as ''aspas'',o URL DA IMAGEM é o link da imagem que você hospedou.

   Clique em visualizar,para ver se ficou tudo direito,se ficou direito salve.

 Aaa já ia me esquesendo dedar os creditos ao blog  Menina Nerd  ,foi nele que vi esse tutorial

Um comentário:

Emily Caroline disse...

Já conhecia, adoro esse tuto!

Beijos, Emily
Place Fame | Extras | Twitter