Personalizando os marcadores do blog

Os marcadores do blog por ser uma espécie de guia ou menu principal(se quiser pode escolher quais itens aparecem: Opções dos marcadores do blogger) merecem uma formatação diferente para seus links, então vamos modificar o estilo dos marcadores do blog. Isso é semelhante a colocar barra de rolagem nos marcadores que já falamos anteriormente, alias você pode fazer as duas coisas ao mesmo tempo. Agora vamos mostrar como colocar uma imagem ou ícone ao lado dos marcadores, que na verdade é uma imagem de fundo, e formatar seu estilo, mudar o tipo de letra, cor e tamanho.

Entre na pagina editar HTML e clique para Expandir modelos de widgets, então procure os marcadores do seu blog, clique ctrl+F e digite o titulo que usa nos marcadores é o jeito mais fácil de achar, neste blog chama guia rápido.



Na linha <ul> acrescente guia rápido, é o nome que vamos usar para esse estilo, mas poderia ser qualquer outro, então fica assim: <ul class=’guiarapido’>. Depois vá até o inicio do código do blog e crie o estilo CSS guia rápido, coloque isso junto com os outros estilos (body, main, sidebar...) do seu blog.

.guiarapido a{background-image:url(http://img207.imageshack.us/img207/5918/marcador.gif);
background-repeat: no-repeat;
background-position: left center;
padding-left: 25px;padding-top: 2px;
padding-bottom: 2px;}


.guiarapido a:hover{font-style: italic;background-image:url(http://img18.imageshack.us/img18/7765/marcadorover.gif);background-repeat: no-repeat;
background-position: left center}

Os endereços são as imagens que ficaram ao lado dos marcadores, você precisará de duas assim uma somente aparece quando colocamos o mouse sobre um marcador. Para fixar a imagem do lado esquerdo e sem repetir usamos essas linhas:
background-repeat: no-repeat;
background-position: left center;

A parte final: padding-left: 25px;padding-top: 2px; padding-bottom: 2px; são as margens, o valor 25 é a distancia da margem esquerda (deve ser um pouco maior que a largura da imagem) e os valores 2px são em cima e embaixo, também é necessário ajustar conforme o tamanho de imagem que você usar.

Se quiser modificar o tipo, cor ou tamanho da letra basta colocar isso aqui nas duas partes do codigo:

font-family: "Comic Sans MS";
font-size: 14pt;
color: #0000FF;

E formatar como quiser seus marcadores, escolhendo o jeito que combine melhor com seu blog, dissemos para colocar nas duas partes do código (.guiarapido a / .guiarapido a:hover) porque assim poderá escolher cores diferentes, sugerimos não mudar o tamanho nem o tipo de letra pois isso faz ocupar espaços diferentes e o menu dos marcadores ficará “pulando” quando passar o mouse sobre ele, quero dizer subindo e descendo um pouco.

Veja também:
Código das Cores
Posicionar imagem de fundo
10 Programas Grátis para Editar Imagens

Veja mais Dicas e Tutoriais: > CSS > Template