18.3.13

Colocando Tooltip em todos os links!


Holá amores, everything is fine? Tudo bem com todo mundo? Espero que sim u.u! Amores como vocês sabem eu ando fuçando em muita coisa net, e muito dessas coisas são blogs, tumblrs e o escambau, e com isso percebi que muitos blogs pequenos e até grandes não sabem como colocar aquele balãozinho em imagens, muitos donos de tumblrs postam trilhões de efeitos que tanto amamos, mas muitos apenas disponibilizam esses efeitos ( afiliados, moderadores, recomendo etc..) apenas com links normais, para apenas mostrarem o efeito na imagem. 

Eu um dia fiz um teste, peguei um efeito em um tumblr de html que era diferente de muitos que havia testado, testei em vários outros links para ver se eu estava correta na tentativa, e voilá a minha tentativa estava certa, e com isso quero ensinar a quem não tem a mínima idéia de como fazer isso! Porque as vezes o blog tem imagens de elite, moderadores e várias outras coisas mas sem nada, sem nada que eu digo é sem os balõzinhos que deixam esses efeitos muito mais charmoso e legal!

Vou demonstrar aqui um exemplo de link de imagem com e sem tooltip:


Link sem tooltip

<a href="link" class="rollover"></a>

Com tooltip

<a href="LINK URL"target="blank" title="NOME BLOG"><img src="LINK IMAGEM" class="try" /></a> 

Estão vendo a diferença? No sem link tem apenas o link da url e a classe do efeito, mas se adicionar o css nos códigos combinando eles podemos mostrar tooltip em todos os links que queremos. Onde está "target="blank" title=  é o que faz ter esse efeito do balão em todos os links. Se quiserem algum efeito e por links de urls e ainda mostrar os nomes coloquem esse efeito de css, eu na verdade amo e acho muito mais fofo mostrar os nomes e tals, acho mais organizado. Então amores espero que tenham gostado do post de hoje e que eu pude ajuda-los em algo ;) Kissus!!!

4 comentários:

  1. Muito legal ! <3

    princessofjeans.blogspot.com

    ResponderExcluir
  2. Achei o tutorial bastante útil, se bem que, honestamente, para mim nem faz grande diferença =P

    @Catching Stars

    ResponderExcluir
  3. se não for de incômodo, será que vc podia fazer um post ensinando como fazer nossos próprios tooltips? por exemplo eu vi que o seu é marrom com as letras em amarelo-queimado

    ResponderExcluir
  4. Nossa amei o tuto *--* Super útil!
    cute-bii.blogspot.com

    ResponderExcluir

Olá! Se chegou até aqui é porque leu toda a postagem certo? Não? Poxa, comenta antes de sair e por favor, tente ler todo o conteúdo do post pois, por mais que a maioria do que eu escrevo seja sobre css e html, eu também comento sobre vários assuntos no mesmo post.

E abaixo, algumas regrinhas para seguir e fazer um comentário bem maroto:

1 - Comente apenas se sentir a vontade e queira.

2 - Seja educado, não use palavras inapropriadas, respeite os outros comentários e opiniões alheias.

3 - Se eu fico feliz quando comentam algo? Ô se fico, na verdade adoro!

4 - Antes de sair além de comentar deixe o link do seu bloguinho caso queira pois assim conseguirei lhe visitar e deixar um recadinho.

5 - Quer ser afiliado ao blog? Só pedir nos comentários ou na própria página direcionada a isto, estou precisando de afiliados mesmo rsrs.

Obrigada por tanto e obrigada por me acompanhar até aqui, fico muito feliz e grata pela sua companhia!

Roh ~

GNMH - LAYOUT E DESIGN POR RDS / CRIADOS EXCLUSIVAMENTE PARA ESTE BLOGUINHO ❤