Na maioria dos templates do Blogger o titulo dos gadgets da sidebar usam o estilo h2. Então entre na pagina editar HTML e procure por h2 {...} o conteúdo das chaves varia conforme o template por isso não temos como mostrar igual está no seu blog. Não apague o que já existe neste código apenas adicione o trecho abaixo, deixando deste jeito:
h2 {background-color: #6699FF;
background-repeat: no-repeat;
background-position: right top;
background-image: url(endereço da imagem);}
A linha background-color: #6699FF; é uma cor de fundo caso você use uma imagem pequena ou queira apenas trocar a cor de fundo do titulo do gadget, mas você pode apagar essa linha se não quiser usar uma cor.
O restante do código é o posicionamento e a imagem de fundo. Tenha cuidado para não apagar nada por engano e também usar o endereço correto da imagem porque qualquer detalhe errado o código não vai funcionar. Veja aqui alguns links úteis sobre isso:
Site para Fazer Imagens Online e Criar Banners com Efeitos
Hospedar Imagens no Blogger - Hospedagem Grátis
Imagem não aparece no Blog ou Site
Usando o código desta forma todos os títulos de gadgets ficarão com a mesma imagem de fundo, mas você pode personalizar cada gadget separadamente, por exemplo, se quiser colocar uma imagem no titulo do gadget dos marcadores do blog então não altere o estilo h2, mas crie um novo logo abaixo dele com o nome #Label1 h2, desta forma:
#Label1 h2 {background-repeat: no-repeat;
background-position: right top;
background-image: url(endereço da imagem);}
E personalize como quiser da mesma maneira que mostramos acima. Isso vale para qualquer outro gadget, por exemplo, o nome do estilo do gadget de postagens populares é #PopularPosts1. Para descobrir o nome de outros gadgets veja nosso tutorial sobre Personalizar gadgets do Blog você poderá ver de maneira fácil como achar os nomes dos estilos dos gadgets.
Como nem todos os templates são iguais veja também nosso tutorial sobre como encontrar trechos do HTML assim poderá descobrir qual é o estilo CSS do titulo dos gadgets do seu blog.
Aproveite para ver outras dicas sobre personalizar gadgets do blogger:
Gadgets do Blogger com Links Lado a Lado (Estilo Menu Horizontal)
Personalizar LinkWithin (Posts Relacionados): Mudar Cores e Efeitos
Personalizar Gadget Postagens Populares do Blog - Barras Coloridas
Se quiser também é possivel colocar Imagem no título da postagem.
Você pode usar esse mesmo procedimento para formatar o texto dos titulos como desejar apenas tenha cuidado porque essas alterações são fáceis de fazer e como falamos só é necessário prestar atenção nos detalhes porque muitas vezes apagamos uma letra do código e por isso não funciona. Esperamos que gostem desta dica e deixem sua opinião sobre qualquer assunto relacionado com blogs.
Muito agradecido pela dica. Mas eu gostaria de saber se existe um modo de também colocar imagens diferentes nos títulos das postagens de acordo com as tags (no link que você sugeriu é mostrado como mudar a imagem dos títulos, porém de forma padrão para todos). Exemplo, em uma tag "vídeos" o título automaticamente apresentará uma imagem de fundo correspondente a ela. Já vi isso em alguns blogs e sites, mas não soube como aplicar essa opção efetivamente.
ResponderExcluirAgradeço por este post e por uma possível resposta =)
Miguel não tem como colocar imagens diferentes nos títulos das postagens porque todas são o mesmo estilo (CSS).
ResponderExcluirsó é possivel no titulo dos gadgets por causa dos nomes dos estilos de cada gadget:
Label1, PopularPosts1 e outros nomes.
Olá fabiano, eu posso fazer isso no título do gadjet: "Marcadores"?
ResponderExcluirpara fazer isso nos marcadores é com o estilo
ResponderExcluir#Label1{....}
Queria saber como colocar a imagem inclicavel tipo: o titulo ta assim "Jogos" e em baixo as páginas.
ResponderExcluiracho que não tem como colocar essa imagem clicavel ao lado do titulo.
ResponderExcluiralias teria como colocar mas apareceria igual em todos os posts e com o mesmo link
Olá fabiano, tenho um blog com um template mas n tem o titulo como coloca? pf td resumido pq eu sou um ameba .-.
ResponderExcluireu ñ consegui! :(
ResponderExcluirAna Beatriz veja o nome dos estilos, por exemplo o h2 tem que ser exatamente igual.
ResponderExcluircomigo também infelizmente não deu certo...
ResponderExcluirOlá no meu blog tem o seguinte código para titulo do gadget:
ResponderExcluirOnde eu coloco o código para funcionar.
Obrigada.
vanessafatima_ribeiro@hotmail.com
pode ser em diversas partes do html.
ResponderExcluirprocure por ]]></b:skin> e coloque os estilos CSS antes dele
Olá Fabiano, não consigo achar o h2 {...} no HTML do meu blogger! D:
ResponderExcluirhttp://popgleek.blogspot.com.br/
se não achar você pode adicionar esse trecho
ResponderExcluirNo meu tem mais de 5 h2{...} como saber o certo?
ResponderExcluirConsegui! E se eu quiser colocar a imagem no fundo do widget e não no título?
ResponderExcluirJuan Marx para deixar a imagem sobre o gadget só precisa retirar o h2 e deixar o #Label1 {.... por exemplo
ResponderExcluirmas isso vai deixar a imagem de fundo no gadget todo inclusive o titulo.
desisto de ser blogueiro!!!!!!!1 nunca consigo modificar isso aaaaaaaaaaaaaaaaaaaaaaa chega... só volto se conseguir -1 blogueiro no mundo
ResponderExcluirmurilo no começo é difícil mesmo.. mas aos poucos vai pegando o jeito
ResponderExcluirOi me ajuda em uma coisa
ResponderExcluirEsse é o meu blog http://conversasdealcova.blogspot.com.br/
No template que eu baixei tinha uma imagem antes do titulo, só que depois que eu apliquei a tal imagem não entrou. Eu gostaria de um código pra inserir a umagem antes do título. Me ajuda :)
A imagem é essa : http://static.tumblr.com/k0k9z8j/nGgmh1q9l/cereja.jpg
Kris você precisa fazer uma imagem no tamanho certo porque esse código de imagem de fundo não reduz a imagem
ResponderExcluirEu consegui o que eu queria, pedi pra um amigo fazer um banner e resolveu meu problema :) (y)
ResponderExcluirMinha dúvida agora era porque aquelas miniaturas de postagem ficam com uns codigos escritos ao invés de ser o que está na postagem?
Pesquisei aqui, já e não achei nada explicando.
Tá assim ó:Aparece a miniatura da imagem postada e ao lado dela o trecho da postagem, mas em algumas antes do texto tem esse código:
ResponderExcluirNormal 0 21 false false false PT-BR X-NONE X-NONE MicrosoftInternetExplorer4 Na boca guardo o gosto do seus passos, te sinto e me envolvo, no calor...
se apareceu o código em vez do titulo da postagem é porque colocou algo errado.
ResponderExcluirpode ser qualquer detalhe no html como por exemplo faltar algum sinal, usar " em vez de '
Mas não é em toda postagem, é só em algumas, como é que eu detecto esse erro?
ResponderExcluirO código não apareceu ao invés do titulo, não. Ele apareceu antes do texto da miniatura da postagem. Entra lá no meu blog que vc vendo é mais fácil do que eu explicando, Por favoooorrrrr >.<
qual o endereço do blog?
ResponderExcluirFabiano, eu preciso muito da sua ajuda. Eu tenho 24 anos e possuo um sonho de fazer um blogger de artesanato, bonito e criativo. . . Mas eu to fazendo tudo errado, nao entendo nada, nao consigo editar e nem personalizar. me ajude por favor. . . . . . rosanafeydit@hotmail.com
ResponderExcluirRosana personalizar o blog leva tempo... por isso tente fazer as coisas aos poucos e tenha paciencia... (principalmente no começo)
ResponderExcluiro que você queria mudar no seu blog?
Obrigado Fabiano...
ResponderExcluiroi Fabiano, queriacolocar uma barra de fundo nos nomes dos gadgets no meublog www.castelodoterror.blogspot.com da cor domenu. so qprocurei esse h2 naoachei, achoqo blog nao ta permetindomaisouso do f3.. como faço??? teria como vc me ajudar?
ResponderExcluirpara achar códigos use o ctrl F, veja aqui:
ResponderExcluirAchar Códigos na Pagina Editar HTML do Blogger - Ctrl F
em alguns templates é o estilo h3
Fabiano meu filho, preciso de ti em mais essa:
ResponderExcluirClique e passe o mouse nos links e me oriente porque isso está acontecendo.
Por favor! http://nataliavideo.blogspot.com.br/2013/06/chamando-deus-de-pai.html
Natália o problema é que você colocou o CSS do menu varias vezes no seu blog.
ResponderExcluirveja como o trecho #page-bar li a:hover {....
você colocou esse código dentro de cada gadget e por isso gera erro, tem que usar cada nome uma vez só. Teria que trocar o nome page-bar para cada vez que usou esse código por exemplo no gadget românticos usar o estilo
#romanticos li a:hover{....
e no inicio do menu colocar
<ul id="romanticos".....
se quiser usar o mesmo efeito em todos os gadget coloque o css no html do blog e no menu só os links.
O CCS #page-bar já existe no html
ResponderExcluirE como colocar só os links nos gadgets?
Natália
ResponderExcluirvocê poderia usar outro nome, por exemplo #page-bar2
Usar #page-bar2, mas como?
ResponderExcluirEm cada gadget?
se for utilizar em gadget pode formatar o gadget como mostramos no tutorial, encontrando a id do gadget como no exemplo é Label1 e fazer a formatação para cada gadget, por exemplo #HTML 4 a {.....}
ResponderExcluirFabiano, você sabe como posso deixar os títulos dos Gadgets desta forma: (http://i.imgur.com/3fRleoC.png) ?
ResponderExcluir[]'s
normalmente o código do estilo do titulo dos gadgets é h2.
ResponderExcluirmas precisa entender um pouco de css para ajustar deste jeito que falou pois necessita fazer testes diretamente no seu template.
O que é CSS? Para que Serve e Como usar o CSS
Fabiano, no que se refere aos menus, é possível inserir pequenas imagens ao lado dos nomes linkados?
ExcluirVide exemplo: (http://i.imgur.com/S0FMck9.png)
[]'s
é possivel, mas vai dar um pouco de trabalho porque no seu exemplo são imagens diferentes para cada link.
Excluiruse este código para cada imagem ao lado do texto:
< a href='url do link' >< img src='url da imagem' style='float:left;padding: 5px' >texto do menu< /a >
isso faz a imagem ficar ao lado de cada item, mas precisa ajustar o valor padding: 5px para posicionar a imagem
ou se achar mais facil em vez de usar texto e imagem use somente a imagem escrevendo o texto de cada item do menu junto com sua imagem. Então desta forma é o código da imagem normal como colocaria em qualquer parte do blog.
o problema de usar uma imagem é que não tem efeito ao passar o mouse, por exemplo, no texto e imagem ao passar o mouse o texto pode mudar de cor.