Oi gente!!! Hoje venho trazer pra vocês um tutorial super fácil.
Como vocês podem ver, a área de postagem aqui do blog tem borda de uma folha de caderno. Para isso eu coloquei uma imagem como plano de fundo das postagens.
Antes do tutorial aqui vai duas imagens que podem ser usadas como plano de fundo. Mas você pode criar a sua própria imagem.
obs: as imagens não estão muito visíveis porque são de fundo branco. Para visualizar melhor clique sobre a imagem.
Vamos os tutorial?
Primeiro vá em Design > Editar HTML.
NÃO marque Expandir modelo do widget.
Tecle CTRL+F e procure por: .main-inner .column-center-outer {
Achado o trecho apague o trecho abaixo:
background: $(post.background.color) $ (post.background.url) repeat scroll top left;
_background-image: none;
}
No lugar cole o seguinte código:
background: url(url da sua imagem) repeat;
}
Coloque no trecho em rosa o url da imagem escolhida.
Não esqueça de ver se as margens estão alinhadas com a imagem, senão o texto fica em cima da borda e fica difícil de ler.
padding: $(content.posts.padding) 0;
por
padding: 10px 10px 10px 20px;
Bom, é isso gente. Super fácil não é.
Aprendi esse tutorial no blog World Girl. Lá tem muitos outros tutoriais.
Espero que tenham gostado. BEIJINHOS!!!
Adorei Nah!
ResponderExcluirSeguidamente o pessoal me pergunta sobre esse tuto e eu esqueço rs
Muito legal, bjaoo
Não achei esse trexo:
ResponderExcluir.main-inner .column-center-outer {
A caixa de expandir modelos ñ está marcada.
mas achei :
.main-inner .column-center-inner {
Mas esse trecho também não tem:
background: $(post.background.color) $ (post.background.url) repeat scroll top left;
_background-image: none;
}
Nanda,tenta no viagem. Eu também não tava achando,mudei pro viagem e deu certo. Beijos!
Excluiradoreei o tuto bem legal ne ? acho que vc retirou o credito né ? kk' coloca ai rs ' amei o tuto bjs
ResponderExcluirAdorei o tutorial,estava procurando a muito tempo,mas eu tenho uma dúvida, quando eu coloco, a imagem fica sob as letras das postagens,o que eu faço?
ResponderExcluirhttp://i-teenbr.net.tc
Poxa, eu estava procurando esse tutorial fazia um bom tempo. Vim aqui por indicação da Gizaa e amei. To seguindo.
ResponderExcluirBeijos
Jessica
Se quiser conhecer o meu blog, pode vir: http://simplesesereno.blogspot.com.br Se gostar, segue =)
Floor, no meu blog eu uso o modelo Janela de Imagem ... mas acho que não adianta né ... beijos e obrigada pela ajuda ...
ResponderExcluirgosto muito do blog e queria se puder me fazer um template ou cabeçalho para os meus blogs
ResponderExcluirhttp://o-meu-ladooculto.blogspot.pt/ e-mail nas encomendas
http://poesia-de-uma-vida.blogspot.pt/
Eu não consegui achar os trechos!! :(
ResponderExcluirThalita, deve ser porque seu modelo não é o viagem. Eu testei no viagem.
ResponderExcluirConsegui fazer no meu blog.
ResponderExcluirFicou lindo.
http://i-teenbr.net.tc
Adorei a segunda imagem! linda linda *-*
ResponderExcluirbeijos
http://s2juuh.blogspot.com.br
oii, vo comenta de novo porque eu tava brizando no meu comentário anterior e eu nem lembro o que eu escrevi, então se eu disso algo tipo "pudim com batata" ignora totalmente ta? hahaha
ResponderExcluiradorei o tutorial e principalmente as imagens das folhinhas *-*
beijos
http://s2juuh.blogspot.com.br
a imagem tá em cima das letras D: como faço pra arrumar?
ResponderExcluirAnônimo, vc precisa ver o alinhamento da área do post.
ResponderExcluirAmei o tutu*-*
ResponderExcluirno meu lay nao aparece ;/
ResponderExcluir@Étila Priscila Só testei no template viagem, pode ser que o seu seja outro.
ResponderExcluirMuito perfeito tuto!! Ajudou muito no lay que estou fazendo. Amo o seu blog e passo aqui sempre mas não dá tempo de comentar!!
ResponderExcluirhistargirl.blogspot.com
Agora funcionou! Em outro blog....
ResponderExcluirTenho que te falar uma coisa !! Não sei se você tem outro blog, mas eu vi um mesmo post igual ao seu tudo !! Acho que estão te plagiando! Aqui está o site: http://mundo-teenss.blogspot.com.br/2012/05/como-colocar-imagem-no-fundo-das.html
ResponderExcluirPS: E eu não estou conseguindo fazer no meu blog por que ??
Eu nao achei os trechos e nao consegui fazer!
ResponderExcluirOie flor! Eu não achei o código no blog, fala que não contém :S
ResponderExcluirComo faço então??
Kisses
Como faz para o fundo do post ficar igual ao seu? sem ter q mudar o tamanho da sidebar?
ResponderExcluirNão consigo encontrar as partes de texto as quais você se refere... e a opção expandir widgets está desmarcada. Por favor reveja o tuturial para o novo blogger.
ResponderExcluirObg fofa me ajudou muito ficou lindo !
ResponderExcluirNão estou conseguindo, não deu certo :c
ResponderExcluirlINDO SEU BLOG AMEI AS CORES
ResponderExcluirBlog legal, segui o meu? http://aninhaluyzacombr.blogspot.com.br/
ResponderExcluirMuito legal! no meu nao deu muito certo, mais acredito que seja algo erro meu, mas é muito interessante!
ResponderExcluirtem como colocar individualmente em uma postagem... em vez de colocar em todas.. eu queria colocar um fundo de imaguem somente em uma postagem.. é possivel?
ResponderExcluirwww.msnbiblicas.com.br
I love you por esse post, ajudou MUITO hehehehehe
ResponderExcluirNão estou conseguindo colocar ;/
ResponderExcluirMagia Teen