Tutorial: Marcadores personalizados com efeito Hover.

Oláá minhas gaataaas!

Nesse post vou ensinar(ou pelo menos tentar ensinar! hehehe) pra vocês nesse tutorial super fácil que eu aprendi logo no comecinho do blog, no Go Imagine e uso até hoje, acho que esse foi umas das primeiras coisas que mudei no blog, até porque foi uma das coisas mais fáceis de se aprender. Esse é um blog que eu gostei muito de conhecer mas infelizmente a dona não pode mais blogar por falta de tempo ou coisa assim e desde 2013(eu acho!) ele não tem sido atualizado. 

Ah e antes que eu esqueça, vou dar os créditos ao go imagine, pelas imagens e pela inspiração.

Vamos ao que interessa.. Na imagem ai embaixo 

1°passo:                    

Na barra lateral do blogger você clica em layout e logo em seguida em adicionar um gadget.

2° passo:                   

Depois de clicar em Adicionar um Gadget, você deve clicar em marcadores (caso já tenha os marcadores pode pular essa etapa) e configurar desse jeitinho aqui.

Detalhe: Só vai funcionar se os seus marcadores estiverem em lista!

3° passo:                    

Abra seu HTML e procure (ctrl+f) por ]]></b:skin> e acima dele cole:

/* 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 */
}

Bom meus amores eu espero mesmo ter ajudado vocês de algum modo! 
Deixe sua opinião nos comentários... <3