Marcadores Pesonalizados

|| ||
Olá sweets! Queria primeiro agradecer pelo apoio que me deram para criar um novo blog e já criei meu novo blog que se chama Flores ao Chão é um blog mais pessoal, onde vou falar outras diferentes de Tutorial, HTML essas coisas, pra quem quiser ver é só clicar aqui
É claro que continuarei com esse aqui, não abandonarei.
Hoje irei mostrar pra vocês como personalizar o gadget de marcadores com um tutorial bem simples e que deixa bem bonito.
Exemplo:

Se caso ainda não tiver adicionado o gadget de Marcadores vá em Layout>> clique em Adicionar um Gadget>> procure por Marcadores e deixe da seguinte forma:
Título: você pode colocar o que quiser.
Mostrar: Pode ser qualquer um;

  • Todos os marcadores: aparecerão todos os marcadores 
  • Marcadores selecionados: aparecerão só aqueles que você escolher.
Classificação: como irá aparecer.

  • Em ordem alfabética: eles aparecerão em ordem alfabética (óbvio)
  • Por frequência: aparecerá de acordo com o quanto é utilizado, por exemplo: quando você utiliza muito um marcador ele tende a aparecer entre os primeiros.
Exibir: De acordo como aparecerá.
No caso você deve marcar a opção Lista, para que o tutorial funcione.

  • Lista: ele aparecerá um em cima do outro.
  • Cloud: aparecerá um no lado do outro.

Deixe desmarcada a opção Mostra o número de postagens por marcador.
Depois é só clicar em Salvar posicionar aonde quer que fique o gadget de marcadores e clicar em Salvar organização  que aparece no canto superior direito.

Agora vamos em Modelo>> Editar HTML>> clique dentro da caixa de código e aperte Ctrl+F e procure por:
]]></b:skin>
E acima dele cole o seguinte código:
/* Marcadores personalizados - goimagines.blogspot.com */
#Label1 ul li{
float: left;
width: 45%;
font-family: 'Dosis', sans-serif; /* fonte, se preferir troque */
text-transform: uppercase; /* letras em maiúsculo, se não quiser apague a linha */
font-size: 16px; /*tam. da fonte*/
background: #fff; /*fundo*/
border-bottom: 2px solid #ccc; /* borda de baixo do marcador */
margin: 5px;
font-weight: normal;
list-style-type:none;
}
#Label1 ul li:hover{
background: #EAEAEA; /*fundo hover*/
border-bottom: 2px solid #FF51A8; /* borda de baixo do marcador hover */
}
Está tudo bem explicado no código.
Visualize se deu certo, se ficou do jeito que você quer e depois Salve.
Bom pessoal espero que tenham gostado.

Créditos ao Go Imagine