Imagem ao lado do texto ou link

Alguns blogs tem uma pequena imagem ao lado dos links ou titulos, clique aqui para ver um exemplo, para colocar um seta ou qualquer outra imagem ao lado de um texto ou link o código é:

.seta a{background-image: url(URL DA IMAGEM);
background-repeat: no-repeat;
background-position: left center;
padding-left: 40px;
}

Isso pode ser usado em qualquer tipo de texto sendo um link ou não, apenas tenha o cuidado de quando usar isso num link colocar o código da outra imagem para quando o mouse estiver sobre o link, desse jeito:

.seta a:hover{background-image: url(URL DA IMAGEM);
}

O nome .seta é apenas um exemplo no caso do Blogspot para colocar isso nos links da sidebar, você deve colocar esse código nessa parte:

.sidebar ul li {.....

Mas caso o seu blog não tenha especificado o link(a, a:hover) da sidebar precisamos colocar e o código com a imagem ficará assim:

.sidebar ul li a{background-image: url(URL DA IMAGEM);
background-repeat: no-repeat;
background-position: left center;
padding-left: 40px;
}

.sidebar ul li a:hover{background-image: url(URL DA IMAGEM);
}

Isso porque se colocar no começo do código onde tem: a:link, a:visited isso colocará essa imagem ao lado de todos os links do seu site.

Veja também:
Como fazer e colocar botões no blog
Código html das cores para usar nos estilos CSS
Criar bordas usando CSS
Onde e como fazer para hospedar imagens

10 comentários :

  1. Não tem lá emcima do explorer onde digita o endereço do site que quer entrar então alguns sites tem uma imagem do lado do link como eu coloco uma imagem daquelas?

    ResponderExcluir
  2. Eu fiz um selo para o meu blog, como faço o código dele? Abraço

    ResponderExcluir
  3. tossan
    você precisa hospedar a imagem em algum lugar depois para montar o código aqui do lado tem um gerador é só colocar o endereço da imagem e do seu blog

    sobre hospedar a imagem http://dicasparablogs.blogspot.com/2008/12/hospedagem-de-imagens.html

    ResponderExcluir
  4. Me ajuda, Por favor!!

    Estava querendo fazer um botão como o do blog; quando o mouse está em cima, a imagem muda, porem queria com link, identico ao do "Top Parceiros" e "Mais Visitados".
    Muito Obrigado!

    ResponderExcluir
  5. enviei um email respondendo sobre como fiz os botões nos top parceiros e mais visitados

    ResponderExcluir
  6. Olá, fiz do jeito que colocou, mas a minha imagem não ficou do lado do texto, ela ficou em cima, o que aconteceu?
    Como posso deixá-la exatamente do lado do texto?
    A imagem tem que ser da mesma altura do texto ou pode ser maior?
    Obrigada!

    ResponderExcluir
  7. Andressa, tente novamente o código está correto

    ResponderExcluir
  8. OLÁ FABIANO ROBERTO, CONFESSO QUE ESTE É O MELHOR BLOG SOBRE TECNOLOGIA QUE JÁ VISITEI. LI MUITO, ADOREI TUDO.
    GOSTARIA, COMO O RAPAZ ABAIXO DE CRIAR O CÓDIGO DE SELO DO MEU BLOG. COMO FAÇO PARA CRIAR? LI O QUE ESCREVEU, MAS A HTML NÃO É A CONCEDIDA AO ACESSARMOS AS PROPRIEDADES DE QUALQUER COISA NA INTERNET? MINHA IMAGEM ESTÁ HOSPEDADA NO PRÓPRIO BLOGGER. DE QUAL GERADOR VOCÊ SE REFERE AO DIZER QUE SE TEM QUE CLICAR? Se puder reponda-me para o e-mail gabrielnasciment.eagle@hotmail.com. ATENCIOSAMENTE:

    GABRIEL NASCIMENTO
    www.omusicoeopoeta.blogspot.com

    ResponderExcluir
  9. aqui tem um gerador de código para banners de parcerias
    http://www.dicasparablogs.com.br/2007/04/gerador-de-cdigo.html

    para hospedar a imagem use o imageshack

    os banners são imagens comuns só precisa colocar na web, se tiver duvidas pesquise por hospedar imagens

    ResponderExcluir
  10. tô sempre aqui lendo suas dicas.. parabens.. otimo blog

    ResponderExcluir