Olá caro leitor do Tecnoblog, nesta post venho trazendo como criar o efeito flutuante nos links do blog este efeito serve para deixar seu blog bonito, os links também, mas o nome " Efeito flutuante " é só uma forma de dizer mas o nome do efeito é : Efeito Tooltip.
Um dos Efeitos mais legais que já vi, ele é utilizado por muito web designers...
Mas vamos começar a trabalhar.
Mãos ao tutorial:
1. Vá no guia do modelo.
2. Depois vá em Editar HTML
3. E procure pela seguinte tag:
Imediatamente, ABAIXO desta tag cole este codigo:
Estilo CSS
1. Ainda em Editar HTML procure a seguinte tag:
2. E cole o seguinte código logo ACIMA dela:
Mas preste atenção:
Os links só funcionarão se tiver o atributo "title" nos links
Agora que eu tenho a "Caridade" ( Brincadeira ) de ensinar a você "Leitor" De como colocar o atributo "Title nos links"
Como colocar o atributo 'title" nos links
1. Para Você Colocar é muito facil.. vou passar um codigo com tudo oque se deve fazer:
Vá em nova postagem e clique em Editar HTML e cole o código abaixo: fazendo as alterações nessesarias... abaixo o codigo:
Um exemplo de como ficara:
Qualquer duvida Comente!
Um dos Efeitos mais legais que já vi, ele é utilizado por muito web designers...
Mas vamos começar a trabalhar.
Mãos ao tutorial:
1. Vá no guia do modelo.
2. Depois vá em Editar HTML
3. E procure pela seguinte tag:
</head>
Imediatamente, ABAIXO desta tag cole este codigo:
script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script language='JavaScript' src='http://dl.dropbox.com/u/3173073/GothicDarkness/qTip.js' type='text/JavaScript'/>
Estilo CSS
1. Ainda em Editar HTML procure a seguinte tag:
]]></b:skin>
2. E cole o seguinte código logo ACIMA dela:
3. Agora e só você modificar as partes destacadas de vermelho pela sua preferencia.div#qTip {
padding: 3px;
border: 1px solid #666; ---/* edite cor da borda */
border-right-width: 2px;
border-bottom-width: 2px;
display: none;
background: #999; ---/* edite cor de fundo */
color: #FFF; ---/* edite cor do texto */
font: bold 9px Verdana, Arial, sans-serif;
text-align: left;
position: absolute;
z-index: 1000;
}
Mas preste atenção:
Os links só funcionarão se tiver o atributo "title" nos links
Agora que eu tenho a "Caridade" ( Brincadeira ) de ensinar a você "Leitor" De como colocar o atributo "Title nos links"
Como colocar o atributo 'title" nos links
1. Para Você Colocar é muito facil.. vou passar um codigo com tudo oque se deve fazer:
Vá em nova postagem e clique em Editar HTML e cole o código abaixo: fazendo as alterações nessesarias... abaixo o codigo:
<a href='ENDEREÇO-DO-LINK' title='Descrição do link ao passar o mouse'>NOME-DO-LINK</a>
Um exemplo de como ficara:
<a href='www.tecnoblog789.blogspot.com' title='Visite e gostara!'>Tecnoblog</a>Pronto!
Qualquer duvida Comente!
2 Comentários
Valeu caio, gostei muito do efeito, curti seu blog.
7 de novembro de 2011 às 17:45Parabéns :),
Que bom que deu tudo certo.
9 de novembro de 2011 às 14:04Postar um comentário
Seu comentário é bem vindo, mas leia antes de comentar...
→ Se os comentários conter palavrões, xingamentos, ofensas ao autor ou qualquer pessoa, não serão publicados!
→ Não Contiver outros sites!
→ Não conversar com comentários!
→ Não conter propaganda!
→ Visite o nosso termos de uso
Obrigado e volte sempre!