Atualizado! Muita gente disse que não deu certo então mudei umas coisinhas, agora é pra funcionar então quem não conseguiu tente novamente. Caso não funcione me avise! Eu testei e deu certo, espero que funcione com vocês! Beijos.Muita gente pediu e hoje trago pra vocês o tutorial de como por uma imagem no topo e/ou footer da área de postagens. Mas vou dizendo desde já, nada de copiar o Go Imagine hein? Sejam criativos e aproveitem o tutorial! Quero pedir desculpas por só estar postando tutoriais, mas a fada da inspiração não veio me visitar ultimamente. Eu ia postar outra coisa mas como muita gente pediu e eu não quis adiar mais. O resultado será semelhante ao do Go Imagine.
Clique em leia mais para ver o restante do tutorial.
Então, vá em Design > Editar HTML > De ctrl + F (ou F3) e digite na caixinha de busca o seguinte código:
.main-inner .column-center-outer {Se você nunca editou essa parte do modelo, no seu HTML estará mais ou menos assim:
.main-inner .column-center-outer {Apague a linha _background-image: none; e no lugar coloque o seguinte código:
background: $(post.background.color) $(post.background.url) repeat scroll top left;
_background-image: none;
}
background-image: url(url da imagem);Obs: - Se quiser a imagem no footer da área de postagem troque top por bottom.
background-position: center top;
background-repeat:no-repeat;
-Para a imagem se encaixar direitinho você deve saber a largura do seu blog e da sua coluna lateral (sidebar) isso você vê em Designer do modelo > Ajustar larguras. Então você pega a largura total do seu blog e subtrai a largura da sua sidebar. O resultado será a largura de sua área de postagem.
Por exemplo: 1020 (total) - 270 (sidebar) = 750. Esse deve ser a largura da sua imagem. Se por acaso não der você vai testando outros tamanhos até encaixar.
Vou deixar um exemplo de imagem para vocês terem como inspiração na hora de criar as suas. Ela tem 600px de largura, se sua área de postagem ter essa largura e você gostar pode usar a vontade. Ficou meia boca, mas é só pro exemplo.
Obs²: Na parte que estiver transparente (vazia) você deve por o background do seu blog, pois como é transparente vai aparecer o branco da área da postagem. Exemplo:
Por hoje era isso, espero que tenham gostado. Qualquer duvida é só comentar! Se vocês quiserem eu ensino a por imagem no topo e footer da sidebar também! É só comentar pedindo. Beijos, fiquem com Deus.
Nossa, parece que você leu meus pensamentos, eu tava muito precisando desse tuto!
ResponderExcluirFlor, eu quero desse tuto na sidebar. Faz??
ResponderExcluiré só colocar Depois de .sidebar .widget; :)
Excluirmuitoo bom o tuto!! to seguindoo seu blog divoo... retribue?
ResponderExcluirhttp://swett-girls.blogspot.com
Oiie, sou a dona do Um pouco do mundo teen, gostaria saber se você quer fazer uma parceria comigo, qualquer coisa é só entrar em contato bdfil.com@hotmail.com...
ResponderExcluiro tutorial é ótimo. Antes eu tinha o mesmo efeito de nuvens no meu blog, mais eu fiz junto com o próprio cabeçalho.
ResponderExcluirBjuss
www.garotascomplicada.com
Amei, mas eu coloco no cabeçalho, aí não precisa colocar o fundo...
ResponderExcluirAdorei seu blog e o novo lay! Eu acho que ja vim aqui, mas não me liguei muito. E esse design ficou bem mais bonito, sé e que me lembro do outro.
Bjs.
Girls On-Line
Ai meu Deus...
ResponderExcluirajudou super!
Muuuuuito obrigado :D
Blog | Encomendas
aaaain amei *-* tava precisando!
ResponderExcluirtraz ilustrações bem bonitas ou pngs pra gente ? pff *-*
Nossa, como é simples...
ResponderExcluirhttp://blog-sweetpoison.blogspot.com/
Ótimo tutorial! Aqui, desculpa, mas será que você poderia fazer um layout pra mim? :$
ResponderExcluirBeijos
www.descobrindomundos.blogspot.com
amore,o meu não funcionou :( me ajuda ?
ResponderExcluirParabéns pelo blog, adorei o tutorial super explicativo, eu quebrava a cabeça para fazer isso.
ResponderExcluirNovo Post
Afilia comigo?
ResponderExcluirhttp://attitude-feminina.blogspot.com/
eu até tentei mas não consegui :cc. mas valeu pela dica.
ResponderExcluirtô seguindo seu blog, eu amei *-*.. se quiser dar uma passadinha no meu..
www.umameninadevans.blogspot.com
hi girl amei seu blog
ResponderExcluirgostaria muito de ser sua afiliada
http://lovefashionworld.blogspot.com/
kamillados@ig.com.br
kamilla master
*-*
Anni,obrigada pela ajuda nas bordas no blog.Eu conseguir.Na sexta eu vou reabrir o blog,ai vc olha ta?
ResponderExcluiroi,adorei o seu blog super perfeitoo
ResponderExcluirja to seguindoo | SEGUE DE VOLTA POR FAVOR ??
http://garotoonerd.blogspot.com
Oi flore, tô seguindo, segue de volta ?
ResponderExcluir190 bjs *------*
http://mini-fofoquinhas.blogspot.com/
Ótimo post... Aceita afiliação com o TS? :)
ResponderExcluirTrashy Splash
Eu não consegui!! Me ajuda?? Fiz tudinho e eu até iria usar a imagem que você fez e disse que era meia boca mas eu achei tãão bonitinha....
ResponderExcluirPS: Você poderia disponibilizar cabeçalhos editáveis para usar no blog?
Bjos
http://queloucura-blog.blogspot.com
Ah, mais uma coisinha, você aceita parceria/afiliação com meu blog? http://queloucura-blog.blogspot.com
ResponderExcluirMeu email é: bibisandrini@gmail.com
Outra coisa (Hoje eu to pidona, né?)
Como que se faz aquelas imagens em quadradinhos para usar como Afiliados?
Já está linkada no meu blog... Agora é só colocar aki... E obviamente, estou seguindo minha afiliada....
ResponderExcluirOi Flor, aqui é lindo!! Já estou seguindo!
ResponderExcluirAceita Parceria?
Beijos, Giulia.
www.batomdeframboesa.blogspot.com
Adorei o blog, estou seguindo. Visita lá http://myalienromance.blogspot.com/
ResponderExcluirBeijos
Oi flor ? A-M-E-I o blog !!
ResponderExcluirAceita parceria ? Se aceitar comenta no meu blog dizendo ! ;)
Jeito Moleca
Aconteceu o seguinte, eu fiz o tutorial e até coloquei a imagem que você disponibilizou, mas na hora de vizualizar continuou normal, como se eu não tivesse modificado nada. Sobre a parceria, vou colocar seu banner na página de parceiros e vou fazer um gadget com o seu link, pode ser? Eu achei um fundo mais neutro pro blog, mas acho que não fou AQUELE fundo, mas dá pra segurar a barra até achar outro.
ResponderExcluirQue fonte você usa no título das postagens e dos gadgets?
ResponderExcluirAnny,
ResponderExcluirnovo post lá no PP, visita?
http://pinkpimenta.blogspot.com/
Heey, mtt bom aqui *-*. Seguindo flor, retribui ?.
ResponderExcluirBeijos .
http://leticiac04.blogspot.com/
Adorei o tutorial flor , tava atras , participa ?
ResponderExcluirhttp://perfeitinha-blog.blogspot.com/2011/11/miss-blog-2011.html
adoreeeeei! posso usar o que voce criou bjos!
ResponderExcluirwww.happy-charllote.blogspot.com
Não consegui fazer :/
ResponderExcluiralguem me ajuda? faço tudo direitinho mas na hora q eu vou visualizar ñ aparesse nada :/
http://casadophotoscape.blogspot.com/
AAAh, agora sim eu consegui!! Obg pelo tuto, viu?
ResponderExcluirOi,obrigada por aceitar a parceria , já coloquei o button no meu blog :*
ResponderExcluirNossa ameeii esse tutorial!!
ResponderExcluirEu estava procurando ele faz tempo!!
Ajudou muito!!!
Já estou seguindo o seu blog!!
Segue o meu também?
Mil beijos,
Biah
beatriz-pg.blogspot.com
Lindo teu blog anny parabéns
ResponderExcluirbrunamoveon.blogspot.com
beijinhos
perfect
ResponderExcluirAMEEI SEU BLOG! MTO LINDO!
ResponderExcluirwww.blogpinklollipop.blogspot.com
Tem algo de errado cmg? Só acho: .main-inner .column-center-inner
ResponderExcluirE como ponho com Travel?
ResponderExcluirBigada pela resposta :)
Oi ameei o tuto! Mas eu gostaria de saber como que troca a fonte do titulo do post.É algum codigo em Html ? Por favor se puder fazer esse tuto? Grata!
ResponderExcluirrainhafashionista.blogspot.com
Gostei muito do seu blog! Seus posts são muito bem escritos e explicados, sem falar que o desing do seu blog é lindo! Parabéns!
ResponderExcluirBeijos
ourlifesanddreams.blogspot.com
apois o fundo do meu nao fica transparente nem fooden**
ResponderExcluire depois de mudar o html, como poe a imageem? Não entendi ! Grata.
ResponderExcluirOi anny , eu amei seu blog , adoro seus tutoriais !
ResponderExcluirLinda eu tentei fazer uma imagem mas nao conseguir sou uma zero a esquerda pra fazer seu tutorial funciona direitinho mas se voce disponibilizasse uma imagem pra gente usar facilitaria muito a nossa burrice kkk (aminhanocaso)
Beijos
mas a imagem tipo nuvem que nem a do print !
ResponderExcluirbjus
Amy dear, adorei! Fiz uns testes e vou editar/fazer uma nova e trocar depois. Mas a tua imagem tá linda, obrigada por compartilhar. bjs
ResponderExcluirEu não acho o .main-inner .column-center-outer { no meu Editar HTML :/ OQ EU FAÇO?
ResponderExcluirAmei esse tutorial !
ResponderExcluirOi Alana.Bom você sabe fazer tipo um 2° cabeçalho no blog.Por exemplo:
ResponderExcluirhttp://imageshack.com/a/img41/6743/fm4q.png
Deu super certo, obrigada por postar o tutorial, me ajudou muito! Beijos :D
ResponderExcluirhttp://www.leticiakoliveira.com/