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.

92 comentários:

Mandy disse...

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

parabéns pelos 1000 seguidores *-*

Ana Luh *-* 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

The attitude Included disse...

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

Luana Oliveira :* 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 '

' J o r n a l F e m i n i n o . N e t ϟ 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.

@iamaburguesinha disse...

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

Andy Reis (Elcimar) 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

Juh 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

giselaine alves ♫ disse...

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

Brigada, linda!

Beijocaa

Place Fame disse...

Adorei o Tutorial amor!
Ficou show de bola.

Beijos,
placefame.tk

Paulinha 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 Batista disse...

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

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

Roberta 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

Like a Friday 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

Jovens Leitoras 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/

Ana Luh *-* 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 Dantas disse...

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

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

ზ Fernanda Moraes 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

letícia disse...
Este comentário foi removido pelo autor.
letícia 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

Dad's disse...

Participe: Concurso concorrendo a 2 meses de divulgação em uma página do B&B! Corra, é até dia 15/8!

http://bubblegumburts.blogspot.com/2011/07/concurso-b.html

Doce Girl disse...

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

Bia Souza disse...

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

Stella Valim disse...

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

Anni 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

Ana Luh *-* 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.
Ana Luh *-* disse...

Oii, sou a dona do style teens, e acebei de criar outro blog, visita e ver se gosta ❤
http://sermenina-blog.blogspot.com

Trashy Girl 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

anacarol. 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.

Gabi disse...

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

Clara ;* 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? ><

Bella Dieguez 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.

Bella Dieguez 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 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,

Nana (14) 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.

Caprichadas 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.

Mah =D 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!

Geoô Almeida disse...
Este comentário foi removido pelo autor.
Thais Rodrigues 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 ?

Clara ;* 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/

Pamela Dal'Alva. disse...

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

Manuella N. disse...

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

Manuella N. disse...

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

Giovanna 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

Cherry disse...

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

rarose disse...

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

@MadduFuentes disse...

Bem, estou aqui para dizer que aconteceu uma coisa RUIM para mim, perdi todas as postagens do meu blog por causa de um endereço de e-mail antigo que estava dando problemas :( Perdi tudo, seguidores, posts, toda minha dedicação. Mas, não desisti e refiz para RECONSTRUIR tudo novamente e gostaria muito que seguisse ou curtisse a pagina http://cigarret-he.blogspot.com/ Preciso recuperar nem que for aos poucos, mas a ajuda de outros amigos sempre vai valer a pena. Desde já um beijo e um obrigado e continue assim <33
PS: Estou retribuindo tá? õ/

kah santos :) disse...

Olá, parabéns pelo blog^^
estou te seguindo
espero retribuição
bjokas
kah santos :)
www.kekeprincesa.blogspot.com

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

Leticia disse...

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

Lais Santos disse...
Este comentário foi removido pelo autor.
Juh Demos // My World disse...

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

Beatriz Santos @deduasuma 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

Bella disse...

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

Bruna Escarabelli 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 !

Oh! The Glam 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 :(

Gabriela. disse...

Não consegui no meu aparece a barra transparente

Geronda disse...

Não deu certo.

Katthy Jackellinny 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 *.