Olá pessoal! hoje eu irei mostra como colocar efeito deslizantes nos links dos marcadores do blog, o efeito acontece quando passamos o curso do Mouse sobre o Link do Marcador...
Observe: vamos utilizar um código CSS para dar o efeito ao seu marcador, sabendo também que o efeito será aplicado somente a um Gadgte e não vários.
Primeiro Você vai acessar o painel de edição do seu blog. a seguir você vai em Modelo >> em Editar HTML >> e Prosseguir.
Pronto! Agora estando no HTML do modelo do seu Blog, pressione as teclas Ctrl + F do seu teclado para ativa o dispositivo de pesquisa e procure por esse Tag:
]]></b:skin>
Logo acima do Tag encontrado acrescente esse CSS que dará todo o efeito no seu Marcador:
#Label1 ul li {
list-style-type:none;
}
#Label1 ul li a:hover{
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
transition: all 0.15s linear;
padding-left:8px;
-webkit-transition:0.5s;
}
A parte destacada em vermelho você vai substituir pelo ID do seu Gadget.
Como encontrar o ID do Gadget:
Sabemos que cada Gadget possui um ID, que significa que ele possui uma identificação.
E pra encontrar o ID é fácil, primeiro você tem que está no HTML do seu blog e no HTML você vai procurar pelo Título que você deu pra o seu marcador.
Então utilize as teclas CTRL + F e procure pelo título do Gadget e quando encontra ela vai esta deste jeito que mostra o exemplo a baixo:
<b:widget id='Label2' locked='false' title='Titulo do Gadget' type='Label'/>
No exemplo que mostra acima, a parte que está destacada em vermelho: Label2 é o ID do Gadget, que no caso do meu gadget está Label2, no seu pode esta Label1 e etc..
Se quiser saber mais de como encontrar o ID de um Gadget leia o Tutorial anterior <<<
Prontinho, depois de alterar o ID do seu Gadget salve
Pessoal o segredo desse CSS é você saber o ID do gadget, pois se não colocar o ID referente ao Marcador corretamente o efeito não será Aplicado.
No meu template isso deu certo e também preciso que vocês comentem sobre o que acharam desse efeito, obrigado..
Obrigado, c me ajudou muitooooo.
ResponderExcluirFicou perfeito em meu blog Confira: http://www.blogdosocorrista.com
ResponderExcluirAgradecimentos!
gostei!!!!
ResponderExcluir