Hello babys!! Esse tutorial foi muito pedido -para falar a verdade, só duas pessoas pediram. Então como não poderia deixar de anteder os pedidos, cá estou eu com o tutorial :)! Ele é bem simples, você pode colocar esse efeito mexendo no HTML ou não, ou seja tem 2 formas de colocar as ''nuvenzinhas''. Então bora conferir o tutorial?!
Colocando as nuvenzinhas sem HTML:
É só você fazer um cabeçalho, saber a largura da área de posts e da sidebar do seu blog, depois subtrair os valores de largura total do blog, com o valor total da sidebar. Como por exemplo, se o seu blog for da largura de 1020 e a sidebar 300, a largura da área de posts do seu blog será 720 de largura,então será nesse espaço que você fará as nuvens.
Fiz 2 bases de cabeçalhos editáveis, ambos com as nuvenzinhas. Eu não coloquei os créditos ali porque eu sei que fica atrapalhando e tal, então peço para quem salvar, colocar os créditos do cabeçalho na página de créditos ok!
Para salvar no tamanha original, é só clicar encima na imagem e salve:
(largura total: 1100, altura: 304. largura da área de post 796)
(largura total: 1100- Altura: 300-Largura da área de post: 800)
Vamos conferir como colocar com o HTML! É só clicar em ''leia mais''!
Colocando as nuvenzinhas com o HMTL:Vá em Desing - Editar HTML- De Ctrl + F, aí aparecerá uma caixinha de busca, então digite nela o seguinte código:
.main-inner .column-center-outer {
Se você nunca editou seu essa parte do HMTL, aparecerá mais ou menos assim:
.main-inner .column-center-outer {
background: $(post.background.color) $(post.background.url) repeat scroll top left;
_background-image: none;
}
Então,apegue a linha _background-image: none; , no lugar coloque o seguinte código:
background-image: url(url da imagem);
background-position: center top;
background-repeat:no-repeat;
Obs: Se você quiser que a imagem fique no footer da área da postagem troque top por bottom.
Então, como eu disso no começo do post, a imagem para ser colocada ali deve ser exatamente da largura da área de posts '' se o seu blog for da largura de 1020 e a sidebar 300, a largura da área de posts do seu blog será 720 de largura''.Depois de pronta a imagem, é só por o url dela no local do código onde se pede.
Há, tinha me esquecido de por os créditos da forma em HTML ontem! Então, os créditos vão ao Go Imagine ok!
Então é isso aí amores! Espero que tenham gostado e ajudado vocês!Bjs ♥
19 comentários:
Òtimo tuto.
ja conhecia o tutorial ja
beijos
http://www.asgarotasdonl.blogspot.com.br/
Adorei o tutorial e as bases. Essas nuvenzinhas ficam tão bonitas.
http://i-teenbr.net.tc
adorei o tuto, ams eu nao gosto pra mim, muito elgal, vc e inteligente em!
beijinhos **
http://priscilalirow.blogspot.com.br/
Poxa, eu não consegui pois não tenho o código .main-inner .column-center-outer {
=(. Eu substitui ele outro dia, mas n sabia que pdia fazer diferença
Nossa eu tava louca por esse tutorial, eu já sabia fazer pelo cabeçalho, mas por HTML eu ainda não sabia haha. Vou ver se faço no próximo lay.
Kisses ♥
http://bloggarotainocente.blogspot.com.br/
As coisas se coincidem. Eu sair procurando esse tuto na web e venho vistar seu blog e acho! rsrsrs. Caiu do céu praticamente. Beijão!!
http://mentesvelhas.blogspot.com.br/
Esse tutorial é ótimo, fica muito fofo!
http://tiemitian.blogspot.com
Adorei o tuto.
Beijos, Lyah ---> Princesa Imperfeita.
otimo tuto
adorei seu blog, muito lindo!
curti no face
estou te seguindo, segue o meu tambem
http://lostgirlygirl.blogspot.com.br/
bjos
Adorei a postagem, os dois modos são bons, por cabeçalho é mais fácil, mas prefiro pelo html, acho que fica mais perfeitinho...
Quero meus créditos pelo jeito 2 (do html) hein? hihi :p
Legal o tutorial e as bases ficaram mor lindas <3
Oi parceria mantenhamos contato por favor!
como está?
oi Paty
adorei o tuto, vou tentar fazer depois
bjs
estilorosa.blogspot.com
Paty, amei o tuto! Super interessante e deixa o blog lindo! Flor, você tem interesse em fazer afiliação com meu blog? Pode responder por comentário lá no blog mesmo! Espero sua resposta! Beijo, beijo! ♥
http://space4girl.blogspot.com.br/
Adorei o tutorial,já tinha visto mais não tão fácil assim,tentarei fazer :D
http://trethy.blogspot.com.br/
OMG,OMG, OMG para tudo você fez um novo layout muito lindo que até tá me enjoando de inveja kkk ai flor seu blog tá super lindoooooo e faz um maior tempão que eu não passo aqui né? Essas nuvens ficam lindas eu já usei e pretendo usar mais tarde beijos,
Let's Go
Adorei o tutorial..
Bem explicadinho...
Big bj ;*
http://angelpoubel.blogspot.com.br
nossa que legal esse tuto heim nao conhecia rs
http://garotoonerd.blogspot.com.br
Bem legal o tutorial mais para este layout não usarei e amei o 2 cabeçalho beijos flor http://colorindoestemundo.blogspot.com.br/
Postar um comentário