tooltips para blogger de redes sociales con efecto bonito css - Webmaster Programming front end and back end Free Courses Online

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:
Añadir



<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:
Añadir



<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:
Añadir



<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:
Añadir



<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:





tooltips para blogger de redes sociales con efecto bonito css tooltips para blogger de redes sociales con efecto bonito css Reviewed by topmundial on 8:14 Rating: 5

1 comentario:

  1. Ever wanted to get free Instagram Followers?
    Did you know that you can get these AUTOMATICALLY & ABSOLUTELY FOR FREE by getting an account on Like 4 Like?

    ResponderEliminar

Con la tecnología de Blogger.