Coloque duas colunas com fundo colorido

Antes de começar esse tutorial tão desejado, quero agradecer aos 1000 seguidores! Puxa, muito obrigada, gente! Quando paro pra pensar que há seis meses atrás eu estava comemorando os 100 seguidores... nossa, sem palavras. Obrigada mesmo!

Bom, começando a temporada de só tutoriais, vou postar o tão pedido tutorial das duas colunas de um lado, com fundo colorido (duas cores). Mas como a maioria aqui usa os novos templates do Blogger, a coisa complica um pouco (como sempre, né? Logo logo vou fazer um post desabafando e ao mesmo tempo implorando pra que vocês larguem esses modelos!). As colunas só podem ser do mesmo tamanho, para colocar o fundo vai ser necessário editar uma imagem. Vamos lá:

1. Vá em "Design", depois em "Designer do Modelo" e clique em "Layout":


Salve clicando em "Aplicar ao Blog".

2. Agora vá em "Ajustar larguras":


Salve novamente clicando em "Aplicar ao Blog".

3. Agora é preciso editar uma imagem para usar como fundo:


Fiz essa imagem para você usar como base na sua edição (lembrando que ela tem 400px, ou seja, 200px pra cada cor), se quiser usá-la sem editar, fique à vontade! Se desejar colocar 500px, você terá que editar uma imagem de 500px avá com 250px para cada cor, e assim por diante.

Depois de editar, hospede a imagem no Imageshack, ou em qualquer outro site de hospedagem de imagens e guarde o link.

4. Por fim, vá novamente em "Design", depois em "Editar HTML", dê Ctrl+f e;

 se você escolheu as colunas do lado direito, procure por:

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {

se você escolheu as colunas do lado esquerdo, procure por:

.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {

Vai aparecer assim:

.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 vermelho por:

background: url("URL DA IMAGEM") repeat;

Obs.: Não retire as aspas. Url da imagem é o link da imagem que você hospedou, ok?

Agora visualize, se estiver tudo certo, salve. Qualquer dúvida é só comentar aqui. Beijos.

88 comentários:

Mandy disse...

pq andreza?
os modelos antigos são melhores pra edição?
desabafe! xD

parabéns pelos 1000 seguidores *-*

Anônimo disse...

Então não existem duas colunas, são só imagens????

Mas como assim? e se exemplo:
eu criar um gadget, e ele ficar no meio da imagem, e não parecendo duas colunas??
Help?

ah, mesmo assim, ótimo post!
http://styleteensnews.blogspot.com

Attitude Included disse...

Nossa ainda beeeem que você postou! hahaha
Tava todo mundo perguntando!
xoxo
theattitudeincluded.blogspot.com

LUANA ANDRADE disse...

aain ' que shoow *-* eu queria mesmo aprender ,
da uma olhada no post que eu fiz no pt e comenta ?
http://paradateen1.blogspot.com/2011/07/oi-gente-muiito-tempo-quando-eu-criei.html
bjs @LuOliveira6 '

Unknown disse...

PARABÉNS cat *-*, adorei tentei,consegui.Obrigada,parabéns pelos seguidoresss :)

jornalfemininonet.blogspot.com

Andreza disse...

@Mandy - São muuuuuuuuuuuuuuuito mais fáceis de editar, nossa, sem comparação.

@Ana Luh - Existir, eles existem AUHAUH Mas as duas cores só aparecem por causa da imagem.

Pois é menina, esqueci de mencionar isso no post, o 1º e o último gadget não podem ser usados se não vai ficar no meio da imagem, mas os outros dá pra usar normal, desde que você edite direitinho.

Jessica Zuza ❥ disse...

Eu ja tava procurando como fazia isso hehe
Ajudou mt mt mt

Elcimar Reis disse...

Eu queria mesmo aprender, mas agora que todos os blogs querem esse designer, já fiz um deisgner original para o meu blog! (kkk) Mas adorei o tutorial, e agora é temporada de tutorial? eu vou adorar! (^^)

http://acessopermitidoblog.blogspot.com/

Kharla Cardoso disse...

Nhaa Amei! Ótimo post!
Ah e parabéns pelos 1004 seguidores!
3bjs

Mara Isa Borges disse...

a minha coluna ta ficando transparente, não entendi o porque se eu peguei essa mesma imagem só que coloquei ela no preto e branco

Juliana Demos disse...

oi ameis seu blog e ja estou seguindo se puder fazer uma visita la no blog sera muito bem vinda...

blogjulianamyworld.blogspot.com

@giselainealves disse...

E se eu quiser usar com uma só coluna? Como eu faço? :D

Brigada, linda!

Beijocaa

Emily Caroline disse...

Adorei o Tutorial amor!
Ficou show de bola.

Beijos,
placefame.tk

Paula Souza disse...

Pois é, eu fiquei dias tentando descobrir como fazer isso, foi uma amiga minha (que nem é blogueira) deu a ideia de fazer uma imagem. Está meio que uma febre isso de duas colunas, eu acho mt mt lindo, legal você postar.

Ahh, e parabéns pelos 1000 seguidores, o MN merece !

Beijinhos,
http://coisasdegarotasoficial.blogspot.com

Bubble Dream disse...

eu nem mexo,sempre peço pra alguém dar uma geral lah no blog e prooontinhu hahahaha já tô qrendo dar uma mudada outra vez lah -------* passa lah q tah tendo Especial Harry >. bjooo

Sunny disse...

MINHA SALVAÇÃO , quebrava minha cabeça procurando como fazer,estava procurando no google e achei este tuto. SALVAÇÃO

Anônimo disse...

tbm tava procurando esse tuto, to pensando em colocar no meu blog ^o) enfim, parabéns pelos 1000 seguidores (y'

P.S:http://complicadessimo.blogspot.com/

Mariana disse...

Vc é a melhor pessoa do mundo rsrs, obrigada pelo tutorial estava louca para encontra-lo.

http://girlteen-s2.blogspot.com/

. disse...

Andreza, primeiramente obrigada pelos tutoriais, eles estão me ajudando muito. Mas vamos ao assunto: Queria saber se poderia ensinar a colocar os gadgets em cada coluna, sem que eles fiquem no meio das duas colunas. Desde já agradeço, beijos :]

Cassia Christine disse...

Nossa, ajudou muito, passei dias procurando. Parabéns pelos 1000 seguidores (:

http://candylife-cc.blogspot.com

valen.valdez disse...

olá andreza (: seu blog lindo como sempre, agora é so tutoriais né? boa sorte
realmente os modelos de 2006 são bem mais faceis de mudar, estamos meio sem tempo pra ficar mexendo por isso usamos esse novo, mais pra iniciantes é bom, porque não precisa mexer com codigos e tals
adorei, estou a espera de novos tutoriais (:
beijoos

Sobre Meus Livros disse...

Andreza, adorei seu post *-*
E eu queria saber uma coisa, bem rapidinha, sabe quando você posta uma frase com um fundo atras? então, pode me explicar?
Isso deve ser suuuuuuuper prático, mas eu tô perdida DD:
Tipo onde tem os códigos, com fundo xadrez :D
Se puder me ajudar agradeço :D

Alias, se não for só uma imagem já com a frase nem me responda, SHUAHSU.

Rafaah Paixao disse...

Oi flor* vc pode me ajudar? não to conseguindo, hospedei as imagens td direitinho mas qnd coloco o link dela não aparece as imagens no blog, há tempo q to procurando esse tutorial e agora q achei não to conseguindo de jeito nenhum...me ajuda p/ favor?
http://maniasgirls.blogspot.com/

Anônimo disse...

Aceita parceria?
Ah, o blog tá lindo ;3
Beijos e amei o post ^^
http://styleteensnews.blogspot.com

Luana Costa/ Keiko disse...

aah, que ótimo, tava procurando saber como botava mesmo, adorei *-*

Jéssica Nóbrega disse...

muito legal mesmo, era o que eu estava procurando. *-*

http://cupcakebomb-js.blogspot.com/

Fernanda Floyd disse...

Muito bom, já tá no meu blog, obrigada Andreza :)
Não vejo a hora de terem mais tutoriais aqui no MN.

www.fearlessworld-blog.blogspot.com

Rafah - Rááh - Sah disse...

Oie Flor , selinho pra vc aqui http://3.bp.blogspot.com/-YOzLIXUzVyk/ThylN1kXfUI/AAAAAAAAARU/xzHV0_a_OxA/s1600/blog.jpg Espero ganhar um de vc tbm !!!!!!


Bjs de morango
Rááh pequetuxa
Blog : wwwetcvariascoisas.blogspot.com

Leka disse...
Este comentário foi removido pelo autor.
Leka disse...

Seu BLog é lindo! Parabéns!!

Ei Andreza, vc pode me ajuudar? Gostaria muito de fazer este menu ( onde tá escrito papo de nerd, dicas , seu blog e etc ) me mande um email??

Obrigada !!
PS: só não vou colocar meu blog aqui pq eu fiz ele hj então né? Tá vazio vazioo rsrs'

xoxoxoxo

Jennifer Jonson disse...

Oi! Aqui é Jennifer, do blog Doce Girl e eu adoraria fazer parceria com você!
Aceita?
www.blogdadocegirl.blogspot.com

Beatriz de Oliveira - Ahasa, Gata! disse...

ahh e tem sorteio em parceria com a tilibra no meu blog também!passa lá:
Lolli-pop-blog.blogspot.com

Anônimo disse...

Salvou minha vida, sério ~ÇWELR~WL~RL~WRLRWE~ aaaaaaaah, que lindo *-*

Anny S. disse...

Amei o post, estava procurando a séculos haha.
Só queria saber uma coisa, como faço pra deixar uma coluna mais larga que a outra como você fez aqui no blog? Eu tinha pensado em pegar aquele modelo com uma coluna de cada lado e juntar as duas de um lado só pelo html, mas não sei se é possivel... (nossa, falei de mais ^^)

Anônimo disse...

Fiz as alterações no layout, apliquei ao blog e ajustei a largura das colunas, porém, ao pesquisar .main-inner .fauxcolumn-left-outer .fauxcolumn-inner {
no html do meu blog de teste, não encontrei :/

bruna disse...

Fiz as alterações no layout, apliquei ao blog e ajustei a largura das colunas, porém, ao pesquisar .main-inner .fauxcolumn-left-outer .fauxcolumn-inner {
no html do meu blog de teste, não encontrei :/ 2

Anônimo disse...

Ah, e faz um tuto ou ensina por comment, como coloca a assinatura do autor do lado direito?
eu coloquei a assinatura, mas só fica noe squerdo :(
http://sermenina-blog.blogspot.com(aqui que tá a assinatura)
http://styleteensnews.blogspot.com

Nathalia disse...
Este comentário foi removido pelo autor.
Unknown disse...

Você não usa os modelos novos do blogger?

JÔZE PAIVA disse...

Adorei as dicas! Estarei acompanhando o blog... ;)
........
http://mulherdejaleco.blogspot.com

Louca Mistura disse...

Todo mundo querendo esse tutorial *-* E é bem fácil.
Quero saber porque os tutoriais antigos são melhores, hahaha
beijos
blogloucamistura.blogspot.com

Radar Girls disse...

Oi. No meu outro blog, eu fiz e deu certinho, só que nesse eu não tô achando o código ".main-inner .fauxcolumn-right-outer .fauxcolumn-inner {" , nem com right, nem com left . Se der, responde pelo twitter, porque o blog tá em reforma, e tá fechado . Beijos da Fi, e obrigado! @rgblog ♥

Nathalia disse...

Eu não achei os códigos! Por que heim?

http://blogskygalaxy.blogspot.com/

Jefferson Reis disse...

Não consigo encontrar os códigos.

Anônimo disse...

tava procurando a 3 milões de anos!Obrigada.

Anônimo disse...

Eu fiz tudo certinho mas não mudou nada!
Por que será? Help me! DD: rs.

beijos s2
www.clara-rodriguez.blogspot.com

Andreza disse...

@Clara - Será que vc colocou os códigos tudo certinho? ><

Ella disse...

andreza, heeelp! kkk
como faz para deixar uma parte maior que a outra? tipo no seu?
beijos, http://destemidagarota.blogspot.com

Andreza disse...

@Bella Dieguez - Nos novos modelos eu acho que não dá amr :/ No meu eu consegui porque ele tem como base o modelo mínima.

Ella disse...

aah. que pena :/ é mt ruim, ele fica pequeno! :P mas mesmo assim eu coloquei :B kkkk obrigada!
beijos, http://destemidagarota.blogspot.com

Luisa Macedo disse...

e se eu uso o minima?? como faz?

Aninha Batalha disse...

Me ajuda.. qdo eu dei ctrl+f não achei oque tinha que pesquisar e as colunas ficaram largas tudo direitinho, mas num foi na horaa!! Me ajuda pelo amor de DEUS!!
beijoos

Isabely Saccomani disse...

Aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaah! Ficou ótimo o meu! Estou fazendo reforma... Obrigada, amorzinho <3,

Lana disse...

Adorei este tutorial. Gosto de todos os tutorias que você ensina aqui no Menina Nerd, aliás. Muito bom mesmo, bem fácil de entender! Acho que vou fazer uma reforma lá no blog quando estrear as novidades e tanto este, quanto quase todos os tutoriais daqui vão me ajudar muito!

Aline Castro. disse...

Oi,
tentei fazer e bom...
uma parte deu certo, só que o plano de fundo das minhas postagens ficou transparente. tentei mudar no designer de modelo, mas o problema não era lá. me ajuda?
parabéns pelo blog.

Perfil disse...

Aconteceu o mesmo comigo, fiz tudo direitinho, e no final a barra lateral ficou transparente. Ficou assim:
.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
background: url("http://imageshack.us/photo/my-images/202/89580304.jpg/") repeat;
}

Tem algo errado? Por favor, preciso que me ajude. E se puder,responde lá no meu blog. Beijo, parabéns pelo maravilhoso blog.

Mari Brandani :3 disse...

Dreza, eu coloquei as duas colunas, fiz a imagem, fiz tudo certinho... mas na hora de procurar por .main-inner .fauxcolumn-left-outer .fauxcolumn-inner { eu não achei!
O que tem de errado? Obg

Elizabeth Passos disse...

Para tudo!!!! conseguir! MAS, tem uma mudanças para os nosvos templates! Vou postar esses tutor diferencial no EP! Valeu miga!

Geez disse...
Este comentário foi removido pelo autor.
TRodrigues disse...

Euu tbm nãao consegui fiz tudo certinhocom a imagem de duas cores e quando visualiso continuaa a mesmaa coisaa , qual o melhor template pra usar no blog ?

Anônimo disse...

Andreza, só vi agora que você respondeu meu comentário, rs.
Então, eu fiz tudo certinho, pela terceira vez, mas não deu certo, as colunas ficam transparentes! D:

Giovana disse...

Andreza,estou com o mesmo problema de algumas fiz tudo direitinho 2 vezes,hospedei,não retirei as aspas...Mas quando visualizei ficou transparente.

Se possível responda no meu blog.*-*

http://blogdagi1.blogspot.com/

Pam Dal Alva disse...

não consegui fazer.. poxa..=/ tem como me ajudar?

Manella Castelan disse...

Hoie, olha, eu fiz tudo mas eu não consegui, por favor me AJUDA!Eu quero muito uma barra de ferramwntas ssim

Manella Castelan disse...

Meu blog é
http://s2sweetgirlforever.blogspot.com/
u fiz tudo direitinho umas duas ou tres vezes e não deu certo!

Paulina disse...

Consegui! Depois de muito tentar, mas o resultado ficou incrível. Tive que mundar meu template pelo travel (viagem) que é um modelo do blog para dar certo.

Anne disse...

O meu eu tava tentando mas nao aparecia o codigo para botar :(
ibloguera.blogspot.com

Ana disse...

Oi fofa,
amei o site, parabéns pelos 100o seguidores.
Vc aceita parceria??
Bjs,
http://cutiecatt.blogspot.com

Rose alves disse...

consegui obg me ajudou muito...
Parabéns seu blog é tudo de bom, ja sou fã :)

Karols disse...

Haa 'mt legal :D
Veja meu blog
http://karolsgirls.blogspot.com/
vlw

Laura Gomes disse...

Eu não consegui la no imageshack tá link , link direto e etc e o meu não deu eu fui usa o seu

Anonimous disse...

Andreza eu fiz o tutorial tudo bonitinho,mais quando fui visualizar a barra lateral estava transparente , porque ficou assim ? Me ajude..

LaySweet disse...
Este comentário foi removido pelo autor.
Juliana Demos disse...

amre no meu nao tem esse código o que eu faço?

Beatriz Santos disse...

é verdade no meu naoo tem esse codigooo meu ajuda :/

Andriéli disse...

no meu não tem esse código =( como faço???? bjjjj

Unknown disse...

no meu não tem esse código²
Como eu faço??
PS:Amei seu blog, parabéns

Unknown disse...

Oi, meu template é o mínima. Tem problema? Qual é o melhor? Me ajuda?

Beijos e parabeins pelo blog!
doceamor-corderosa.blogspot.com

Bruna

. disse...

Eu nãao achei o codigo que colocou pra preucurar !

Alice Andrade :) disse...

Eu não achei o código :(

Thifany disse...

Andreza , eu não achei o código no meu blog , mas achei no da minha amiga .
Tem alguma coisa de errado ?
Pf me ajuda ,
fashion-thi.blogspot.com

Obrigada

Thaís Amaral disse...

eih mulher.no meu blog nao aparece uma parte disso ai.ai nao deu.plz ajude.bjoos
tt-itgirl.blogspot.com

Anônimo disse...

eu não to achando o código que é para´procurar depois do ctrlf
me ajudaaaaaaa
bjs,
Ge
www.blogdasbff-geenic.blogspot.com

Jaqueline Calixto disse...

Affz não ta aparecendo Andreza HELP

Anônimo disse...

Andreza consegui mas ficou pequeno :(

Gabi Luckmann disse...

Não consegui no meu aparece a barra transparente

Unknown disse...

Não deu certo.

Unknown disse...

pow me ajuda ae *

no meu html só aparece esse trecho

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner{

e quando vou visualizar aparece um monte de letras * nun da *.