Mil Trucos Blogger

Gadget de Marcadores flotantes con efecto hover

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado
1
En esta oportunidad compartiré con ustedes un espectacular truco para Blogger, se trata de un espectacular menú de marcadores flotantes que se ubican en la parte izquierda del blog y al pasar el cursor sobre los iconos estos se expanden.

Puedes ver el truco en acción en esta misma entrada (en la parte izquierda de la pantalla).

Para añadir este gadget en tu blog ve a Diseño, Añadir gadget, HTML/JavaScript y pega allí lo siguiente:

<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(http://www.miltrucosblogger.com/wp-content/uploads/2013/10/Twitter.png)no-repeat;
background-position:center center;
}
ul#social .googleplus a      {
    background:#D73D27 url(http://3.bp.blogspot.com/-1mYMKQENXdI/UPFOeK31VzI/AAAAAAAAA4k/w2Qk48tpleQ/s1600/GOOGLE+PLus.png)no-repeat;
background-position:center center;
}
ul#social .facebook a      {
    background:#1A4B97 url(http://1.bp.blogspot.com/-3M1F3Y29Yoc/UPFOeAAUFvI/AAAAAAAAA4c/ALvfOPDwJ-g/s1600/Facebook.png)no-repeat;
background-position:center center;
}
ul#social .rss a      {
    background:#FAAE17 url(http://4.bp.blogspot.com/-twR0g7wotpE/UPFOfFtFOuI/AAAAAAAAA4o/uJMUf9hjRco/s1600/rss.png)no-repeat;
background-position:center center;
}
ul#social .pinterest a   {
    background:#963336 url(http://2.bp.blogspot.com/-xgOrG4ysqyM/UPFOeKFKMtI/AAAAAAAAA4Y/i_jnKpHsK24/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='rss'><a href='URL DE TU RSS' title='Rss'></a></li>
 <li class='pinterest'><a href='URL DE TU PINTEREST' title='Pinterest'></a></li>
</ul>

Reemplaza lo que esta en resaltado en color azul  por lo que se indica en cada caso y guarda los cambios.

Como lo ves, es un truco espectacular y muy fácil de agregar en nuestros blogs.

Si tienes algo que decirnos no dudes en comentar.

Vía:Blogtipsntricks

0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado
1

18 Comentarios

2 Pings/Trackbacks

  1. octubre 14, 2013    

    Simplemente genial ese marcador gracias, continua asi me han servido de mucho en mi sitio y mas este gadget me ha encantado

  2. octubre 15, 2013    

    puesss a mi no me aparece

    • febrero 4, 2014    

      Luis los botones si aparecen en la entrada.

      Saludos

  3. enero 29, 2014    

    Me ha encantado..me lo llevo a mi blog…muchísimas gracias !

    • febrero 4, 2014    

      Vanedis gracias por comentar, espero que vuelvas a visitarnos.

      Saludos

  4. abril 13, 2014    

    Muchas gracias por la barra. Está genial. Funciona de fábula. Enhorabuena

  5. abril 13, 2014    

    Muchas gracias por compartir. Funciona de fábula y está genial. Un saludo

  6. julio 17, 2014    

    Gracias me sirvio pero com hago para cambiar el logo quiero persnalizar con mis propios logos me ayudas ? 🙂

  7. agosto 8, 2014    

    Hola, Jaider. Tengo una pregunta. Instalé el artilugio, pero debajo de cada botón aparece una línea que sobresale mucho. Me podrías indicar a qué se debe. Esta es mi página
    http://horizontefemenino.blogspot.com/

    Gracias. Siempre encuentro muy buen material en tu blog

  8. agosto 8, 2014    

    Hola, ya lo resolví. Sólo debía deslizar hacia abajo el cajón donde esta el archivo. Saludos

    • agosto 8, 2014    

      Qué bueno que hayas solucionado el problema tu solo 😉

      Saludos

  9. julio 7, 2015    

    Gracias por tu aporte, los estaré utilizando, para porderlos ver aplicados pueden consultar

    imagine cariló

  10. julio 7, 2015    

    perdon, el link es

    imagine cariló

  11. septiembre 4, 2015    

    […] Mil Trucos Blogger, de nuevo, nos llega un interesante Gadget para instalar unas pestañas flotantes en el lateral del […]

  12. […] Mil Trucos Blogger, de nuevo, nos llega un interesante Gadget para instalar unas pestañas flotantes en el lateral del […]

  1. Botones Sociales Blogger - Hogar Bloguero on septiembre 4, 2015 at 1:01 pm
  2. Botones Sociales Blogger - Rocío Bloguera on febrero 5, 2016 at 7:09 pm

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo