Redes sociales flotantes




<style type="text/css">
ul#social {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 10px;
    left: 0px;
    list-style: none;
    z-index:9999;
}
ul#social li {
    width: 100px;
}
ul#social li a {
    display: block;
    margin-left: -2px;
    width: 100px;
    height: 70px;
    background-color:#fff;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    -moz-box-shadow: 0px 4px 3px #000;
    -webkit-box-shadow: 0px 4px 3px #000;
}
ul#social .twitter a{
     background:#0F96C6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhURDc9117SnRG2sPRqO1pSbwtKN8n9cPsuhJbv9GarSjG4XLPAjDPe3qswA2y8ZFOf82v7xJTEMM-z6mEZ4cW8f7wJMitUcEeZqNiKA4opL6HEiHCCRtNeavfZOeoFHj3hK21w0jAJ4fo/s1600/Twitter.png)no-repeat;
background-position:center center;
}
ul#social .googleplus a      {
    background:#D73D27 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFp5VDgnHyuHjndWu3EuMqYfIfFG3v3EQypkBqWRiOo_ScV9OO2IgpeYRoWmTXZCUDicyOxMw7n9EJVGCBVZ-0Nc5sZNgTCUQEnrkvtYEvc1RAApAEDufFlRuPynsA7hUdFUyoEAZhU3w/s1600/GOOGLE+PLus.png)no-repeat;
background-position:center center;
}
ul#social .facebook a      {
    background:#1A4B97 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz8zzUkVD3SFoK1-i3rHDw0B9zfVshHwpz3OMAuV5hekSnqMZZuA8OYT9rn6fqsmSkR_5bbLXi8FedApvEbpty-TJy0EoQPAb9SJc4jlIZkmrE8CaNn-P5sFskaM9iC07dZTKzqDgBmac/s1600/Facebook.png)no-repeat;
background-position:center center;
}
ul#social .pinterest a   {
    background:#963336 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimWvunZ-immFO7JkASx49Q14ywexCrfJmEQDX8J8JDyfxWN-V3F9SXA8OzvXVqkkZhI5kV8fjlC-sNMEYC0l22YZQ0NiIfDgFKWmsrY8yCnMetRIpyK5nxCeLCxEPfmV7665azPmGR-Mc/s1600/Pinterest.png)no-repeat;
background-position:center center;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/javascript'>
$(function () {
    $('#social a').stop().animate({
        'marginLeft': '-85px'
    }, 1000);
    $('#social > li').hover(
        function () {
            $('a', $(this)).stop().animate({
                'marginLeft': '-2px'
            }, 200);
        },
        function () {
            $('a', $(this)).stop().animate({
                'marginLeft': '-85px'
            }, 200);
        }
    );
});
</script>
<ul id='social'>
 <li class='twitter'><a href='URL DE TWITTER' title='Twitter'></a></li>
 <li class='googleplus'><a href='URL DE TU GOOGLE PLUS' title='Google Plus'></a></li>
 <li class='facebook'><a href='URL DE TU FACEBOOK' title='Facebook'></a></li>
 <li class='pinterest'><a href='URL DE TU PINTEREST' title='Pinterest'></a></li>
</ul>


Ejemplo como debe de quedar:

</script>
<ul id='social'>
 <li class='twitter'><a href='http://twitter.com/TeodorusMaximus' title='Twitter'></a></li>
 <li class='googleplus'><a href='http://plus.google.com/u/0/116477218804435165768' title='Google Plus'></a></li>
 <li class='facebook'><a href='http://www.facebook.com/pages/Teodorus-Maximus/549671968430429' title='Facebook'></a></li>

21 comentarios:

  1. muy buen blog pero una pregunta como haces para que se abra en una nueva pestaña tu banner de referidos de adf.ly el mio solo lo redirecciona gracias

    ResponderEliminar
  2. que tendria que modificar para que saliera uno de tumblr?

    ResponderEliminar
    Respuestas
    1. Hola. Tendrías que modifical la url y la foto (icono). El icono esta en el primer código lo que acaba en png. saludos

      Eliminar
  3. Una pregunta que tengo que modificar por que ami me aparecen mas salidos, me explico;
    en tu vídeo que hiciste veo que solo sobre salen los nombres de las diferentes redes sociales, pero ami me aparece todavia mas salido el icono de cada red social, si puedes echale un vistazo a mi blog para que veas de que te hablo, http://sstutoriales.blogspot.mx/ muchas gracias

    ResponderEliminar
    Respuestas
    1. Hola. lo explico en el vídeo... explico como hacer que salgan mas pegados o no...saludos

      Eliminar
    2. Hola que tal una pregunta que metodo usas para poner las lineas de codigo en la entrada, para poder ver y copiar

      Eliminar
  4. Hola, de antemano muchas gracias por los tutoriales han sido de gran ayuda. Tengo una pregunta en este deslizante me gustaria tener tambien el codigo de RSS Feed, como hago ? . Me gustaria un tutorial donde se trabajen transparecias para los fondos de entradas y gadgets.Gracias

    ResponderEliminar
  5. no me sale, no se que estoy haciendo mal hice todos los pasos ¡¡

    ResponderEliminar
    Respuestas
    1. Hola. No tiene más de lo que comento en el vídeo. Si tienes una plantilla dinámica o descargada pueden darte problemas algunos códigos y no funcionarte. saludos

      Eliminar
  6. hola, me gustaria saber que tendria que modificar para que los botones fuera horizontales y salieran de menu del blog . ¿Y para ponerlo en un gadget hmtl?.Gracias y un saludo.

    ResponderEliminar
  7. hola felicitaciones que hacer para colocar EL INSTRAGRAM y colocar otro botón para que se agreguen a los grupos de facebook o mas paginas de facebbok que uno tiene?

    ResponderEliminar
  8. De donde sacaron el class de los iconos

    ResponderEliminar
  9. EME de magnifico, me has ayudado mucho.-gracias

    ResponderEliminar
  10. y si quiero poner de whatssap telegrama discord etc???

    ResponderEliminar
  11. Este mismo método pero para botones de compartir?

    ResponderEliminar
  12. Hola podrías ayudarme necesito que me salga pero a la derecha no a la izquierda. Lo probé y queda muy bien. Y agregarle para que aparezca Youtube e Instagram por favor

    ResponderEliminar
  13. Hola Teodorus como hago para agregar mas iconos de otra redes sociales

    ResponderEliminar
  14. Por Favor de Youtube e Intagram y Whatsapp. GRACIAS

    ResponderEliminar