Personalizar cada gadget da sidebar

|

Hoje mais um tutorial da minha super lista de pedidos - que eu nunca consigo zerar. Vou ensinar para vocês como personalizar cada gadget da sidebar, deixando o fundo e até mesmo os títulos diferentes. Um exemplo disso você pode ver no Candy LLand e no Bad Reputation:


Viram como o fundo está de cor diferente? Então vamos ao tutorial.

Primeiro você deve saber o nome do gadget que deseja mudar. No exemplo eu irei mudar o gadget de nome "Menu".

Abra o modelo HTML do seu blog e marque a caixinha "Expandir modelos de widgets"
Dê um clique dentro da janela com o código HTML, aperte Ctrl+F e procure pelo nome do gadget:

(Clique para ampliar)

Onde está em laranja é o nome do gadget que eu pesquisei. Onde está contornado de rosa é a Id do gadget, é desse nome que iremos precisar. Neste caso a Id do gadget é HTML1, anote ela que iremos usar no próximo passo.

Cole o código abaixo antes de ]]></b:skin>
#ID-DO-GADGET {
background: #fff; /*Cor de fundo do gadget*/
}
#ID-DO-GADGET h2 {
/*Estilos para o título do gadget*/
Font-family: Verdana;
color: #000;
font-size: 14px;
}
Você só tem que substituir a parte em negrito pela Id que pegamos no passo anterior e aplicar os estilos desejados. Eu coloquei apenas o básico do básico neste código, mas você pode adicionar todas as personalizações que quiser. Você fazer isso com vários gadgets do blog, é só pegar a ID e colar o código.

Espero que tenham gostado! Desculpem não estar respondendo muitos comentários. O tempo está curto e também estou tendo uns probleminhas na família... Mas não se preocupem, logo logo tudo vai se acertar

Kissus, Liah

75 comentários

  1. Amei, ótimo tuto Liah, super útil ^^
    s2hay. blogspot.com

    ResponderExcluir
  2. é muito bom esse tutorial e o resultado deixa o blog lindo
    teenagebass.blogspot.com

    ResponderExcluir
  3. Tuto muito bom como sempre! Uso bastante gadgets diferentes, agora não estava usando mas vou usar!

    omeubrilhantemundo.blogspot.com

    ResponderExcluir
  4. Amei o tutorial!
    Eu gosto muito de dar sempre um toque novo no blog. (:

    Beijoos
    Me visita?
    Hayanne Deise Lins
    >> Profissão Adolescente

    ResponderExcluir
  5. ótimo tutorial!!!! vou usar no meu próximo layout!!

    beijos millah ^^

    sweetkprincess.blogspot.com

    ResponderExcluir
  6. Amei o tuto!Beijão!!

    revolutionstartshere-oficial.blogspot.com.br

    ResponderExcluir
  7. Que bom que você postou esse tutorial!

    Beijos,

    waverlyplaceblogger.blogspot.com.br

    ResponderExcluir
  8. Ai que legal Liah eu pensava que seria um bicho de 7 cabeças!
    bangteen.blogspot.com

    ResponderExcluir
  9. ei!essa que está no cabeçalho do blog é a Elizabeth Gillies?

    ResponderExcluir
  10. OMG que perfeito, com certeza vou usar, porque acho mega fofo!
    Nhaac<3 | http://viciadasemcupcake.blogspot.com.br/

    ResponderExcluir
  11. Ótimo tutorial! Achei muito lindo os Gadgets do Candy Lland e do Bad Reputation, tava muito ansiosa pra saber como fazer! Muito útil!!

    ResponderExcluir
  12. Adorei o tutorial! ;)
    Estava a procura dele a algum tempo...!
    Muito obrigado! ;)

    ResponderExcluir
  13. Adorei o tutorial, no próximo layout vou usar!
    Beeijos
    http://unhaseesmaltesdicas.blogspot.com.br/

    ResponderExcluir
  14. Esse tuto já tinha visto no Bad reputation e em vários outros lugares, rs agora estou vendo aqui tbm, é sempre bom ensinar esse tuto né, pois fica muito bonito, só que eu não uso no blog que sou subdona pois acho que não combina, mais agora estou pensando bem e acho que vou tentar fazer sim, talvez fique mais kawaii...aa valeu pelo tuto, se der certo lá como estou pensando, vou avisar *w*

    ~Adolescente Nerd

    ResponderExcluir
  15. Que liindo o resultado *.* Acho que vou usar no meu próximo layout umadoceimperfeicao.blogspot.com.br

    ResponderExcluir
  16. amei
    http://meninascapricho-dada.blogspot.com/

    ResponderExcluir
  17. Amo esse tutorial perfeito,viu sabe aquele circulo que tem no seu cabeçalho com as iniciais CB, eu estava pensando em colocar um quase igual no meu mais é obvio que as cores e a fonte é completamente diferente eu me inspirei vendo no seu blog, mais não se preocupe que é só isso que é meio parecido com o seu ok? Espero que não tenha problema flor, beijos.

    ResponderExcluir
  18. eu ja sabia como fazer mudar o fundo,mais o titulo não! obrigada liaaah!

    ResponderExcluir
  19. Eu já disse que AMO seu blog? Ele me ajuda em TUDO! E é muito bom! Parabéns *-* ainda to rachando a cabeça aqui por causa da personalização, to tentando botar a parte de comentários e tags ali pra cima, ou então deixar a data pra fora do post, tipo o seu mas... não consigo. E, como você fez a parte de "extras" ali no layout do blog que eu passo o mouse sobre a imagem e ela sobe?

    Beijos!
    http://www.likeparadise.com.br

    ResponderExcluir
  20. Nossa, é fácil! :D

    Eu também estava curiosa para saber já há um tempinho, tinha visto lá no Bad Reputation ^-^

    Bjoos <3
    http://sorvete--de--morango.blogspot.com/

    ResponderExcluir
  21. Eu estou fazendo um novo layout e vou usar isso nele! (:
    Sweet Magia,vem?

    ResponderExcluir
  22. Ola !! Adorei o tutorial , queria saber como chama aquelas imagens que ficam no titulo da sidebar

    ResponderExcluir
  23. Nossa, é muito simples mesmo! Adorei o tuto, super vou usar!
    Ótimo post!
    Beijinhos :*

    PiinkCookie.blogspot.com

    ResponderExcluir
  24. Adorei o tutorial, Liah! Eu queria saber como se fazia. Adorei!

    nao-me-acorde-estou-sonhando-isa.blogspot.com.br

    ResponderExcluir
  25. Amei o tutu, está de parabéns.. Novo posts ~~~> http://www.mundodavick2000.tk

    ResponderExcluir
  26. Amei o tutorial, Liah! Realmente, acho uma fofura os widgets serão separados com fundos ou formas diferentes! Acho o máximo. Eu sou uma super fã sua, e queria muito que você escrevesse uma ou duas postagens falando de como construir um blog tipo o seu. Ficaria muito feliz (:
    OCantinho das Fadas, quer receber sua visita e sua seguição! Um beijo, CF - Fernanda

    ResponderExcluir
  27. Muito bom esse tuto. Seu blog me ajuda muiiiiiito!
    Beijos
    I Simply

    ResponderExcluir
  28. Sempre quis saber desse tuto ! Liah, adivinhado pensamentos hein ! Amei, no próximo layout vou usar com certeza, me apaixonei <3

    Beijos, Lary
    the-lovers-official.blogspot.com
    portifolio-lary.blogspot.com

    Fique com Deus amore :3

    ResponderExcluir
  29. Esse tutorial me fez deu vontade de fazer um novo lay, já ta quase pronto. Espero que aprove, rs =)

    Beijos♥

    carismaticaoficial.blogspot.com

    ResponderExcluir
  30. Amei este tutorial! muito útil e dexa o blog bem lindo!! Faz um tutorial de 3D do Bad Reputation ?? Beijos!!!! http://goods-sweets.blogspot.com.br/

    ResponderExcluir
  31. Amei este tutorial! muito útil e dexa o blog bem lindo!! Faz um tutorial de 3D do Bad Reputation ?? Beijos!!!! http://goods-sweets.blogspot.com.br/

    ResponderExcluir
  32. Fica muito bonito mesmo. Adorei

    www.bugigangazdanet.blogspot.com

    ResponderExcluir
  33. \0/ tava querendo fazer isso mas como sou meia iniciante não sabia como rsrs ja salvei na minha pasta de tutorial vou usar no próximo layout que eu estou construindo uhuh! obrigada Liah

    obs: que esses problemas logo se acertem, temos que ter muito discernimento pois família é um bicho complicado!

    boa semana Girl!

    sonhos-perdiidos.blogspot.com.br

    ResponderExcluir
  34. Nossa este post me salvou , vou tentar no meu blog, tomara que fique bom ! Boas dicas!

    www.rockvips.blogspot.com.br

    ResponderExcluir
  35. Acho bonitinho, mas não usaria, não sei por que :S Mas quem sabe, amanhã é outro dia (avá rs.) né?

    http://cupcakeofshine.blogspot.com.br/

    ResponderExcluir
  36. Achei muito bom o Tutorial mais o meu Html não aparece

    " "

    só tem " "

    pode me ajudar ?

    ResponderExcluir
  37. que fácil! pensei que era muito dificil.. brigada por facilitar minha vidaa s2
    Bezoos ---> My Candy Space (entre pelo meu perfil)

    ResponderExcluir
  38. Esse tuto é demais!
    nuvensdeframboesa.blogspot.com

    ResponderExcluir
  39. Esse tutorial é muito bom,acho que vou usar lá no layout novo do blog,que ainda está em planejamento.

    Ah,tá rolando uma promoção lá no blog!Se quiser visite,ou não.Não quero tirar seu tempo tá linda?

    mikiecandye.blogspot.com

    Com amor,Nanda ♥

    ResponderExcluir
  40. Seus tutoriais são incríveis! Eles sempre me ajudam. *-*

    Beijos # Te espero lá - Dreams of love. {perfil}

    ResponderExcluir
  41. adorei isto é muito útil!
    http://desakura.blogspot.com.br/

    ResponderExcluir
  42. Oiêê!Amei esse tutorial!Realmente muito booom!Eu tentei botar em meu blog as não consegui!Como eu coloco??

    ResponderExcluir
  43. Liah,se eu quiser usar em outros que não estejam escritos html1 por ex.
    ele ta assim:Label1' locked='false' title='Tag's' type='Label'/>

    eu posso colocar la no id??
    bjs

    ResponderExcluir
  44. Amei o titorial obrigada!!
    http://minhas-confissoes-2012.blogspot.com.br/

    ResponderExcluir
  45. super facil!!!!só não consegui fazer pois não sei o que é html1....oque é???

    ResponderExcluir
  46. com certeza vou usar esse tuto maravilhoso no meu blog

    ResponderExcluir
  47. esse tutorial nao adiantou de nada no meu blog e eu fiz tudo certinho

    ResponderExcluir
  48. Ótimo tutorial, fiz em outro layout e ficou perfeito! Obrigada!
    blogthistime.blogspot.com

    ResponderExcluir
  49. Infelizmente não funcionou no meu, mas adorei os tutoriais, e o blog inteiro, parabéns!
    http://cantinhodoronni.blogspot.com.br

    ResponderExcluir
  50. Isso tornou meu lay magnífico, amei! Valeu mesmo Liah! Kissus

    blog-theimperfect / blogspot

    ResponderExcluir
  51. Nossa, muito obrigada, vou tentar! Estava a procura desse tuto, mais nos outros blogs era muito complicado. Estou seguindo, dá uma passadinha no meu? Beijocas! mariaeduardaoficial.blogspot.com (Está em construção) <3

    ResponderExcluir
  52. Ola tudo bem?? queria saber como se coloca essa caixinha no meio do blog?? (tipo pra por codigos)?? pode fazer um tuto ??
    Cinderela ao Averso

    ResponderExcluir
  53. Entendi porra nenhuma disso!

    ResponderExcluir
  54. Ótimo tuto, está de parabéns, procurei isso por dias, e você passou isso com uma facilidade imensa, foi muito simples.Obrigado mesmo.

    ResponderExcluir
  55. Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
    Mensagem de erro em XML: The element type "b:widget" must be terminated by the matching end-tag "".
    Error 500

    nAO COSEGUI FAZER ? ):

    ResponderExcluir
  56. Adorei seu Blog já seguindo e adorei mais ainda os tutoriais :)) Vou ver se consigo aplicar algum que você ensina lá no meu Blog ... Beijoooos
    Dá uma passadinha no meu ...
    http://nininhaenininha.blogspot.com.br/

    ResponderExcluir
  57. Olá! Muito obrigada, você me ajudou muito, estava procurando isto!
    Mais uma coisa ^^ como você coloca aquele slide show de news no seu blog? é muito legal! Obrigada.

    http://tur-quesa.blogspot.com

    ResponderExcluir
  58. Gostei muito !! faz um tutorial de como fazer esses news que nem você fez no cabeçario ? obrigada

    ResponderExcluir
  59. Eu adorei, pena que sou uma completa burra , resumindo meu cérebro não conseguiu calcular nada, e tenho medo de mexer no HTML pois um dia fiz isso com um blog antigo meu e...exclui ele sem querer...

    http://candy-designers.blogspot.com.br

    ResponderExcluir
  60. Amei, muito bacana!
    Eu queria mesmo saber como faço pra personalizar o título do Gadget com uma imagem. Alguém pode explicar?
    Obrigada!

    ResponderExcluir
  61. Oi, Liah!
    Bom... Eu tentei personalizar assim como você disse no tuto, mas não funcionou...
    Só eu que achei que ficou uma bosta esse novo "Editar HTML" do Blogger?
    Bem... Se puder me ajudar eu agradeço!!!
    Beijos!

    ResponderExcluir
  62. o meu deu não tem esse negocio de "expandir modelos de widgets" tem alguma resposta ?

    ResponderExcluir
  63. O meu não deu certo :/ na verdade nenhum tuto que fala para colar alguma coisa acima desse código dá errado... O que eu posso fazer?

    ResponderExcluir
  64. Não consegui porém o blog é lindo!



    momentoessencial.blospot.com.br

    ResponderExcluir
  65. Boa dica.
    Gostaria de te convidar para seguir meu bloguinho. Estou começando agora. Bjs
    http://blogdegarotasmimadas.blogspot.com.br/

    ResponderExcluir
  66. No meu não tem essa opção de expandir modelos do windget :(
    Tentei, mas não consegui.

    ResponderExcluir
  67. No meu não tem essa opção de expandir modelos do windget :(
    Tentei, mas não consegui.

    ResponderExcluir
    Respostas
    1. Oi Gleice, é só clicar em "Modelo" depois em "Editar HTML" e em seguida, clicar dentro da caixa e digitar "CTRL" e a letra "F". Ai você procurar os códigos ok?
      Espero ter ajudado.
      Kissus :)

      Excluir

Related Posts Plugin for WordPress, Blogger...