Oiee galerinha,
Hoje como tinha um tempo livre eu resolvi dar continuação os tutoriais, e bom trouxe um bem fácil e que dá digamos um certo charme ao layout, que é o Tooltip personalizado, pra quem não sabe o tooltip é a mensagem que aparece ao passar o mouse em algum link.
Explicando melhor:
Mas bom, vamos ao tuto?!
Vá em Editar HTML, e procure por <head>, abaixo disso cole o seguinte código.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'
type='text/javascript'/>
<script language='JavaScript' src='http://yourjavascript.com/1411249631/qTip.js'
type='text/JavaScript'/>
Agora pressione Ctrl+F e procure por ]]></b:skin>, e acima disso cole:
div#qTip {
padding: 3px; /*Espaço entre a borda e o texto*/
border: 1px solid #666; /* Estilo da borda */
display: none; /*Não mexa*/
background: #999; /* Cor de fundo */
color: #fff; /*Cor da fonte*/
font-family: Verdana; /*Tipo de fonte*/
font-size: 9px; /*Tamanho da fonte*/
position: absolute; /*Não mexa*/
z-index: 1000; /*Não mexa*/}
É só editar as cores como quiser e prontinho.
Mas caso você não use, ou não saiba, para o tooltip aparecer quando colocar link em algo o código deve aparecer assim:
<a href="link" title="Tooltip">Texto</a>
Onde diz Tooltip, você coloca o texto que vai aparecer quando se passar o mouse.Agora para usar em imagens, como por exemplo na elite de afiliados basta colocar:
<a href="link" title="Descrição da imagem"><img src="link-da-imagem/></a>
Aprendi aqui (www), espero que tenham gostado.
Beijinhos
.jpg){kind=link}
Adoro *-*
ResponderExcluirBeijocas, Lili ;3
Clique aqui, e vá para o blog / Princesa Teen