Títulos do Menu com imagens diferentes

A melhor maneira para colocar imagens diferentes em cada um dos títulos do menu é criando um estilo CSS próprio para cada um deles. Entre na pagina editar html, clique para expandir o modelo.
Agora procure pelo titulo que deseja personalizar, temos em nosso blog uma lista dos assuntos mais procurados e o titulo dele é “mais visitados” vamos usá-lo como exemplo.

Títulos do blog

Veja o trecho destacado é ele o titulo que aparece no blog, então vamos mudar de class=’titulo’ para class=’visitados’
Personalizar Sidebar
A função disto é dizer que aquele menu usará a formatação do estilo visitados, então vamos criar um estilo com esse nome. No começo do html tem body{...} logo após isso podemos colocar nosso novo estilo.

HTML do Blog

.visitados {padding-bottom: 10px;display: block;background-image: url(endereço da imagem);background-repeat: no-repeat;background-position: right top;}

Vamos usar a imagem como fundo desse estilo, então falta fazer os ajustes no estilo visitados, podemos usar o padding-top e padding-bottom para acertar a posição do texto sobre a imagem e aparecerá essa formatação aparecerá somente neste titulo do menu, precisamos repetir esse procedimento para cada um dos títulos que vamos personalizar.

Sobre como fazer esses ajustes, criar e hospedar as imagens veja os itens abaixo:
Formatar texto
Como fazer e colocar botões
Hospedar imagens
Programas para criar e editar imagens
Imagens de fundo para blogs
Posicionar imagem de fundo
Personalizar títulos do menu

17 comentários:

  1. Brigadão ai pela postagem...^^
    Eu havia procurado aqui e em outros sites/blogs e num encontrei...

    ResponderExcluir
  2. Oi
    porque não consigo me registrar no 110mb ?

    ResponderExcluir
  3. já faz tempo que fiz meu cadastro lá, então não lembro muito bem.

    se não me engano tem que por uma frase no final da pagina de inscrição, ela está no link logo acima do campo para digitar, além disso eles mandam um email confirmando seu cadastro.

    qual exatamente é o seu problema na hora de cadastrar?

    ResponderExcluir
  4. Aparece uma messagem
    como essa
    Forbidden

    You don't have permission to access /register.php on this server.

    ResponderExcluir
  5. Onde voce hospeda seus documentos? mais sem deixalo hospedado para download?

    ResponderExcluir
  6. Oi, Fabiano. Gostaria de saber como colocar uma imagem no título da sibedar nos seguidores.
    Já tentei de 3 formas, mas não consigo. Todos os outros títulos dão certo, menos os seguidores.

    Pode me ajudar?

    ResponderExcluir
  7. Fabiano amigão me dá uma luz, eu já tenho o menu na parte superior do meu blog, mais aonde está escrito início eu gostaria de colocar a imagem de uma casinha você poderia me ajudar?
    www.opantanalonline.com

    ResponderExcluir
  8. RENATO PANTANAL
    a casinha seria só na home? pode trocar o texto pelo código de uma imagem, assim: <img src="endereço da imagem" border="0" />

    ResponderExcluir
  9. É isto mesmo amigão valeu obrigado!

    ResponderExcluir
  10. Nao consegui, coloquei o codigo que o Fabiano de pro RENATO PANTANAL e apareceu a imagem apenas na mensagem , e nao na guia !
    O q aconteceu errado ?
    http://www.sooscurticao.blogspot.com
    e na guia apareceu (....semtitulo)
    Ai eu apaguei,pra nao ficar feio ..

    ResponderExcluir
  11. isso depende do lugar que colocou o código...

    ResponderExcluir
  12. Eu não entendi muito bem a explicação.
    Fabiano, assim... eu quero que tenha um menu mais por exemplo> FOTO DE CAVEIRA/ ABOUT entende? Com o nome e a foto, se puder me ajudar agredeço.
    mande-me um email pf: lucasnatanlimasaqua@hotmail.com

    ResponderExcluir
  13. Nossa, ja tinha desistido de procurar sobre o assunto, mais pensei, por que não tentar aqui? resolvido xD

    ResponderExcluir
  14. To mudando template, fui tentar fazer isso de novo, mais com template do blogger mesmo, não ta dando certo, a imagem só aparece se o título tiver nome, e é de acordo com a quantidade de texto, se escrever muito, da pra aparecer a imagem toda, se não escrever nada, aparece nada, arrumei isso, agora aparece a imagem, mais só um pedaço dela, como faço para aumentar a área da imagem, pra cima ou pra baixo, pra ele aparecer toda goo.gl/d7OPy

    ResponderExcluir
  15. ariel
    a imagem está como fundo?...então coloque padding-top:30px; no mesmo estilo que a imagem de fundo

    isso faz o conteudo do gadget ficar com um espaço vario e mostrar a imagem

    ResponderExcluir
  16. Aeee, deu certo! Sempre me salvando kkkk! vc é foda! :)

    ResponderExcluir