22 maio 2012

Colocando ''nuvenzinhas'' acima da área da postagem



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:

NL disse...

Òtimo tuto.
ja conhecia o tutorial ja
beijos
http://www.asgarotasdonl.blogspot.com.br/

Gislaine Dias | Blog disse...

Adorei o tutorial e as bases. Essas nuvenzinhas ficam tão bonitas.
http://i-teenbr.net.tc

Priscilalirow disse...

adorei o tuto, ams eu nao gosto pra mim, muito elgal, vc e inteligente em!
beijinhos **

http://priscilalirow.blogspot.com.br/

Juju disse...

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

Ana Carolina Oliveira disse...

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/

Matheus Marlley disse...

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/

Tiemi disse...

Esse tutorial é ótimo, fica muito fofo!

http://tiemitian.blogspot.com

! Lili ! disse...

Adorei o tuto.

Beijos, Lyah ---> Princesa Imperfeita.

Rotina Agridoce disse...

otimo tuto
adorei seu blog, muito lindo!
curti no face
estou te seguindo, segue o meu tambem
http://lostgirlygirl.blogspot.com.br/

bjos

Anny S. disse...

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

Plum disse...

Legal o tutorial e as bases ficaram mor lindas <3

Diario de uma garota disse...

Oi parceria mantenhamos contato por favor!
como está?

Luciana disse...

oi Paty

adorei o tuto, vou tentar fazer depois

bjs

estilorosa.blogspot.com

Anna Victória disse...

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/

Caprichadas Blog disse...

Adorei o tutorial,já tinha visto mais não tão fácil assim,tentarei fazer :D

http://trethy.blogspot.com.br/

Gaby Lima disse...

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

Angel Poubel disse...

Adorei o tutorial..
Bem explicadinho...
Big bj ;*
http://angelpoubel.blogspot.com.br

Amanda Mazzei disse...

nossa que legal esse tuto heim nao conhecia rs

http://garotoonerd.blogspot.com.br

Unknown disse...

Bem legal o tutorial mais para este layout não usarei e amei o 2 cabeçalho beijos flor http://colorindoestemundo.blogspot.com.br/