Assim, como eu uso atualmente (09/2013):
Para começar acesse a aba Modelo de seu blog, e a seguir clique em Editar html.
Dentro da caixa de código tecle Ctrl+F e na barra de busca que abrir procure por isso:
h2 {
Essa é a tag que define a aparência dos títulos dos gadgets.
Caso você nunca tenha personalizado essa parte estará assim:
h2 { font: $(widget.title.font); color: $(widget.title.text.color); }
Agora vou ensinar o básico para personalizar.
Veja os códigos:
Centralizando o título:
h2 { font: $(widget.title.font); color: $(widget.title.text.color); text-align: center; }
Colocar uma cor de fundo:
h2 { font: $(widget.title.font); /*fonte do título do gadget*/ color: $(widget.title.text.color); /*cor da fonte*/ background: #000; /*color de fundo*/ }
Arredondando as bordas do fundo:
h2 { font: $(widget.title.font); color: $(widget.title.text.color); background: #000; -moz-border-radius: 3px; -webkit-border-radius:3px; -goog-ms-border-radius: 3px; border-radius:3px; }
Sendo que 3px é o ângulo de arredondamento. Quanto maior o número mais arredondado fica. Mantenha o mesmo número nas 4 ocorrências pois cada uma delas é um filtro para os diferentes navegadores.
Colocando imagem ao invés de cor:
h2 { font: $(widget.title.font); color: $(widget.title.text.color); background: transparent url(ENDEREÇO DE SUA IMAGEM) center no-repeat height: 50px; /*altura da imagem*/ width: 200px; /*largura da imagem*/ }
Você pode colocar faixinhas, por exemplo. Basta saber o tamanho dela e hospedar para obter a url da imagem.
Sugestões de imagens:
Caso queira colocar uma imagem tipo papel amassadinho, por exemplo, troque no-repeat por repeat no código e mantenha os valores em height e width.
Colocando sombra no texto do título:
h2 {font: $(widget.title.font); /*fonte do título do gadget*/
color: $(widget.title.text.color); /*cor da fonte*/
background: #000; /*color de fundo*/
text-shadow:0px 1px 1px #fff; /*cor e inclinação da sombra*/
}
Veja como ficaria o código completo, com fundo vermelho:
h2 {
font: $(widget.title.font); /*fonte do título do gadget*/
color: $(widget.title.text.color); /*cor da fonte*/
background: #ff000b; /*color de fundo*/
text-shadow:0px 1px 1px #fff; /*cor e inclinação da sombra*/
-moz-border-radius: 3px;
-webkit-border-radius:3px;
-goog-ms-border-radius: 3px;
border-radius:3px;
}
E aqui o código completo, com a faixinha verde:
h2 {
font: $(widget.title.font); /*fonte do título do gadget*/
color: $(widget.title.text.color); /*cor da fonte*/
background: transparent url(http://3.bp.blogspot.com/-9qSzwQLCQME/UhfxRyrdrRI/AAAAAAAAuXQ/XUmtp_3gk7s/s1600/popular-smaller-2.png) center no-repeat;
height: 49px;
width: 262px;
text-shadow:0px 1px 1px #fff; /*cor e inclinação da sombra*/
-moz-border-radius: 3px;
-webkit-border-radius:3px;
-goog-ms-border-radius: 3px;
border-radius:3px;
}
Agora é com você!
À partir desses códigos básicos você pode mudar, colocar outros tipos de imagens, colocar bordas, etc.
Não há limite!
Gostou?
Clica em curtir!
Eu agradeço!
Noooossa que legal! Adorei! Assim que der vou, COM CALMA tentar!!1 beijos, obrigadão,chica
ResponderExcluirNossa, Elaine, que complicado, falta-me paciência pra ler com bastante atenção, e tentar e tentar....
ResponderExcluirPor isto que eu queria uma personal blogueira.
Valeu pelas informações preciosas.
Beijo
Muito legal mesmo!
ResponderExcluirBeijinhos...
Muito boas as dicas ! Vou tentar , mas tenho medo de errar .Obrigada por compartilhar.Bjs
ResponderExcluirOi Elaine!
ResponderExcluirSe gostei? Amei!!!
Ótima dica! E a explicação, perfeita, como sempre!
Obrigada por dividir e ensinar!
Beijos,
Cris
Menina que dica legal. Estou terminando umas encomendas,Quando eu terminar vou dar umas mexidas, no meu blog. Admiro sua dedicação em compartilhar conosco suas dicas.
ResponderExcluirBeijos e até mais!
bom dia Eliane
ResponderExcluirentusiasmada pelo resultado de um seu seu post, que tinha dado certo, tentei fazer esse,o resultado um desastre, tentei desfazer, mas não consegui, o blog perdeu o espaço entre a data e o titulo do post,não sei o que fazer porque jà tentei desfazer tudo, mas parece que não funciona, se você puder,dar uma olhada, e me dizer o que tenho que fazer,
também queria peguntar quanto custa dar uma arrumada no meu blog.
o meu email è fabioedna@alice.it
aguardo uma resposta
Edna
Elaine, como há um certo tempo devido a resultados de S.E.O tinha deixado o cabeçalho dos meus gadgets em h3, modifiquei o código trocando o h2 abaixo de heading por h3, não esperava, mas aí todos os trechos em h3 nos posts também ficaram do mesmo jeito. Achei que fosse só na página inicial.
ResponderExcluirAlguma dica? Socorro!
Edson, isso acontece porque h2 também se refere aos subtítulos das postagens.
ExcluirAcho que se colocar .sidebar antes de h2 deve resolver.
Ficaria assim: .sidebar h2
Não testei, mas pode dar certo.
De todo modo caso não resolva é só voltar ao que era antes.
Você, claro, fez backup antes de mexer, né?
Comigo não funcionou =(
ExcluirInteressante. Mas eu não tenho coragem, não vá o diabo tecê-las e lá se vai o blogue.
ResponderExcluirUm abraço
Amo suas dicas...são sempre perfeitas!!!!
ResponderExcluirBeijocas
Andressa
http://pimentasdocepimentas.blogspot.com.br/
Ain meu Deus que difícil rsrs, eu até poderia tentar mas depois de ver que teve erros com algumas pessoas acima, resolvi deixar pra lá, ainda mais porque não tenho muita paciência. E minha internet também não ajuda kkk...
ResponderExcluirEnfim querida, queira te pedir pra dar uma passadinha em meu blog, e se gostar seguir de volta =] Vou adorar ter você como minha leitora. Mas já vou adiantando que não tenho um blog perfeito como o seu viu ;)
Beijos e fique com Deus, cada vez mais sucesso em toda sua vida
BlogSemDrama.blogspot.com
Olá Elaine, como está?
ResponderExcluirAqui estou eu novamente!
Bom, é que eu utilizei também as dicas deste post lá no meu blog...
Mas não é só para agradecer que estou aqui, também quero dizer que creditei você e seu blog (dentre dois outros) no meu último post, é porque aprendi muito aqui e acredito que este trabalho também deva ser valorizado em gestos simples e sinceros!
Com este crédito do seu blog, com certeza estarei ajudando muito minhas leitoras a deixarem seus blogs cada vez melhores e mais funcionais, obrigada!
Ah, eu não sei mexer direito no Google+ e acho que deletei meu perfil lá, rsrsrs, logo logo eu descubro.
Bom, espero que não se importe de eu ter feito a referência daqui sem avisar ou pedir antes, mas, qualquer coisa, só falar que eu altero a postagem, tá?
Até logo e parabéns!!
Ótima dica! Já testei e amei! http://alinezanatta.blogspot.com.br/
ResponderExcluirOi tentei por o código h2 { pra trocar a minha mas não permite. O que eu devo fazer?
ResponderExcluirSueli, tente achar background: transparent e em lugar de transparent colocar a cor que deseja, precedida do sinal #
Excluirbjssss
Elaine, te agradeço muito!!! você não faz ideia do tanto q vc me ajudou!!! Muito feliz!!!
ResponderExcluirMuito obrigado msm!!! depois olha la o resultado: http://www.makemegaby.com/
é claro que eu estou melhorando aos poucos neh?!?! rsrsrsrs
bjss
Oi Elaine, tudo bem? Estou tentando criar o meu blog e pesquisando sobre como configurá-lo encontrei o seu. Estou indo devagarzinho e suas dicas estão me esclarecendo muito! Muito obrigada :D Se tiver um tempinho passa no meu ( http://bibliotecadababi.blogspot.com.br ) pra ver como está ficando, suas críticas serão muito bem-vindas ;)
ResponderExcluirBeijinhos!
Eu nuuunca consigo, quando aperto ctrl F e colo o que voce pede, ele nunca acha :(
ResponderExcluirEu naum consigo pq naum intendo como isso funciona, ME ESPLICA PFV!!!
ResponderExcluirElaine, amei seu blog e suas dicas!
ResponderExcluirMas no HTML do meu Template, não acho a tag "h2".
Como posso fazer?
Quero colocar as faixinhas!
Beijão,
www.entre-termos.blogspot.com.br
Diogo, pode colar o código antes do fechamento da folha de estilos.
ExcluirMas seu blog tem a tag sim, pode crer.
bjsssss
onde colo o codigo pois eu tambem não encontro a tag h2?
ExcluirEssa é a primeira vez que não consigo colocar em prática uma dica sua (que por sinal, excelente dica).
ResponderExcluirO meu ficou assim:
h2 {
font: $(widget.title.font); /*fonte do título do gadget*/
color: $(widget.title.text.color); /*cor da fonte*/
background: transparent url(http://1.bp.blogspot.com/-tH7hf5R9kIo/UhfxPI15dVI/AAAAAAAAuW0/IrQdF-60-qE/s1600/301+-+C%C3%B3pia.png) center no-repeat;
height: 49px;
width: 262px;
text-shadow:0px 1px 1px http://cores.gratuita.com.br/; /*cor e inclinação da sombra*/
-moz-border-radius: 3px;
-webkit-border-radius:3px;
-goog-ms-border-radius: 3px;
border-radius:3px;
}
Mas, na hora de visualizar, é como eu não tivesse feito nenhuma modificação.
Mas mesmo assim, obrigado por compartilhar a dica. :)
Gostei do tutorial, me ajudou muito ^^
ResponderExcluirhttp://www.aolhardeumgaroto.blogspot.com
obrigada meu blog ficou lindo
ResponderExcluirOlá, o blogger está agora com uma nova interface, quando eu procuro o : " { h2 " não aparece nada... Você poderia me ajudar?
ResponderExcluirTambém estava com esse mesmo problema. Mas basta você clicar em qualquer lugar da caixinha de HTML e dar Ctrl+F, lá mesmo vai abrir o buscador e vc põe h2, fica apertando ENTER até achar o h2 que está abaixo da palavra "Headings". Espero ter ajudado. ^^
Excluirhttp://docetefeels.blogspot.com.br
Elleeeeeen do céu, você resolveu os meus problemas kkkkk. Esse novo editar html ta uma droga
Excluirmuito bom, foi otimo
ResponderExcluirvisita.;)
wwwbbwdelicate.blogspot.com
Ao contrarios dos outros blogueiros que vem divulgar seu blog, vim aqui pra agradecer, mim ajudou muito
ResponderExcluirvc faz ajustes?
ResponderExcluirSim, faço.
ExcluirEscreve pra mim e a gente combina.
jssss
Não consigo achar essa tag, sabe como resolver? =/
ResponderExcluirDeux, todo template tem essa tag.
ExcluirVocê está procurando do modo correto?
Caso não ache cole o código antes do fechamento da folha de estilos.
bjssss
Oi Elaine, Tudo bem?
ResponderExcluirObrigada por mais esta postagem. Gostaria de saber como faço para aumentar o espaço entre o titulo do gadget e seu conteúdo. Estou procurando a dias e não encontro. Mais uma vez, sempre grata,
Zélia Dantas
http://amorporart.blogspot.com.br
Ameiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii obrigada consegui fazer o meu, assim que eu terminar tudinho volto aqui e deixo o link bjim
ResponderExcluirConsegui! Finalmente!
ResponderExcluirEste comentário foi removido pelo autor.
ResponderExcluirótima dica. Me ajudou bastante!
ResponderExcluirhttp://meu-faz-de-conta.blogspot.com.br/
Nossa! Muito obrigada!! Ficou lindo lá no meu blog!
ResponderExcluirhttp://sentidoteen.blogspot.com.br/
Olá Elaine!
ResponderExcluirFiz no meu e deu certo. Usei o código da fita vermelha, mas troquei a cor pelo rosa. Porque ficou melhor com a cor que repaginei no meu blog.
Obrigada mais uma vez por esse lindo presente :)
Beijinhos e Sucesso amiga!
http://dulcineiadesa.blogspot.com
Você só esqueceu de dizer o que faço com o código novo?!
ResponderExcluironde coloco?
Carina, coloque no lugar do antigo.
ExcluirFicou tudo transparente o Blog '-'
ResponderExcluirFaz um vídeo ensinando, tá complicado '-'
ResponderExcluirEu fiz isso funciona muito bem, no entanto agora quero mudar o estilo do das datas dos post e nao muda nada :(
ResponderExcluirAdorei o post, me ajudou muito e ficou direitinho lá no blog.
ResponderExcluirObrigada, beijos!
http://www.leticiakoliveira.com/
adorei! ajudou muito, ficou lindo no meu blog só que não consegui deixar a imagem com as bordas arredondadas
ResponderExcluirOioi, nossa você já me ajudou tanto!!! Eu gostaria de saber como desce o titulo da sidebar, não estou conseguindo! Está assim olha ~> http://imgur.com/6sMvmTG
ResponderExcluire meu código está assim ~> http://imgur.com/BI9tlYe
Agradeço desde já :*
Thássila, experimente acrescentar no código os valores para padding e margin.
ExcluirSendo que margin se refere à distancia do fundo em relação às margens, e padding se refere à distância do título dentro do fundo. Sim, precisa ter um pouco de conhecimento em html para conseguir editar.
beijosss
Obrigada! Funcionou :D
ExcluirOi, Elaine, seu blog me ajudou muito, mas tenho uma dúvida, é nesse mesmo lugar que eu mudo pra colocar borda nos gadgets ? No seu outro tutorial disso não consegui copiar os links e não acha o link certo, e outra coisa, tem como eu colocar esse fundo no título de somente alguns gadgets ? Obrigadaaa
ResponderExcluirAdoro seus tutoriais e estou adorando essa coisa de mexer nos códigos, até o que não está bem definido eu consigo fazer, por exemplo, colocar cor e centralizar no mesmo código, adorei,
ResponderExcluirGENTEEE PRA QUEM NÃO ESTÁ ACHANDO O CÓDIGO NA CAIXINHA TEM QUE CLICAR DENTRO DA CAIXA DE TEXTO/CÓDIGOS DAI APARECE EU TAMBÉM ESTAVA CLICANDO FORA E APARECIA AQUELES ZEROS OU A QUANTIDADE ACHADA, ALGO ASSIM
Olá, Elaine, vc está de parabéns! Seu blog é ótimo!
ResponderExcluirEu gostaria de trocar a fonte do título dos gadgets, como fazê-lo?
Desde já,
obg.
bjão
Muito prático! Eu tinha visto um outro tutorial bem mais complicado, indicando upar uma imagem para cada título. Optei pelo seu. "Brigadão"
ResponderExcluirwww.mais40bemcuidado.com.br
Quando digito h2 { não encontra nada só fica um icone vermelho dizendo 0-0
ResponderExcluirOi Elaine,adoro suas dicas mim ajuda muito no meu blog.
ResponderExcluirhttp://40grausdemoda.blogspot.com.br
Elaine me ajuda!!
ResponderExcluirFiz no meu blog mas o texto fica no centro mas na parte de cima.. como eu coloco ele pra ficar centralizado no meio da imagem???
www.rafahproject.blogspot.com.br
Rafah, tem que conhecer um pouco as propriedades margin e padding.
ExcluirNo caso, margin altera o posicionamento da imagem e padding altera o posicionamento do texto do título dentro da imagem.
Tem que ir testando até conseguir posicionar como deseja...
Oi Elaine.
ResponderExcluirTentei colocar uma imagem como fundo nos títulos da minha sidebar e ao salvar nada mudou. Você pode me ajudar?
Parabéns pelo seu trabalho. Gosto muito da sua criatividade, e o seu modo de explicar.
ResponderExcluirAbraços musicais!
Oi Elaine
ResponderExcluirSeus posts me ajudaram muito na "reforma" do meu blog
como agradecimento fiz uma menção do seu blog num post recente
espero que goste
https://carleanormal.blogspot.com.br/2016/05/diy-como-criar-seu-proprio-templete.html
Oi Elaine. Eu usei esse seu tutorial e amei, porém ao centralizar os titulos dos gadgets, a data das postagens ficou centralizada também. Tem como eu arrumar isso?
ResponderExcluirBites!
Tary Belmont
Curti bastante, acabaram minha dúvidas haha
ResponderExcluirMuito obrigado, seu blog é excelente :D
Elaine, você sempre ensinou direito, mais nesse tutorial não explicou nada. :|
ResponderExcluirElai ficou divino! Mais, ele não ficou no meio da caixinha, lá dentro. O que eu faço?
ResponderExcluirQual o endereço do blog? Eu dou uma olhada...
ExcluirEm geral o posicionamento do título é alterado mudando ou acrescentando valores em padding.
Me diz o endereço do blog e eu vejo :)
Quando pesquiso h2 { , não acha nada. Por que?
ResponderExcluirPorque você não procurou direito. Está na section Headings.
ExcluirOlá! Estou com uma dúvida, como eu posso colocar os gadget com cores diferentes? Tipo: Uma cor azul outra vermelha etc.
ResponderExcluirNesse caso seria outro tutorial.
ExcluirVou criar e assim que postar deixo o link aqui, tá?
Olá, ótimo postagem. A única coisa que não consegui foi mudar a cor do título dos gadgets. Ficam sempre preto.
ResponderExcluir