Visualizar

Fundo em apenas um gadget individualizado pelo HTML


25 abril 2012

Tumblr_m2e0pxkhbs1qfcxpoo1_500_large

Algumas blogueiras vêem me perguntando como eu coloquei esse fundo branco em apenas os gadgets escolhidos. Além de muita gente estar me cobrando tutoriais, já que não posto há tempos! Bom, hoje vamos aprender como fazer esse efeito, e vocês vão ver que é super fácil e não exige nenhum conhecimento em HTML. Achei esse estilo super legal, até porque deixa a barra mais organizada e personalizada, dando um UP no seu layout. Vamos lá?


No seu html, dê um ctrl + f e procure por /* Headings. Quando achar, você provavelmente verá um pequeno trecho com alguns códigos. Cole abaixo da última chavinha { o código abaixo:

#NOME DO GADGET1 {
font-size: 13px;
line-height: 18px;
margin-left: 0px;
background: #ffffff url('url da imagem que quer colocar como um título') no-repeat left top;
}
#NOME DO GAGDET1 .widget-content {
padding: 30px 10px 00px 10px;
margin: 0;
color: #696969;
}

No lugar de "Nome do gadget", você coloca o nome do gadget que quer colocar o fundo branco. A url da imagem é o link da imagem que você quer colocar acima do gadget. Se não quiser uma, basta apagar o seguinte trecho: url('url da imagem que quer colocar como um título') no-repeat left top;

Exemplos dos nomes dos principais gadgets:
Marcadores - label
Texto - text
Seguidores - followers


É isso galerinha, espero que todos tenham conseguido fazer! Qualquer dúvida é só falar (:

35 comentários:

  1. otimas dicas amore!
    como sempre arrasando nos tutoriais ne?
    bjbj

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

    ResponderExcluir
  2. ja conhecia o tutorial é bem util mesmo mais nunca usei (:

    http://garotoonerd.blogspot.com.br

    ResponderExcluir
  3. Ótimo tutorial, o resultado nos gadgets é bem bonito. Já coloquei o link do seu blog na página de links do meu blog,quando me colocar aqui,você pode me avisar?
    http://i-teenbr.net.tc

    ResponderExcluir
  4. Amei o tuto, com as cores certas fica super fofo!!*-*
    http://themudancas.tk/

    ResponderExcluir
  5. Adooooreeeei lindaaa o tutorial, sempre arrasando minha Plum!

    Beeeijos
    #Nhaaac >>>http://the-lovers-world.blogspot.com

    ResponderExcluir
  6. adorei o tuto !! como vc fez para colocar o twitter aqui no seu blog ??

    http://louca-atitude.blogspot.com

    Twitter :@NathaliaGuerra_

    ResponderExcluir
  7. Oii lindinha.
    Adorei o tutorial, é muito lindo isso nos gadgets.
    Bjinho ♥
    www.jeitinhofemininoblog.com

    ResponderExcluir
  8. rs acho bem legal esse estilo mas faço de um jeito diferente, fica bem legal para fazer com fotos de autores.

    http://www.perfeitinhablog.com/

    ResponderExcluir
  9. Gostei do tutorial


    http://abostaquadrada.blogspot.com.br/

    ResponderExcluir
  10. Ótima dica, com certeza será muito útil para muitas blogueiras.
    ------------------------------------
    www.bugigangazdanet.blogspot.com

    ResponderExcluir
  11. Nossa adorei as dicas... Parabens.. Pelo post... Rsst
    Bjs e ja vou usar esse codigo ok??.
    Rsrs
    Tutosforyou.blogspot.com

    ResponderExcluir
  12. Tutorial bem útil, mas tipo, eu uso fundo branco praticamente no blog inteiro -q

    TAMBÉM SOU FÃ DOS BONEQUINHOS PALITO!!!!!!!!111 FADJGJADGJKWFHYKRYKU

    thefashionwonderland.tk

    ResponderExcluir
  13. Iai.. que eu vou usar =) ameei de mais ele >.<'
    beeijos,
    Aguardo vc no meeu bloguito ♥
    candy-lollipop-kayla.blogspot.com

    ResponderExcluir
  14. adorei o tuto, fofa tem post novo no Bikoti.
    Eu adoro fundos personalizados esse tuto e muito útil.
    #Bezos Rawr -----> www.Bikoti.blogspot.com.br

    ResponderExcluir
  15. Eu vooooo usar! já to dizendo ahushuahsua
    beijos
    http://garotamuitotimida.blogspot.com.br/

    ResponderExcluir
  16. Não sei do que se trata =( tipo, "fundo branco" Whaaat? k k, nem tem exemplo =( mas como meu layout tá completo...


    http://estrelassistematicas.blogspot.com.br/

    ResponderExcluir
  17. Arrasando nos tutoriais como sempre né?!
    Estou preparando um novo design pro meu blog, seu tutorial vai ser bem útil :)

    Bjs

    http://magicmih.blogspot.com.br/

    ResponderExcluir
  18. Adorei o tutô.
    http://raymiga.blogspot.com

    ResponderExcluir
  19. Com certeza esse tutorial eu vou usar, esse fundos sempre me chamaram atenção!!! Favoritei a página!!! ^^

    http://acessopermitidoblog.blogspot.com.br/

    ResponderExcluir
  20. [aaaa] que tuto maravilhoso, vou deixar salvado aqui no PC. É muito útil, não agora pois eu ainda não vou mudar o designe do meu blog, mais pra frente.
    http://luanapdomingues.blogspot.com.br/

    ResponderExcluir
  21. Amei o tutu, vou usar no novo lay do meu blog. c:

    Beijos; @Raah_Castroo
    www.vidaadegarotaa-vdg.blogspot.com.br

    ResponderExcluir
  22. Amiga, adorei o tutorial, tava precisando, vc é um amor <3

    Estou seguindo seu blog, me segue tb flor

    hypegirlsbr.blogspot.com.br

    ResponderExcluir
  23. Hey, eu a-d-o-r-e-i seu cantinho! Gostaria que você desse uma clicada lá no meu bloguito, eu vou ficar muito feliz (:
    Beijinhos ♥

    http://patricinhasdorock2.blogspot.com

    ResponderExcluir
  24. Que lindo seu blog!! Amei demais! Estou seguindo, segue lá o meu: www.blogbythegirl.blogspot.com

    ResponderExcluir
  25. Vou tentar fazer no meu! beijos

    placeforgirlsblog.blogspot.com

    ResponderExcluir
  26. Noooooooooossa, virei fã desse cantinho e tudo , adorei
    amo sua postagens e show, adorei mesmo po

    To seguindo aqui ja , concerteza, Bom se quiser passa pelo o meu ,
    e sguir seria otima, uma honra, ter com seguidora :)

    Bom Beijo da juh Boa sorte
    www.commentsgirls.tk

    ResponderExcluir
  27. Eu observei em alguns blogs e amei,o tuto ficou perfeito.TÁ NOS FAVORITOS!

    http://princesadoavesso.blogspot.com.br/

    ResponderExcluir
  28. E mesmo , obrigada por comentar no blogger,
    www.commentsgirls.tk

    ResponderExcluir
  29. Ótimo tutorial, bem válido... fica super mais fofo o layout ^^
    ~
    Beijos ;*
    http://blogthelifeofgirls.blogspot.com.br/

    ResponderExcluir
  30. O blog usando este tuto fica lindo, curti o tutorial.
    http://www.senhoritaliberdade.com

    ResponderExcluir
  31. serio? como amiga? uahauhau preciso da receita kk
    #Bezos Rawr -----> www.Bikoti.blogspot.com.br

    ResponderExcluir
  32. eu fiz, so que quando eu fechei nao salvou transparente.
    #Bezos Rawr -----> www.Bikoti.blogspot.com.br

    ResponderExcluir
  33. Plum, não deu certo no meu bloguito, ficou normal...O que aconteceu? Me ajuda?

    ResponderExcluir

Todos os comentários serão respondidos. Obrigada e volte sempre! ✌ ♥