Elementos acima do cabeçalho + Gadgets separados

17 de jan. de 2012


Oi pessoas lindas, como vão? Então, estou numa fase "sem criatividade pra postar" e só pra não ficar muito tempo sem post afinal, já faz uma semana que não posto resolvi trazer dois tutoriais bem legais, um de como colocar gadgets acima do cabeçalho, um lugar muito bom pra menus e anúncios e outro de como colocar cada gadget em uma caixa separada, exemplo aqui. Então vamos aos tutoriais?

Elementos acima do cabeçalho

Vá em design > Editar HTML > Aperte F3 ou Ctrl+F e procure por:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
Onde está escrito 1 mude pelo numero de gadgets que você quer ver acima do cabeçalho e onde está escrito 
'no' troque por yes. 

Obs: Mesmo que você queira somente 1 gadget acima do cabeçalho, coloque 2, se quiser 2 coloque 3 e assim por diante, sempre 1 a mais do que o real.

Gadgets separados em caixas

Vá em design > Editar HTML > Aperte F3 ou Ctrl+F e procure por:
/* Widgets
E antes de fechar } cole o seguinte código:
background: #fff; /*---- cor do fundo da caixa ----*/ 
  padding-left: 20px; /*---- espaço à esquerda ----*/ 
  padding-bottom: 20px;  /*--- espaço de baixo ---*/ 
  padding-right: 20px; /*--- espaço à direita ---*/ 
  padding-top: 5px; /*---- espaço de cima ----*/ 
border-radius: 5px; /*---- bordas arredondadas, apague a linha se não quiser ----*/
box-shadow: 1px 3px 15px 2px #ccc; /*---- sombra da caixa ----*/

Se você quiser da pra trocar a cor da caixa (trocando #fff pela cor que desejar), mudar os valores de padding, remover a sombra da caixa e as bordas arredondadas apagando a linha das mesmas como também da pra personalizar a borda e a sombra (veja como neste documento aqui).

Certamente quando você visualizar vai ficar com o fundo original da sua coluna por trás da caixinha, assim:



Para resolver isso é bem simples, vá em Design > Designer do modelo > Avançado > Plano de fundo da barra lateral e deixe transparente como mostra a imagem abaixo:


Feito isso você vai ver que o fundo de trás saiu, assim:


tharãn, ta pronto! 

Espero que tenham gostado, e não deixem de me dar ideias de posts o/ rsrs
Beijos, fiquem com Deus.

83 comentários:

  1. Hey flor, que tutoriais legais eu amei.
    Vim te perguntar duas coisinhas, a primeira é se vc ainda aceita afiliações e a segunda éq vim te convidar para participar do concurso de mil seguidores do blog, já que o seu me ajudou pra caramba com tutoriais e goodies.
    Bom é isso (:
    Bjocas
    TDiaryofteens.blogspot.com

    ResponderExcluir
  2. Ótimos tutoriais, são mesmo úteis!

    ResponderExcluir
  3. O primeiro tutorial que você ensinou foi tipo que aquele tutorial... serio! Eu estava procurando ele igual doida e não achava!
    O segundo eu aprendi fuçando no HTML outro dia... nunca usei ele mas é bem legal!
    Beijinhos flor!

    ResponderExcluir
  4. Vc explica e fica tão fácil :)
    Quando eu faço tutoriais acabo que desaprendo tudo de tão complicado que fica kkk

    (também queria perguntar sobre afiliação...hehehe)

    bjuu

    ResponderExcluir
  5. Ótimo tutorial,tava procurando esse do gadget faz tempo,muito bom! Não deixe de passar no Garota Differente,tá rolado um concurso lá. *-*

    http://garotadifferente.blogspot.com/

    ResponderExcluir
  6. Amei! Pena que no meu blog eu coloquei imagens senão eu faria.

    http://puro-gliter.blogspot.com/

    ResponderExcluir
  7. Adorei o tutorial, ótimas dica <3 provavelmente usarei no próximo lay do blog '0'
    http://senhoritaliberdade.blogspot.com/

    ResponderExcluir
  8. os dois tutoriais são ótimos, super úteis

    www.garotascomplicada.com

    ResponderExcluir
  9. No meu blog não funcionou!Eu tentei colocar mas só ficou em alguns gadgets

    ResponderExcluir
  10. Adorei o tutorial =)
    december97.blogspot.com

    ResponderExcluir
  11. Yeah, consegui! Estava procurando esse tutorial, mas não achava x.x Muuito obrigada! \õ

    Bjs,
    http://sapatosdeveludo.blogspot.com

    ResponderExcluir
  12. Ah, a proposito, o tutorial que eu falei é o 2º, rs.

    ResponderExcluir
  13. Heey Anny , joinháá ?

    Estava visitando um post no blog Débora morais que falava sonbre sonhos. Eu me interessei ao post e resolvi fazer um com o mesmo assunto. Mas nele pegarei sonhos de blogueiras e colocarei lá, pensei daí: “Será que ela não conta um sonho bisarro para meu post?”, então se quiser e puder me manda pelo e-mail (chicretiililas@yahoo.com.br) , mesmo se não puder pesso que me comunique pelo Blog.

    http://atitude-zeroo.blogspot.com/

    ResponderExcluir
  14. Ameii esse tutorial *-*

    http://dreamsofagirl-blog.blogspot.com

    ResponderExcluir
  15. nossa, muito bom , me ajudou muito com o tumblr
    estou lhe seguindo, se puder fazer uma força segue meu blog? faz pouco tempo que criei e to divulgando agora -> http://girlsin-fashion.blogspot.com/

    Obrigada desde já *--*

    ResponderExcluir
  16. Muito boa as dicas *-*

    blog-sundaedecereja.blogspot.com

    ResponderExcluir
  17. Oi,amei o post, bom você fez meu design a algum tempo atraz e disse que quando eu quisesse trocar era só pedir, será que você pode fazer ele pra mim? Mas olha eu não tenho presa ok http://1mundoteen.blogspot.com

    ResponderExcluir
  18. (Em resposta ao seu comentário no meu blog)
    Não, o meu é o modelo Picture Window, e não deu certo de novo, eu tentei e não deu :(

    ResponderExcluir
  19. ta bom pra mim ta ótimo linda, quando puder fazer, não tenho preça então é só avisar lá no blog quando ir fazer pra mim dizer direitinho o modelo e tal (:
    http://1mundoteen.blogspot.com/

    ResponderExcluir
  20. Adorei as dicas, são ótimas :)
    Já estou seguindo aqui, amei seu cantinho!
    Bjs
    Dezessete em Diante / Facebook

    ResponderExcluir
  21. oi adorei esse blog é o segundo blog que eu entro e me enquanto é lindo rsrs da uma passadinha no meu blog se gostar segue ta bom bjs

    papodeamigas-bff.blogspot.com

    ResponderExcluir
  22. Oi Go Imagine!
    Eu adorei a postagem, ficou muito legal!!
    Eu tenho um blog e gostaria de saber se você sabe mudar a barra de rolagem porque já faz tempo que estou tentando mudar e não consigo!
    Você poderia fazer um tutorial(se souber fazer a barra)?
    Beijos
    Obs.: Da uma passadinha no meu blog e se gosta segue???
    http://chatgirlsstar.blogspot.com/

    ResponderExcluir
  23. Aqui é lindo demais parabéns,você é muito criativa com o blog Beijos Gaby e Bia (se puder segue agente,que seguimos de volta?)

    Quando puder:blog--esmaltevermelho.blogspot.com

    ResponderExcluir
  24. Oiiie amoree, amei o tuto e já fiz, rs. Mas eu queria saber se tem como arrumar o espaço que fica entre os gadjets e a barra das posts, me ajuda? Beijos.

    Estou montando meu blog novamente (:

    ResponderExcluir
  25. Ajudou muito esse tutorial. Parabéns pelo blog!!
    Bjooo

    clove-cinnamon.blogspot.com

    ResponderExcluir
  26. ameei o tutorial, deixar os gadgets separados fica super lindo. Seu blog esta cada dia melhor .
    adoro muito aqui *-*

    http://www.garotas-complicadas.blogspot.com/


    Floor, tive problema com o domínio do meu blog e sou afiliada do seu blog, seu puder arrumar o link agradeço

    Bjus e tudo de bom ;*

    ResponderExcluir
  27. Me ajudou muito Anny, obrigada mesmo! *-*

    ResponderExcluir
  28. Me ajudou muito também,eu estava procurando isso pra coloca no meu próximo lay *-*

    Go Belezando

    ResponderExcluir
  29. oi, eu coloco fundo transparente, mas aí fica um preto meio transparente.. me ajuda pfv

    cherry-miint.blogspot.com

    ResponderExcluir
  30. Tutorial mais do que perfeitooooooooo! Adorei e fiz, as caixas separadas de gadgets são ótimas, porém não ficaram centralizadas no meu background =(
    existe uma maneira de centralizá-las dentro do fundo da barra lateral? Obrigada!

    http://lemonnice.blogspot.com

    ResponderExcluir
  31. Poxa, vou usar esse tutorial no meu novo layout, e até salvei o site no meus favoritos para não esquecer de creditar! Fofa, você sabe como colocar a área de postagens para cima? Eu vi aqui o tutorial de como por a barra lateral, mas estou procurando o da área de postagens e não acho :(
    beijos
    blogloucamistura.blogspot.com

    ResponderExcluir
  32. Oi amrr, queria muito saber se você pode me ajudar. Gostaria de saber se tem como ajustar a largura dos boxes dos gadjets. Para deixá-los maiores, espero que possa me ajudar (: Beijos e obrigada.

    http://junsuinakanjo.blogspot.com.br/

    ResponderExcluir
  33. Anny por favor me ajude!!!!!!!!!!
    Eu não consigo deixar a sidebar do meu blog transparente como está falando no tuto!!!!!!
    Por favor me ajude!
    Mimada-menina.blogspot.com

    ResponderExcluir
  34. oiee, amei o segundo tuto, já fiz até no meu blog (: Mas queria saber se você pode fazer outro, ensinando a separar a área das posts em caixas, também. Espero que possa me ajudar! Obrigada, bjuu

    ResponderExcluir
  35. Adorei, tudinho Pos tudo No meU BLOG

    ResponderExcluir
  36. ficou super legal,e esse tipo de gadgets separados estão sendo utilizados agora recentemente!

    ResponderExcluir
  37. Gata eu queria saber uma coisa.Tem como adicionar imagens nos topos e nos footers dos gadgets quando estão nesse formato?

    ResponderExcluir
  38. amei suas postagens. Estao bem explicada.
    Estou tentando aplicar no meu,não estou conseguido,vc acha que estou errando aonde?
    ia adorar uma visitinha sua no meu blog.

    http://saraydantas.blgspot.com

    ResponderExcluir
  39. Ajudou e muito! Estava a procura desse tutu!
    Eu conseguia separar os gadgets mais não conseguia arrendondar as bordas!

    Beijos

    www.anabacanaacarolina.blogspot.com

    ResponderExcluir
  40. yoo
    eu tentei colocar o cabeçalho acima do cabeçalho mas não estou conseguindo!
    Você poderia me ajudar??
    http://mandcupcakes.blogspot.com.br/

    ResponderExcluir
  41. OMG
    fico lindo d+ tchê :)
    brigado :)
    http://bagulhosdocoracao.blogspot.com.br/

    ResponderExcluir
  42. Não consegui... Uso o modelo Simple. É o seguinte: no meu, não tem a opção "Plano de Fundo da Barra Lateral''. Só tem como modificar os títulos, mais nada... Alguém pode me ajudar? Beijinhos, amei o blog.

    ResponderExcluir
    Respostas
    1. Manda o link do blog pra eu dar uma olhada, se for possível...

      Excluir
    2. Eu sobro desse mesmo problema, sem barra lateral :( esse tutorial nunca funciona modelo Marca d'água

      Excluir
  43. eii ! Anny, o meu não deu :( ' o plano de fundo da barra lateral, coloquei transparente ficou meio 'preto' , porque ? meu modelo é Travel 'Viagem' , Heelp-me!

    ResponderExcluir
    Respostas
    1. No seu html procure por:
      background: transparent url(//www.blogblog.com/1kt/travel/bg_black_50.png) repeat scroll top left;
      você vai encontrar dois, apague ambos e visualize pra ver se o fundo sumiu!

      Excluir
  44. o meu não deu certo!! :( :(
    ficou transparente!!!
    bjs

    csn-carolina.blogspot.com.br

    ResponderExcluir
  45. Anny, adorei os tutoriais, você explica muito bem *-* Mas não consigo copiar os códigos, por causa do widget contra plágio... será que vc poderia tirar? Obrigada :)

    ResponderExcluir
  46. Anny, tenho o mesmo problema que uma menina ali em cima: não consigo deixar a navbar totalmente transparente! Ela fica mais ou menos, mas o fundo fica meio cinza, é um horrooooor, pode me explicar como que tira isso? =( uso o modelo Viagem.

    ResponderExcluir
  47. Eu já tentei essa de apagar o: background: transparent url(//www.blogblog.com/1kt/travel/bg_black_50.png) repeat scroll top left;

    apaguei os dois e ainda sim continuou preto !

    ResponderExcluir
  48. Boa Tarde quero dar aqui meus parabéns pelo seu blog, será que vc poderia me ajudar...não estou conseguindo mais mudar nenhum código no meu blog pq aparece esta mensagem...Mais de um item encontrado com o id: HTML7. Os IDs de itens devem ser únicos e exclusivos.

    Error 500

    O QUE EU FAÇO AGORA UM GRANDE ABRAÇO.

    ResponderExcluir
  49. Olá Anny achei o seu blog muito legal com bastante idéias legais, só que eu não estou conseguindo mudar mais nada no meu blog pq ele está dando está mensagem... Mais de um item encontrado com o id: HTML7. Os IDs de itens devem ser únicos e exclusivos.

    Error 500

    Será que vc poderia me ajudar ficaria muito feliz, desde já agradeço, um grande abraço.

    ResponderExcluir
  50. Oi o modelo do meu blog é viagem, fiz ate em um blog de teste mas naum ficou transparente ficou meio cinza!! me ajuda!!

    ResponderExcluir
    Respostas
    1. É só você apertar Ctrl + F e procurar por
      .main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
      se for a coluna direita, se for a esquerda procura por
      .main-inner .fauxcolumn-left-outer .fauxcolumn-inner {
      daí vc vai ver embaixo disso

      margin-right: $(content.padding);
      background: $(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;
      }

      daí você tira toda a parte da frente do background trocando por 'transparent', ficando assim:

      margin-left: $(content.padding);
      background: transparent;
      }


      Prontinho, espero que tenha dado certo, e isso só serve pro modelo viagem.

      Burnny

      Excluir
    2. Você pode procura também por "Sidebar Background", ir em "value" e colocar transparent

      Excluir
  51. Amor meu blog ficou bem legal com esse tutorial. aqui visita ele por favor vai ser uma honra se nao quiser meu comentario pode apagar mais leia primeiro por favor.

    BLOG:http://backgroundmundinho.blogspot.com.br/

    ResponderExcluir
  52. Eu fiz o tuto direitinho e até funcionou, só que não fica separado tipo, fica um pedacinho em cima do outro, pode me ajudar a separar, não estou conseguindo...
    O layout ta aqui >> dazere.blogspot.com.br << Meu primeiro layout.

    ResponderExcluir
  53. oiie amoree,no meu blog naun deu certo ele é do modelo marca d'água me ajuda por favor.

    ResponderExcluir
  54. não entendo o por que o meu não entra !!!! já fiz mil vezes e fica como se eu não tivesse feito nada .... :(

    ResponderExcluir
  55. No modelo Marca d'água não da pra colocar?Por que não aparece a opção plano de fundo da barra lateral :(

    ResponderExcluir
  56. eu queria saber como tirar este plano de fundo aí de trás dos gadjets ...

    ResponderExcluir
  57. Obrigada flor por compartilhar.
    Deus abençoe.
    Tenha dias felizes...
    Bjokas...da Bia!!!

    ResponderExcluir
  58. Obrigada! eu tava procurando em vários lugares como fazer isso, já tava até sem esperança porque não conseguia, mas graças a você consegui! *-*

    ResponderExcluir
  59. Muito obrigada, salvou meu cabeçalho!! Beijos e ótimo trabalho.

    ResponderExcluir
  60. No meu não deu certo. :/
    É o simples.
    Alguém pode me ajudar?

    http://vivianpitanca.blogspot.com.br/

    ResponderExcluir
  61. Ficou muito... Hum... Irado <3

    ResponderExcluir
  62. Floor eu não acho /* Widgets e nem me ajuda!!!

    ResponderExcluir
  63. Estava procurando esse tutorial faz tempo... Muito obrigada por disponibilizar! *-*

    http://patricinhadechuteira.blogspot.com.br/

    ResponderExcluir
  64. oie eu não estou conseguindo colocar o codigo html eu procuro e em vez de procurar aparece 0 de0 o que eu estou fazendo errado ...
    pode me ajudar?
    obg

    ResponderExcluir
  65. Lucieny Luh, o meu também não está dando :/

    ResponderExcluir
  66. Você pode editar o meu? não dei conta,pois o meu é o novo modelo e é muito confuso ,não consegui mudar nada

    ResponderExcluir
  67. Muito legal Adorei
    http://gaiolasdeinverno.blogspot.com.br/

    ResponderExcluir
  68. Olá gente. Esse negócio transparente que ficava depois de aplicar o html não estava desaparecendo no meu, e o que eu fiz foi somente zerar todos os valores, tirando a linha da sombra. Deu super certo =)

    ResponderExcluir
  69. usando no Filha do Rei . esse blog como sempre me ajudando

    ResponderExcluir
  70. Como faz para deixar os comentários assim?

    ResponderExcluir

- Comentários do tipo "seguindo, segue de volta" "lindo o blog, seguindo, retribui?" Serão ignorados se não tiverem uma opinião sobre o post em si.
- Não aceitamos mais selinhos e tags, sorry!
- Leia a página "FAQ" e outras páginas internas antes de perguntar qualquer coisa.
- Sua opinião é sempre bem vinda. Mas seja educado!

© Go Imagine - 2014. Todos os direitos reservados.