Personalizando marcadores em lista

Yo! Yo! Quero pedir desculpas por não estar respondendo os comentários e nem retribuindo visitas, estou acumulada de trabalhos e provas. Assim que me regularizar irei visitar todos os blogs, estou guardando os endereços. Também quero dizer que mandei o recadinho de todos que desejaram feliz dias das mães para minha mama, e ela agradeceu super feliz e mandou uma beijokas para todos vocês. Bem hoje vou mostrar como personalizar as listas com marcadores usadas em postagens e sidebar, substituindo o símbolo de bolinha ou círculo cinza por uma imagem.

Esse tutorial já foi bem rodado na web, mas quero aproveitar esse meu tempinho corrido para postar artigos pequenos que ainda não pude postar. Coisinhas assim são sempre uteis e sempre tem aqueles que buscam, eu mesma sou uma. Gente eu fiquei com muitaaaaaa preguiça de tirar print, então peguei a imagem de outro blog, (que coisa feia!) mas os créditos deixei abaixo dela. Então vamos ao tutorial agora?

Para ocultar o marcador do menu quando visita a pagina do próprio marcador, ou seja, quando você está na pagina de um marcador ele não aparece no menu marcadores do seu blog. Entre na pagina editar html, procure e apague esse trecho:

<span expr:dir='data:blog.languageDirection'><data:label.name/></span>

Fazer aparecer um texto quando passa o mouse por cima do menu marcador (exemplo) também é fácil de fazer. Volte a pagina editar html quase no mesmo trecho que estava e procure o trecho:

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>

Apague e coloque esse no lugar:

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' expr:title='&quot;Texto sobre:&quot; + data:label.name'><data:label.name/></a>

A parte Texto sobre: (os dois pontos também) você pode alterar como quiser, mas cuidado com o restante do código, pois se apagar qualquer coisa dá erro na hora de salvar.

Colocar uma imagem ao lado dos links do menu marcadores é como personalizar qualquer outro menu. Na pagina editar HTML procure por ]]></b:skin> e coloque esse código antes dele:

#Label1 a{font-size:130%;display: block;background-image: url(endereço da imagem);text-indent: 12px;background-repeat: no-repeat;background-position: left center;padding:2px}
#Label1 a:hover{background-image: url(endereço da imagem);text-indent: 12px;background-repeat: no-repeat;background-position: left center;padding:2px}

Você também pode utilizar: 

.sidebar ul li { list-style: none;
margin: 0; padding: 0; border-bottom:1px solid #fee; padding: 0 0 4px 12px; background: url("http://i122.photobucket.com/albums/o260/mhilka/minigifs/hartpink_bydk.gif") no-repeat 0 2px;}

Se desejar adicionar uma imagem na frente ou personalizar os marcadores internos da postagem, aquele quando ativado aparece uma bolinha cinza ou preta,  procure por ]]></b:skin> e coloque esse código antes dele:

.post ul li { list-style: none; margin: 0; padding: 0; padding: 0 0 4px 12px; background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVanXuYhmfEQe_tv9sCMS-glnj0_ro3WNhiyIfgumH_8MzRyyeDyqrozTzt-papXttdGEh82Xa0HZp7J7BjbTk3NkH1gn6GHlomJd7vIcY4NYpz_YPP4sOgJurtiOnW9JdgoF204sf/s1600/mini-153.gif") no-repeat 0 2px;}

Resultado: (Das postagens é a mesma coisa)

 Imagem obtida de: MCD

Bom é isso, essa postagem fico bem curtinha rs mas okay. É isso minna-san vou ficando por aqui, espero que tenham gostado ate a próxima postagem. Beijinhos~ Creditos ao: Dicas para blog e Maria Clara Desing.