Pages

sexta-feira, 5 de junho de 2009

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.

0 comentários:

Postar um comentário

Pesquise no Site
.