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 {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.
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;
}
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
Amei, ótimo tuto Liah, super útil ^^
ResponderExcluirs2hay. blogspot.com
é muito bom esse tutorial e o resultado deixa o blog lindo
ResponderExcluirteenagebass.blogspot.com
Tuto muito bom como sempre! Uso bastante gadgets diferentes, agora não estava usando mas vou usar!
ResponderExcluiromeubrilhantemundo.blogspot.com
Amei o tutorial!
ResponderExcluirEu gosto muito de dar sempre um toque novo no blog. (:
Beijoos
Me visita?
Hayanne Deise Lins
>> Profissão Adolescente
ótimo tutorial!!!! vou usar no meu próximo layout!!
ResponderExcluirbeijos millah ^^
sweetkprincess.blogspot.com
Amei o tuto!Beijão!!
ResponderExcluirrevolutionstartshere-oficial.blogspot.com.br
Que bom que você postou esse tutorial!
ResponderExcluirBeijos,
waverlyplaceblogger.blogspot.com.br
Ai que legal Liah eu pensava que seria um bicho de 7 cabeças!
ResponderExcluirbangteen.blogspot.com
ei!essa que está no cabeçalho do blog é a Elizabeth Gillies?
ResponderExcluirera sim :)
ExcluirOMG que perfeito, com certeza vou usar, porque acho mega fofo!
ResponderExcluirNhaac<3 | http://viciadasemcupcake.blogspot.com.br/
Ótimo tutorial! Achei muito lindo os Gadgets do Candy Lland e do Bad Reputation, tava muito ansiosa pra saber como fazer! Muito útil!!
ResponderExcluirAdorei o tutorial! ;)
ResponderExcluirEstava a procura dele a algum tempo...!
Muito obrigado! ;)
Adorei o tutorial, no próximo layout vou usar!
ResponderExcluirBeeijos
http://unhaseesmaltesdicas.blogspot.com.br/
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*
ResponderExcluir~Adolescente Nerd
Que liindo o resultado *.* Acho que vou usar no meu próximo layout umadoceimperfeicao.blogspot.com.br
ResponderExcluiramei
ResponderExcluirhttp://meninascapricho-dada.blogspot.com/
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.
ResponderExcluireu ja sabia como fazer mudar o fundo,mais o titulo não! obrigada liaaah!
ResponderExcluirEu 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?
ResponderExcluirBeijos!
http://www.likeparadise.com.br
Nossa, é fácil! :D
ResponderExcluirEu também estava curiosa para saber já há um tempinho, tinha visto lá no Bad Reputation ^-^
Bjoos <3
http://sorvete--de--morango.blogspot.com/
Eu estou fazendo um novo layout e vou usar isso nele! (:
ResponderExcluirSweet Magia,vem?
Ola !! Adorei o tutorial , queria saber como chama aquelas imagens que ficam no titulo da sidebar
ResponderExcluirNossa, é muito simples mesmo! Adorei o tuto, super vou usar!
ResponderExcluirÓtimo post!
Beijinhos :*
PiinkCookie.blogspot.com
Adorei o tutorial, Liah! Eu queria saber como se fazia. Adorei!
ResponderExcluirnao-me-acorde-estou-sonhando-isa.blogspot.com.br
Amei o tutu, está de parabéns.. Novo posts ~~~> http://www.mundodavick2000.tk
ResponderExcluirAmei 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 (:
ResponderExcluirOCantinho das Fadas, quer receber sua visita e sua seguição! Um beijo, CF - Fernanda
Muito bom esse tuto. Seu blog me ajuda muiiiiiito!
ResponderExcluirBeijos
I Simply
Sempre quis saber desse tuto ! Liah, adivinhado pensamentos hein ! Amei, no próximo layout vou usar com certeza, me apaixonei <3
ResponderExcluirBeijos, Lary
the-lovers-official.blogspot.com
portifolio-lary.blogspot.com
Fique com Deus amore :3
Esse tutorial me fez deu vontade de fazer um novo lay, já ta quase pronto. Espero que aprove, rs =)
ResponderExcluirBeijos♥
carismaticaoficial.blogspot.com
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/
ResponderExcluirAmei 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/
ResponderExcluirFica muito bonito mesmo. Adorei
ResponderExcluirwww.bugigangazdanet.blogspot.com
\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
ResponderExcluirobs: 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
Nossa este post me salvou , vou tentar no meu blog, tomara que fique bom ! Boas dicas!
ResponderExcluirwww.rockvips.blogspot.com.br
Acho bonitinho, mas não usaria, não sei por que :S Mas quem sabe, amanhã é outro dia (avá rs.) né?
ResponderExcluirhttp://cupcakeofshine.blogspot.com.br/
Achei muito bom o Tutorial mais o meu Html não aparece
ResponderExcluir" "
só tem " "
pode me ajudar ?
que fácil! pensei que era muito dificil.. brigada por facilitar minha vidaa s2
ResponderExcluirBezoos ---> My Candy Space (entre pelo meu perfil)
nao consegui fazer sou mt leza
ResponderExcluirEsse tuto é demais!
ResponderExcluirnuvensdeframboesa.blogspot.com
Esse tutorial é muito bom,acho que vou usar lá no layout novo do blog,que ainda está em planejamento.
ResponderExcluirAh,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 ♥
Seus tutoriais são incríveis! Eles sempre me ajudam. *-*
ResponderExcluirBeijos # Te espero lá - Dreams of love. {perfil}
adorei isto é muito útil!
ResponderExcluirhttp://desakura.blogspot.com.br/
Oiêê!Amei esse tutorial!Realmente muito booom!Eu tentei botar em meu blog as não consegui!Como eu coloco??
ResponderExcluirLiah,se eu quiser usar em outros que não estejam escritos html1 por ex.
ResponderExcluirele ta assim:Label1' locked='false' title='Tag's' type='Label'/>
eu posso colocar la no id??
bjs
Sim...
ExcluirAmei o titorial obrigada!!
ResponderExcluirhttp://minhas-confissoes-2012.blogspot.com.br/
super facil!!!!só não consegui fazer pois não sei o que é html1....oque é???
ResponderExcluircom certeza vou usar esse tuto maravilhoso no meu blog
ResponderExcluiresse tutorial nao adiantou de nada no meu blog e eu fiz tudo certinho
ResponderExcluirÓtimo tutorial, fiz em outro layout e ficou perfeito! Obrigada!
ResponderExcluirblogthistime.blogspot.com
Infelizmente não funcionou no meu, mas adorei os tutoriais, e o blog inteiro, parabéns!
ResponderExcluirhttp://cantinhodoronni.blogspot.com.br
Isso tornou meu lay magnífico, amei! Valeu mesmo Liah! Kissus
ResponderExcluirblog-theimperfect / blogspot
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
ResponderExcluirNão funcionou no meu blog !!!
ResponderExcluirOla tudo bem?? queria saber como se coloca essa caixinha no meio do blog?? (tipo pra por codigos)?? pode fazer um tuto ??
ResponderExcluirCinderela ao Averso
Entendi porra nenhuma disso!
ResponderExcluirÓtimo tuto, está de parabéns, procurei isso por dias, e você passou isso com uma facilidade imensa, foi muito simples.Obrigado mesmo.
ResponderExcluirNã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.
ResponderExcluirMensagem de erro em XML: The element type "b:widget" must be terminated by the matching end-tag "".
Error 500
nAO COSEGUI FAZER ? ):
eu procurei mas não achei =((
ResponderExcluirObrigado Liah
ResponderExcluirAdorei seu Blog já seguindo e adorei mais ainda os tutoriais :)) Vou ver se consigo aplicar algum que você ensina lá no meu Blog ... Beijoooos
ResponderExcluirDá uma passadinha no meu ...
http://nininhaenininha.blogspot.com.br/
Olá! Muito obrigada, você me ajudou muito, estava procurando isto!
ResponderExcluirMais uma coisa ^^ como você coloca aquele slide show de news no seu blog? é muito legal! Obrigada.
http://tur-quesa.blogspot.com
Gostei muito !! faz um tutorial de como fazer esses news que nem você fez no cabeçario ? obrigada
ResponderExcluirEu 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...
ResponderExcluirhttp://candy-designers.blogspot.com.br
Amei, muito bacana!
ResponderExcluirEu queria mesmo saber como faço pra personalizar o título do Gadget com uma imagem. Alguém pode explicar?
Obrigada!
Oi, Liah!
ResponderExcluirBom... 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!
legal, adorei *-*
ResponderExcluiro meu deu não tem esse negocio de "expandir modelos de widgets" tem alguma resposta ?
ResponderExcluirO 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?
ResponderExcluirNão consegui porém o blog é lindo!
ResponderExcluirmomentoessencial.blospot.com.br
Boa dica.
ResponderExcluirGostaria de te convidar para seguir meu bloguinho. Estou começando agora. Bjs
http://blogdegarotasmimadas.blogspot.com.br/
No meu não tem essa opção de expandir modelos do windget :(
ResponderExcluirTentei, mas não consegui.
No meu não tem essa opção de expandir modelos do windget :(
ResponderExcluirTentei, mas não consegui.
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?
ExcluirEspero ter ajudado.
Kissus :)