tooltips para blogger de redes sociales con efecto bonito css

bueno es un tooltip muy bonito de redes sociales que puedes implementar en su blog ó pagina web

aqui en la siguiente pagina muestro unos ejemplos EJEMPLOS Ó DEMOS

1.veamos el primer efecto:

para ponerlo en blogger  primero nos vamos a edicion html y buscamos la etiqueta </head>

 justo antes de esa etiqueta ponen el siguiente codigo :

   <link href="http://ensayandopopup.webcindario.com/ANDRES22882/toltip/css/demo.css" rel="stylesheet" type="text/css"></link>
        <link href="http://ensayandopopup.webcindario.com/ANDRES22882/toltip/css/style.css" rel="stylesheet" type="text/css"></link>

y luego en diseño añadir un Añadir un gadget--> HTML/Javascript  y ponen el  siguiente codigo:

<ul class="tt-wrapper">
    <li><a class="tt-gplus" href="#"><span>Google Plus</span></a></li>
    <li><a class="tt-twitter" href="https://twitter.com/andres8822"><span>Twitter</span></a></li>
    <li><a class="tt-dribbble" href="#"><span>Dribbble</span></a></li>
    <li><a class="tt-facebook" href="https://www.facebook.com/andres8822"><span>Facebook</span></a></li>
    <li><a class="tt-linkedin" href="#"><span>LinkedIn</span></a></li>
    <li><a class="tt-forrst" href="#"><span>Forrst</span></a></li>
   </ul>

y obviamente lo que esta en rojo lo cambian por la url de sus redes sociales :)

sigamos con el segundo efecto

2. el segundo sale una burbuja como la siguiente imagen:

para ponerlo en blogger  primero nos vamos a edicion html y buscamos la etiqueta </head>

 justo antes de esa etiqueta ponen el siguiente codigo :

   <link href="http://ensayandopopup.webcindario.com/ANDRES22882/toltip/css/demo.css" rel="stylesheet" type="text/css"></link>
        <link href="http://ensayandopopup.webcindario.com/ANDRES22882/toltip/css/style2.css" rel="stylesheet" type="text/css"></link>

y luego en diseño añadir un Añadir un gadget--> HTML/Javascript  y ponen el  siguiente codigo:

<ul class="tt-wrapper">
    <li><a class="tt-gplus" href="#"><span>Google Plus</span></a></li>
    <li><a class="tt-twitter" href="https://twitter.com/andres8822"><span>Twitter</span></a></li>
    <li><a class="tt-dribbble" href="#"><span>Dribbble</span></a></li>
    <li><a class="tt-facebook" href="https://www.facebook.com/andres8822"><span>Facebook</span></a></li>
    <li><a class="tt-linkedin" href="#"><span>LinkedIn</span></a></li>
    <li><a class="tt-forrst" href="#"><span>Forrst</span></a></li>
   </ul>

y obviamente lo que esta en rojo lo cambian por la url de sus redes sociales :)

sigamos con el tercer efecto.

3. es un efecto que sale un cuadro al pasar el mouse  como la siguiente imagen muestra:

para ponerlo en blogger  primero nos vamos a edicion html y buscamos la etiqueta </head>

 justo antes de esa etiqueta ponen el siguiente codigo :

   <link href="http://ensayandopopup.webcindario.com/ANDRES22882/toltip/css/demo.css" rel="stylesheet" type="text/css"></link>
        <link href="http://ensayandopopup.webcindario.com/ANDRES22882/toltip/css/style3.css" rel="stylesheet" type="text/css"></link>

y luego en diseño añadir un Añadir un gadget--> HTML/Javascript  y ponen el  siguiente codigo:

<ul class="tt-wrapper">
    <li><a class="tt-gplus" href="#"><span>Google Plus</span></a></li>
    <li><a class="tt-twitter" href="https://twitter.com/andres8822"><span>Twitter</span></a></li>
    <li><a class="tt-dribbble" href="#"><span>Dribbble</span></a></li>
    <li><a class="tt-facebook" href="https://www.facebook.com/andres8822"><span>Facebook</span></a></li>
    <li><a class="tt-linkedin" href="#"><span>LinkedIn</span></a></li>
    <li><a class="tt-forrst" href="#"><span>Forrst</span></a></li>
   </ul>

y obviamente lo que esta en rojo lo cambian por la url de sus redes sociales :)

4. efecto igual al anterior pero sale de otra esquina:

para ponerlo en blogger  primero nos vamos a edicion html y buscamos la etiqueta </head>

 justo antes de esa etiqueta ponen el siguiente codigo :

   <link href="http://ensayandopopup.webcindario.com/ANDRES22882/toltip/css/demo.css" rel="stylesheet" type="text/css"></link>
        <link href="http://ensayandopopup.webcindario.com/ANDRES22882/toltip/css/style4.css" rel="stylesheet" type="text/css"></link>

y luego en diseño añadir un Añadir un gadget--> HTML/Javascript  y ponen el  siguiente codigo:

<ul class="tt-wrapper">
    <li><a class="tt-gplus" href="#"><span>Google Plus</span></a></li>
    <li><a class="tt-twitter" href="https://twitter.com/andres8822"><span>Twitter</span></a></li>
    <li><a class="tt-dribbble" href="#"><span>Dribbble</span></a></li>
    <li><a class="tt-facebook" href="https://www.facebook.com/andres8822"><span>Facebook</span></a></li>
    <li><a class="tt-linkedin" href="#"><span>LinkedIn</span></a></li>
    <li><a class="tt-forrst" href="#"><span>Forrst</span></a></li>
   </ul>

y obviamente lo que esta en rojo lo cambian por la url de sus redes sociales :)

y listo eso es todo si quieran vean los demos o ejemplos en la siguiente pagina:

EJEMPLOS Ó DEMOS