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.

Veja o trecho destacado é ele o titulo que aparece no blog, então vamos mudar de class=’titulo’ para class=’visitados’

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.

.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

Postagens mais Comentadas Receba Dicas por E-mail Recomendações dos Leitores

Link desta Pagina

17Comentários:

OacAdm disse...: Brigadão ai pela postagem...^^
Eu havia procurado aqui e em outros sites/blogs e num encontrei...; 27 de junho de 2009 12:20
Anônimo disse...: Oi
porque não consigo me registrar no 110mb ?; 27 de junho de 2009 16:42
Fabiano Roberto disse...: 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?; 27 de junho de 2009 18:32
Anônimo disse...: Aparece uma messagem
como essa
Forbidden

You don't have permission to access /register.php on this server.; 27 de junho de 2009 19:31
Junior disse...: Onde voce hospeda seus documentos? mais sem deixalo hospedado para download?; 27 de junho de 2009 19:34
Jamylle Carvalho disse...: 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?; 28 de dezembro de 2009 14:36
RENATO PANTANAL disse...: 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; 3 de junho de 2011 12:05
Fabiano Roberto disse...: 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" />; 3 de junho de 2011 15:59
RENATO PANTANAL disse...: É isto mesmo amigão valeu obrigado!; 3 de junho de 2011 16:09
Cáàh ♫ disse...: 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 ..; 3 de julho de 2011 16:53
Fabiano Roberto disse...: isso depende do lugar que colocou o código...; 3 de julho de 2011 23:58
Lucas Lima disse...: 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; 26 de agosto de 2011 13:36
Fabiano Roberto disse...: veja aqui sobre menu: Links lado a lado (menu horizontal); 26 de agosto de 2011 14:47
Ariel disse...: Nossa, ja tinha desistido de procurar sobre o assunto, mais pensei, por que não tentar aqui? resolvido xD; 14 de setembro de 2011 23:09
Ariel disse...: 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; 11 de outubro de 2011 18:55
Fabiano Roberto disse...: 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; 12 de outubro de 2011 14:57
Ariel disse...: Aeee, deu certo! Sempre me salvando kkkk! vc é foda! :); 12 de outubro de 2011 17:02

Títulos do Menu com imagens diferentes

17Comentários:

Postar um comentário