Gadget de Marcadores flotantes con efecto hover

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVH3UQKoy7WsCcxtPHJksCV61EwrAsSWaN7eZjtPm3ewd0utn-p7NejPmDhgb_Q_vU4lawl45SJdYfmDGuWlKuGRDZH7uAOsT-xcgPAmyiC3DwdI5MEHrjHGEgtjfjntdsnQizeOhuVjs/s1600/Twitter.png)no-repeat;
background-position:center center;
}
ul#social .googleplus a      {
    background:#D73D27 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2WxwQ33p4LUXq01cWkUDb_xx8l8z6k6QKGuQqdFnIuIWcuB5wDta_BzjbXk3HzOl3bxh9Ik1-plkVTsJGOAKm7tUd5HvtAi3zlybkmDuSJIyFg5_J-k6flOH9aCvr4jqUFZ518fr1qiw/s1600/GOOGLE+PLus.png)no-repeat;
background-position:center center;
}
ul#social .facebook a      {
    background:#1A4B97 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOc6WWvXvk9f3sGp8whcJ-A7oiI5ForfGuKiWK-2wjY0S3xmlQzzaNCNalH1huicxRODokMrHmLA3M41p0-M9voC6sj0QnEiDyPkGX_QYHWQyZFqvqETCKx6a6ydHG8fLn78GiwRKKEl4/s1600/Facebook.png)no-repeat;
background-position:center center;
}
ul#social .rss a      {
    background:#FAAE17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxv59Xuwx1F4sqs3NKMq-POm_wKtb82fV669HIsFvIY1nMViE6rlelB-NEpbzflkv1g0-1FgWOhtbiFLTx3kjclPfUIA0m7kFZdGZfUCKSv5ycxAsh3riPIfX_G8Y6ghUEFOw95EkcHGE/s1600/rss.png)no-repeat;
background-position:center center;
}
ul#social .pinterest a   {
    background:#963336 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6cRs3ASsdLPG8D_fbRXr-vPasWBO7RcsEZRaw61-qKXOUPCPUTHsapuaqZ0JrVUxMhkZ2lYJ3YQryjoIPj7zaF6v_c6hEjxPrVAnOyp-fdJcniSZn8zBBYAnup0o4TDFC36-svc195eU/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