16 de novembro de 2012

3

Efeito Links deslizantes no Gadget Marcador do Blog



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..





3 comentários:

Observe:
Faça seu comentário dentro do assunto tratado na postagem.
Não pode divulgar endereço de Sites ou Blog.
Comentário que conterem divulgação serão moderados, somente serão aceitos links caso necessite de informar alguma fonte.


Copyright © - Todos os Direitos Reservados: Várias Dicas para Blogs |
Design by Kelven Pedro | Tecnologia do Blogger - É Proibido a copia do conteúdo deste blog sem autorização
    Twitter Facebook