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;
}
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:
pq andreza?
os modelos antigos são melhores pra edição?
desabafe! xD
parabéns pelos 1000 seguidores *-*
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
Nossa ainda beeeem que você postou! hahaha
Tava todo mundo perguntando!
xoxo
theattitudeincluded.blogspot.com
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 '
PARABÉNS cat *-*, adorei tentei,consegui.Obrigada,parabéns pelos seguidoresss :)
jornalfemininonet.blogspot.com
@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.
Eu ja tava procurando como fazia isso hehe
Ajudou mt mt mt
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/
Nhaa Amei! Ótimo post!
Ah e parabéns pelos 1004 seguidores!
3bjs
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
oi ameis seu blog e ja estou seguindo se puder fazer uma visita la no blog sera muito bem vinda...
blogjulianamyworld.blogspot.com
E se eu quiser usar com uma só coluna? Como eu faço? :D
Brigada, linda!
Beijocaa
Adorei o Tutorial amor!
Ficou show de bola.
Beijos,
placefame.tk
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
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
MINHA SALVAÇÃO , quebrava minha cabeça procurando como fazer,estava procurando no google e achei este tuto. SALVAÇÃO
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/
Vc é a melhor pessoa do mundo rsrs, obrigada pelo tutorial estava louca para encontra-lo.
http://girlteen-s2.blogspot.com/
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 :]
Nossa, ajudou muito, passei dias procurando. Parabéns pelos 1000 seguidores (:
http://candylife-cc.blogspot.com
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
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.
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/
Aceita parceria?
Ah, o blog tá lindo ;3
Beijos e amei o post ^^
http://styleteensnews.blogspot.com
aah, que ótimo, tava procurando saber como botava mesmo, adorei *-*
muito legal mesmo, era o que eu estava procurando. *-*
http://cupcakebomb-js.blogspot.com/
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
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
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
Oi! Aqui é Jennifer, do blog Doce Girl e eu adoraria fazer parceria com você!
Aceita?
www.blogdadocegirl.blogspot.com
ahh e tem sorteio em parceria com a tilibra no meu blog também!passa lá:
Lolli-pop-blog.blogspot.com
Salvou minha vida, sério ~ÇWELR~WL~RL~WRLRWE~ aaaaaaaah, que lindo *-*
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 ^^)
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 :/
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
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
Você não usa os modelos novos do blogger?
Adorei as dicas! Estarei acompanhando o blog... ;)
........
http://mulherdejaleco.blogspot.com
Todo mundo querendo esse tutorial *-* E é bem fácil.
Quero saber porque os tutoriais antigos são melhores, hahaha
beijos
blogloucamistura.blogspot.com
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 ♥
Eu não achei os códigos! Por que heim?
http://blogskygalaxy.blogspot.com/
Não consigo encontrar os códigos.
tava procurando a 3 milões de anos!Obrigada.
Eu fiz tudo certinho mas não mudou nada!
Por que será? Help me! DD: rs.
beijos s2
www.clara-rodriguez.blogspot.com
@Clara - Será que vc colocou os códigos tudo certinho? ><
andreza, heeelp! kkk
como faz para deixar uma parte maior que a outra? tipo no seu?
beijos, http://destemidagarota.blogspot.com
@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.
aah. que pena :/ é mt ruim, ele fica pequeno! :P mas mesmo assim eu coloquei :B kkkk obrigada!
beijos, http://destemidagarota.blogspot.com
e se eu uso o minima?? como faz?
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
Aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaah! Ficou ótimo o meu! Estou fazendo reforma... Obrigada, amorzinho <3,
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!
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.
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.
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
Para tudo!!!! conseguir! MAS, tem uma mudanças para os nosvos templates! Vou postar esses tutor diferencial no EP! Valeu miga!
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 ?
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:
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/
não consegui fazer.. poxa..=/ tem como me ajudar?
Hoie, olha, eu fiz tudo mas eu não consegui, por favor me AJUDA!Eu quero muito uma barra de ferramwntas ssim
Meu blog é
http://s2sweetgirlforever.blogspot.com/
u fiz tudo direitinho umas duas ou tres vezes e não deu certo!
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.
O meu eu tava tentando mas nao aparecia o codigo para botar :(
ibloguera.blogspot.com
Oi fofa,
amei o site, parabéns pelos 100o seguidores.
Vc aceita parceria??
Bjs,
http://cutiecatt.blogspot.com
consegui obg me ajudou muito...
Parabéns seu blog é tudo de bom, ja sou fã :)
Haa 'mt legal :D
Veja meu blog
http://karolsgirls.blogspot.com/
vlw
Eu não consegui la no imageshack tá link , link direto e etc e o meu não deu eu fui usa o seu
Andreza eu fiz o tutorial tudo bonitinho,mais quando fui visualizar a barra lateral estava transparente , porque ficou assim ? Me ajude..
amre no meu nao tem esse código o que eu faço?
é verdade no meu naoo tem esse codigooo meu ajuda :/
no meu não tem esse código =( como faço???? bjjjj
no meu não tem esse código²
Como eu faço??
PS:Amei seu blog, parabéns
Oi, meu template é o mínima. Tem problema? Qual é o melhor? Me ajuda?
Beijos e parabeins pelo blog!
doceamor-corderosa.blogspot.com
Bruna
Eu nãao achei o codigo que colocou pra preucurar !
Eu não achei o código :(
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
eih mulher.no meu blog nao aparece uma parte disso ai.ai nao deu.plz ajude.bjoos
tt-itgirl.blogspot.com
eu não to achando o código que é para´procurar depois do ctrlf
me ajudaaaaaaa
bjs,
Ge
www.blogdasbff-geenic.blogspot.com
Affz não ta aparecendo Andreza HELP
Andreza consegui mas ficou pequeno :(
Não consegui no meu aparece a barra transparente
Não deu certo.
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 *.