Hoje você vai aprender a Como Personalizar os Marcadores do Blog com Efeito Hover. Para quem não sabe o que é "Efeito Hover", saiba que ele é executado quando passamos o "Cursor" do mouse sobre uma determinada área onde há um link existente e o fundo do mesmo muda de cor.
Aplicar este efeito nos marcadores é bastante simples e muito fácil. Vamos ao tuto?
Sempre recomendo: Faça um backup do seu template ao instalar qualquer tipo de implementação de códigos dentro do HTML do seu blog e claro, dê preferências a um blog de teste! Caso não saiba fazer Backup? Não tem problema, clique em: Como fazer um Backup ou restauração do seu blog.
Passo 1
Vá em primeiro lugar colocar os marcadores em seu template, para isso siga:
• Layout > Adicionar Gadgets > Marcadores >
• Faça as alterações indicadas na foto abaixo e salve
• Coloque ele no local de visualização de sua preferência.
Passo 2
• Vá em Modelo e Editar HTML
No Editor de HTML do seu blog, clique CTRL + F e procure por: ]]></b:skin>
]]></b:skin>
Após encontrar a Tag ]]></b:skin>, acrescente o seguinte código, logo acima dela.
.label-size span, .label-size a { color: #000000; /* cor dos textos dos marcadores em estado normal */ padding:2px 5px; /* espaço entre os marcadores e as margens, não altere nada */ margin: 2px; /* espaço entre um marcador e outro, não altere */ background: #FF69B4; /* cor de fundo dos marcadores */ display:inline-block; /* deixa os marcadores em caixinhas, não altere */ font-size: 14px; /* tamanho da fonte */ border-radius: 5px; /* bordas arredondadas */ } .label-size span, .label-size a:hover { background: #FF1493; /* cor de fundo dos marcadores em estado hover */ color: #000000; /* cor dos marcadores em estado hover */ }
Faça as alterações necessárias de acordo com sua preferência e Pronto!
IMPORTANTE
Quando você personalizar seus marcadores não altere
padding :2px 5px;
margin: 2px;
Beijinhos ♥
Compartilhe
Obrigada, funcionou direitinho!! O único! Beijos
ResponderExcluir