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
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