Marcadores com efeito hover

Oi meninas hoje eu vou ensinar a como fazer esse marcador (x) é um marcador normal só que personalizado
Obs : tuto encontrado no blog Camila's Designs



O primeiro passo é adicionar e configurar o gadget dos marcadores.
Pra quem usa a interface antiga do Blogger vá em design → elementos da página → adicionar um gadget → marcadores. 
Quem usa a nova interface vá em mais opções → layout (veja imagem) → adicionar um gadget → marcadores.
Você deve configurar o gadget desse modo:

clique para ampliar

É importante que no modo "exibir" você deixe selecionada a opção "cloud". Fica à sua escolha a configuração dos demais modos, mas no modo "exibir" configure de acordo com a imagem. Depois que fizer as alterações, salve.
Agora vamos personalizar os marcadores usando CSS. Vá no editor html do seu blog (design → editar html ou modelo → editar html → prosseguir), aperte Ctrl + F e procure por ]]></b:skin>. Você deve colar ANTES disso, o código a seguir:

.label-size span, .label-size a {
  color: #000000; /* cor dos marcadores em estado normal */
  padding:2px 5px; /* espaço entre os marcadores e as margens, não altere */
  margin:2px; /* espaço entre um marcador e outro, não altere */
  background: #EEEEEE; /* cor de fundo dos marcadores */
  display:inline-block; /* deixa os marcadores em caixinhas, não altere */
  font-size:10px; /* tamanho da fonte */
  border-radius:10px; /* bordas arredondadas */
  }

.label-size span, .label-size a:hover {
  background: #000000; /* cor de fundo dos marcadores em estado hover */
  color: #EEEEEE; /* cor dos marcadores em estado hover */
  }

Você pode alterar tudo, menos as propriedades display, margin e padding (ambas estão destacadas em itálico no código). Altere a cor dos marcadores, a cor de fundo, a medida das bordas arredondadas, enfim. Vá alterando e visualizando o modelo e depois que obter o resultado desejado, salve as alterações