<h3>Efeito <span> Tooltip </span>no Link</h3>

Ola amigos(a) personalizei alguns modelos de Tooltip (ou dica de contexto), que é aquele pequeno texto ao descansar o mouse no link. Eles são muito úteis para fazer um resumo de determinados assuntos no blog. Descanse o mouse

-------------------------------------------------------------------------------------
Copie o código do efeito desejado e cole antes de </Head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><script language='JavaScript' src='http://static.tumblr.com/oiizew6/8B5lzwf17/script.js' type='text/JavaScript'/> <style> div#qTip { padding:3px 5px 3px 26px; border-top-left-radius: 10px; border-bottom-right-radius: 10px; border: 1px solid #bebebe; border-left: 3px solid #ff34b3; border:3px double #D8BFD8; -webkit-transition: 0.5s; -webkit-border-radius: 15px; -moz-border-radius: 25px 10px / 10px 25px; border-radius: 25px 10px / 10px 25px; display: none; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-5ptlLM9X-SbqbEu9r8DkKG0jTVkiu0L-oif279nnuh8HwFdOC4Z4Q0jQ5id4o5pPO4Mhk3BKOrX-jk24DTYjV7oZL03qz-CSslZ67m5yMmYB2HfW4Oz3rrTZmmGOgSVzAuBggU-_XcJx/s1600/icone_17.gif)no-repeat 5%; color: #7A378B; font-family: comic sans ms; font-size: 12px; text-align: left; position: absolute; z-index: 1000; } </style>


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><script language='JavaScript' src='http://static.tumblr.com/oiizew6/8B5lzwf17/script.js' type='text/JavaScript'/> <style> div#qTip { padding:3px 5px 3px 26px; border-top-left-radius: 10px; border-bottom-right-radius: 10px; border: 1px solid #bebebe; border-left: 3px solid #ff34b3; border:4px outset #FF3E96; -webkit-transition: 0.5s; -webkit-border-radius: 15px; -moz-border-radius: 1em 4em 1em 4em; border-radius: 1em 4em 1em 4em; display: none; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTWLPeqpsDoiII5ChsAsEo_teZBwv2opCykJEGzS-Epv1FaAdC4PPQmE0c1b6pufjRRqCSUugzI1DnQQlrM9PtsP0mMSIbmknBrhyeFLf_5_ngzOOH1RsYUwv9Spk4uO5vV5_gD135dvH9/s1600/icone_7.gif)no-repeat 5%; color: #CD6889; font-family: comic sans ms; font-size: 12px; text-align: left; position: absolute; z-index: 1000; } </style>


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><script language='JavaScript' src='http://static.tumblr.com/oiizew6/8B5lzwf17/script.js' type='text/JavaScript'/> <style> div#qTip { padding:3px 5px 3px 26px; border-top-left-radius: 10px; border-bottom-right-radius: 10px; border: 1px solid #bebebe; border-left: 3px solid #ff34b3; border:2px double #B4CDCD; -webkit-transition: 0.5s; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-bottom-right-radius: 50px; display: none; background:#E0FFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbvQgroW02KNd2oqol6fi-_hqI-KIDRLwxrSJKYqtRH77ud-bsCR-DjLX6mHlIlEZo7wePB3G5djGF67R2R3GXI9qdLmE2kT6tL5t9-Z5yhB09wcIFA4vPn4xEX-7Dn1_HdECr6PAGWQ-B/s1600/icone_5.gif)no-repeat 5%; color: #7A8B8B; font-family: comic sans ms; font-size: 12px; text-align: left; position: absolute; z-index: 1000; } </style>


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><script language='JavaScript' src='http://static.tumblr.com/oiizew6/8B5lzwf17/script.js' type='text/JavaScript'/> <style> div#qTip { padding:3px 5px 3px 26px; border-top-left-radius: 10px; border-bottom-right-radius: 10px; border: 1px solid #bebebe; border-left: 3px solid #ff34b3; border:1px dashed #000; -webkit-transition: 0.5s; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; display: none; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWuFhQCkTteAKLeY50Do1jqyKY9_EPpURVOlzeWf87SKpzB5e6oYbFamPPZTzRDvi8EWEfu29oa_R9GvecyvUbzlmh0UOYOlCuyyHD7TSitcivAPoWh1-6XXVhiNc5qQoH6S1MldwWZRdg/s1600/icone_1.gif)no-repeat 5%; color: #8B5F65; font-family: comic sans ms; font-size: 12px; text-align: left; position: absolute; z-index: 1000; } </style>


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><script language='JavaScript' src='http://static.tumblr.com/oiizew6/8B5lzwf17/script.js' type='text/JavaScript'/> <style> div#qTip { padding:3px 5px 3px 26px; border-top-left-radius: 10px; border-bottom-right-radius: 10px; border: 1px solid #bebebe; border-left: 3px solid #ff34b3; border:1px dashed #CDC8B1; -webkit-transition: 0.5s; -webkit-border-radius: 15px; -moz-border-radius: 1em 4em 1em 4em; border-radius: 1em 4em 1em 4em; display: none; background:#FFF8DC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIxQ5bzY5w95MnzJqrWh8KcuJGajQ-ORDOjZM5SFwNxHA9vAEVl2KCS1sEtCt4cBpXABD88EG3eyTFhqWyrn0jhY7-3bUE7bzf3eaP7jx6uaJK172u2QC_6TGgk-4Rt3t0Uds-AICTPWKh/s1600/icone_8.gif)no-repeat 5%; color: #7A8B8B; font-family: comic sans ms; font-size: 12px; text-align: left; position: absolute; z-index: 1000; } </style>


Selecionei algumas imagens, clic com o botão direito sobre a imagem em seguida copiar endereço da imagem e cole no código se desejar mudar.

Dicas: Construindo Links

Para que o efeito funcione adicione o seguinte código title="Seu Texto".

Link em texto
<a href="ENDEREÇO DO SITE" target="_blank" title="Seu Texto">
NOME DA PÁGINA </a>

Link em Imagens
<a href="ENDEREÇO DO SITE" target="_blank" title="Seu Texto">
<img src="Endereço da imagem"> </a>

Link abre em nova Página
acrescente o seguite código target="_blank" veja abaixo

<a href="ENDEREÇO DO SITE" target="_blank" title="Seu Texto">
NOME DA PÁGINA </a>